.bat是什么语言_简单说说当我们打开网页时,浏览器到底做了什么?

前言:为什么我们需要掌握浏览器的原理

作为一名前端研发,平日里打交道最多的,就是各式各样的客户端。

不论你是针对pc端还是移动端,甚至是专门在微信端做前端研发,都需要跟一样东西接触——浏览器。

不知道你有没有留意过在使用浏览器的过程中,“遭遇”的某些现象:

1.部分网站,明明没有过多的资源加载,却打开速度奇慢无比;

2.部分网站相比于同类型网站,交互流畅程度相对差;

……

诸如此类的现象还有很多,这种现象的频繁发生,极大降低了用户体验,降低了用户的留存率。

代码冗余、封装性差……诸如此类的低维护性,导致整体项目在线上环境呈现出明显的卡顿和延迟。

实际上,我在接触BAT等互联网企业的开发者时,就发现,他们对于浏览器的原理和优化有着极为严苛的要求,对底层知识的要求很高。

于是,今天我想简单聊一聊,浏览器的原理(注意:是简单聊聊,不涉及过深的理论)。


1.当我们在打开网页时,浏览器做了什么

如果你现在手边有一台电脑,而电脑上又恰好安装了Chrome浏览器,那么请你做下面的一件事——

打开你的Chrome浏览器,然后打开你的浏览器的任务管理器,

你会看到什么?

我的任务管理器截图如下:

fd800cb508fefb3acad5f20b7af7cadd.png

为什么我们仅仅是打开1~2张网页,就触发了如此多的进程(注意我这里说的是进程而不是线程,一个进程可以包含多个线程,1个线程又可以包含多个模块

这就需要引入一个新的概念——多线程浏览器

2.多线程浏览器:现代主流浏览器的“标配”

我隐约记得,多线程浏览器横空出世的年份,似乎是在2007年还是2008年。

在此之前,我们都在使用单线程浏览器。

前端开发对”单线程“3个字再熟悉不过了,因为,我们最常用的语言JavaScript就是经典的单线程语言。

如果要我用最通俗,最粗矿的语言来解释单线程,我就一句话——”代码一行一行按着顺序往下读,如果报错就卡在那里不走“

试想一下我们在使用单线程浏览器的时候会发生什么错误,假设我们在打开一张页面,浏览器的网络线程、插件线程、渲染线程等等挨着挨着往下走。

159cc50ddd43b85a1d9a2adb4155fcc4.png
单线程浏览器处理单张页面的机制

当走到页面线程JavaScript渲染的时候,如果不巧遇见了下面的执行代码:

const 

然后进程就会彻底卡死在这里,整个页面将崩溃,不仅是本页面,可能浏览器打开的好几张也页面都会呈现出这样的致命缺陷。

出于要绕开上述的问题,才有了单线程浏览器的替代版本,也就是今天普遍在使用的多线程浏览器。

多线程浏览器的工作原理如下,我们再次想象我们打开一张页面的过程:

8f9a315200b56baa5d6e9933b62c783d.png
多线程浏览器的工作原理

当我们再次打开一张页面时,此时多个线程会被分割,这种低耦合的方式,其好处就在于即使任意一个线程的任意一个模块报错,也不会影响其他的线程。

页面也能在部分功能缺失的情况下,渲染出绝大部分。

最典型的例子就是,当网速较慢的时候,我们在浏览一些图片较多且较大的网站时,DOM和样式都已经完全渲染出来了,可是图片还没渲染出来,导致页面中的<img>标签呈现出明显的不和谐感。

(未完待续……)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/469120.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

花书《深度学习》代码实现:02 概率部分:概率密度函数+期望+常见概率分布代码实现

1 概率 1.1 概率与随机变量 频率学派概率 (Frequentist Probability)&#xff1a;认为概率和事件发⽣的频率相关。贝叶斯学派概率 (Bayesian Probability)&#xff1a;认为概率是对某件事发⽣的确定程度&#xff0c;可以理解成是确信的程度。随机变量 (Random Variable)&…

内存泄露Lowmemorykiller分析

01 前言 最近疫苗事情非常火热,这件事情让我对刘强东有点刮目相看,我们需要更多的人关注曝光此类问题 02 正文 Android Kernel 会定时执行一次检查,杀死一些进程,释放掉内存。Low memory killer 是定时进行检查。Low memory killer 主要是通过进程的oom_adj 来判定进程的…

TabError: inconsistent use of tabs and spaces in indentation

本文使用PyCharm的格式化代码功能解决TabError: inconsistent use of tabs and spaces in indentation。 1、提出问题&#xff1a; 当把代码从别处复制进来PyCharm&#xff0c;然后运行报错&#xff1a;TabError: inconsistent use of tabs and spaces in indentation 2、 分…

python 默认参数_有趣的 Python 特性 3 | 当心默认可变参数这个大猪蹄子。

本文字数&#xff1a;1575 字阅读本文大概需要&#xff1a;4 分钟写在之前Python 提供了很多让使用者觉得舒服至极的功能特性&#xff0c;但是随着不断的深入学习和使用 Python&#xff0c;我发现其中存在着许多玄学的输出与之前预想的结果大相径庭&#xff0c;这个对于初学者来…

AI-无损检测方向速读:基于深度学习的表面缺陷检测方法综述

1 表面缺陷检测的概念 表面缺陷检测是机器视觉领域中非常重要的一项研究内容, 也称为 AOI (Automated optical inspection) 或 ASI (Automated surface inspection)&#xff0c;它是利用机器视觉设备获取图像来判断采集图像中是否存在缺陷的技术。 1.1 传统检测的缺陷(非CNN)…

【完美解决】RuntimeError: one of the variables needed for gradient computation has been modified by an inp

正文在后面&#xff0c;往下拉即可~~~~~~~~~~~~ 欢迎各位深度学习的小伙伴订阅的我的专栏 Pytorch深度学习理论篇实战篇(2023版)专栏地址&#xff1a; &#x1f49b;Pytorch深度学习理论篇(2023版)https://blog.csdn.net/qq_39237205/category_12077968.html &#x1f49a;Pyt…

python正则表达式入门_Python中的正则表达式教程

本文http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html 正则表达式经常被用到&#xff0c;而自己总是记不全&#xff0c;转载一份完整的以备不时之需。 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具&am…

解决ImportError: cannot import name ‘NoReturn‘报错

1、问题描述&#xff1a; 复现论文时&#xff0c;报错&#xff1a;ImportError: cannot import name ‘NoReturn‘ 尝试 pip install 安装 发现并没有这么简单 2、导致问题的原因 Python版本&#xff08;3.6.1&#xff09;与pip版本&#xff08;21.2.3&#xff09;不匹配。…

码农,你的35岁?

码农的35岁 最近经常听到关于这个话题的讨论 从深圳没有房到深圳4套房的同事 很突然 大家意识到自己在慢慢变老 好了 先放个图上来 当你老了的时候 更多的人敢对你提意见了 包括HR,包括老板&#xff0c;包括同事 然而 在年轻的时候&#xff0c;老板叫我们往东&#xff0…

删除win7多余的系统还原点_【Win7封装教程2019版】系列(二)必要的系统调整

这个系列更新就来说下必要的系统调整&#xff0c;因为在优化和清理之前&#xff0c;需要先对系统做一些必要的调整&#xff0c;以便让接下来的封装工作开展的更顺畅。本教程所有系列所有步骤都是连续连贯的&#xff0c;都有先后顺序的&#xff0c;请按照顺序来做。为了防止出现…

Bootloader传参数到Kernel

01 前言 这几天一直在考虑准备写点什么东西,本来想介绍下文件系统,不过文件系统是概念性的东西比较多,我自己也是看书摘抄的多,Bootloader传参数到Kernel,这个在我们开发中会经常遇到。 bootloader有什么用? 我突然想到,小时候去河里炸鱼,我们要自制鱼雷,把烟花里面…

python语法基础知识案例_Python 语法速览与实战清单

本文是对于 现代 Python 开发&#xff1a;语法基础与工程实践的总结&#xff0c;更多 Python 相关资料参考 Python 学习与实践资料索引&#xff1b;本文参考了 Python Crash Course - Cheat Sheets&#xff0c;pysheeet 等。本文仅包含笔者在日常工作中经常使用的&#xff0c;并…

dubbo管理控制台安装和使用

关于dubbo的配置使用已经配置好了简单的示例&#xff0c;下面先记录下dubbo管理控制台的安装和使用&#xff08;用的zookeeper的注册中心&#xff09;&#xff0c;在网上找了些按照示例 dubbo管理控制台开源部分主要包含&#xff1a; 提供者 路由规则 动态配置 访问控制 权…

RuntimeError: CUDA error (10): invalid device ordinal

一、Python Error 在 Pytorch 读取参数时&#xff0c;报错 RuntimeError: cuda runtime error (10) : invalid device ordinal。 二、解决方法 造成这个错误的原因主要是本地只有一个 GPU (GPU:0)&#xff0c;而程序中使用 GPUs:1。 因此&#xff0c;在程序中找到定义 devi…

C指针-这该死的嵌入式学习生涯

C指针-这该死的嵌入式学习生涯 01 前言 最近在公众号里面收到好几个同学关于嵌入式方面的咨询&#xff0c;再加上在知乎里面陆续推送了好几个嵌入式学习入门的问题&#xff0c;这次想统一整理一下&#xff0c;说说我这些年是如何被嵌入式按在地上摩擦的。 ​ 1、那一年夏天 200…

【YOLOV5-6.x中文注释版】整体项目代码全中文注释导航页面-By2022

1、开贴原因&#xff1a; YOLOV5&#xff1a;GitHub - ultralytics/yolov5: YOLOv5 &#x1f680; in PyTorch > ONNX > CoreML > TFLite 现在YOLOV5已经更新到6.X版本&#xff0c;现在网上很多还停留在5.X的源码注释上&#xff0c;因此特开一贴传承开源精神&#x…

学习微信公众号oauth2.0

首先看下整个步聚. 1. 后台服务器引导用户请求微信服务器, 微信服务器响应在微信浏览器提示用户是否要授权. 2. 用户同意后微信服务器返回code. 3. 微信浏览器跟据重定向redirect_uri带上code请求后面服务器. 4. 后台服务器收后code后, 用code请求微信服务器. 5. 微信服务器返回…

【YOLOV5-6.x讲解】YOLO5.0VS6.0版本对比+模型设计

主干目录&#xff1a; 【YOLOV5-6.x 版本讲解】整体项目代码注释导航现在YOLOV5已经更新到6.X版本&#xff0c;现在网上很多还停留在5.X的源码注释上&#xff0c;因此特开一贴传承开源精神&#xff01;5.X版本的可以看其他大佬的帖子本文章主要从6.X版本出发&#xff0c;主要解…

【YOLOV5-6.x讲解】数据增强方式介绍+代码实现

主干目录&#xff1a; 【YOLOV5-6.x 版本讲解】整体项目代码注释导航现在YOLOV5已经更新到6.X版本&#xff0c;现在网上很多还停留在5.X的源码注释上&#xff0c;因此特开一贴传承开源精神&#xff01;5.X版本的可以看其他大佬的帖子本文章主要从6.X版本出发&#xff0c;主要解…

Android Input子系统-含实例源码

Android Input子系统-含实例源码 1 Input子系统作用 Android很多外设都是用到输入输出设备&#xff0c;比如touchscreen&#xff0c;键盘&#xff0c;音量键等&#xff0c;输入 设备对应Android 框架是Android input子系统&#xff0c;像我们定制类比较多的&#xff0c;很多 需…