摘要:浏览器的预解析可以减缓渲染被阻塞的情况,例如文档解析过程中预加载器发现了标签,会对文件进行加载并放在浏览器缓存中,这样当解析器遇到这个标记时,由于预加载器已经将文件加载下来了,所以会被立即执行,不需要等待从网络抓取资源,减缓了对渲染的阻塞。
参考资料
浏览器的工作原理
浏览器加载网页时的过程是什么?
HTML渲染过程详解
浏览器的工作原理 一、浏览器的高层结构浏览器的主要组件为:
用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
JavaScript 解释器。用于解析和执行 JavaScript 代码。
数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。
值得注意的是,和大多数浏览器不同,Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。
二、主流程呈现引擎一开始会从网络层获取请求文档的内容,内容的大小一般限制在 8000 个块以内。
然后进行如下所示的基本流程:
呈现引擎将开始解析 HTML 文档,并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构:呈现树。
呈现树包含多个带有视觉属性(如颜色和尺寸)的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
呈现树构建完毕之后,进入“布局”处理阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树,由用户界面后端层将每个节点绘制出来。
需要着重指出的是,这是一个渐进的过程。为达到更好的用户体验,呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后,就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时,呈现引擎会将部分内容解析并显示出来。
主流程示例:
脚本
网络的模型是同步的。网页作者希望解析器遇到 标签,会对 last.js 文件进行加载并放在浏览器缓存中,这样当解析器遇到这个
由上面两张截图可以看到,jquery.min.js 脚本文件与 bootstrap.css 等样式文件并行加载,但是由于 chrome 的并发连接数上限为 6 个,因此 bootstrap.min.js 脚本、xxx.css 样式等文件的加载会等待前面的文件加载完成,有可用连接数的时候才开始加载。
了解以上信息之后,我们可以对该页面进行相应优化,例如对CSS文件进行压缩处理、使用 CDN,将资源分布在多个域名下、合并 CSS 文件,减少 HTTP 请求数量等,来提高 CSS 的加载速度,减少 HTML 文档解析和渲染的阻塞时间。
</>复制代码
browser only allows six TCP connections per origin on HTTP 1.
浏览器的并发请求数目限制是针对同一域名的。因此可以使用 CDN 加速技术来提高用户访问网站的响应速度,这样使用了 CDN 的资源加载不会占用当前域名下的并发连接数,从而减少阻塞的时间。
网页性能了解 HTML 文档的解析和渲染的过程对于分析网页性能有着重要意义,它可以帮助我们找到影响网页性能的关键因素。例如,我们知道 JS 外部脚本的执行会阻塞文档的解析,那么重量级的第三方插件则会影响首页加载的速度,如果因此影响到了用户体验,我们就需要考虑这个第三方插件的使用成本是不是太高了,能否使用其他轻量级的插件进行替代,或者只使用其中一部分模块。
以 Datatables 为例:
上图是一个项目页面的 Network 截图,红色框中的部分出现了约 700ms 左右的空白,我们需要知道为什么页面的加载会出现这样的情况,这段空白时间浏览器在干什么?
我们分析 Timeline 图,看看浏览器在这段时间的具体信息,如下:
通过 Timeline 图我们可以看到,在 250ms~900ms 时间区间内,浏览器在执行 datatables.min.js 脚本代码,这个脚本的执行阻塞了文档的解析,耗时约 700ms,对应了 Network 图中的空白。
我们继续查看页面总的耗时时间,评估 700ms 耗时的影响,如下:
可以看到,页面总的完成耗时为 1.66s,由此可知 datatables.min.js 的执行耗时占了很大比重,应当慎重考虑是否一定要使用这个插件,能否使用其他轻量级的插件进行替代,或者能否精简插件的不必要模块,或者舍弃插件的使用。
参考资料-1
浏览器接收到html代码,可能是一份完整的文档,也可能是一个chunk,即开始解析。解析过程是先构建dom树,再根据dom树构建渲染树,最后浏览器将渲染树绘制到页面上。
构建dom树的过程即根据html代码自上而下进行构建,当遇到script文件加载/执行会阻塞后面dom树的构建(javascript可能会改变dom树),而遇到css文件则会阻塞渲染树的构建,即dom树依然继续构建(除非遇到script标签并且css文件依旧未加载完成),但不会渲染绘制到页面上。而无论哪个阻塞,该加载的文件还是会加载,例如html文档中的其他css/js/图片文件。
另外javascript被加载后就会被执行,执行的过程也阻塞树的构建。是执行完了才解析其他内容,而不是执行完了才加载其他内容。
作者:加冰
链接:https://www.zhihu.com/questio...
参考资料-2
首先,开源浏览器一般以8k每块下载html页面。
然后解析页面生成DOM树,遇到css标签或JS脚本标签就新起线程去下载他们,并继续构建DOM。
下载完后解析CSS为CSS规则树,浏览器结合CSS规则树和DOM树生成Render Tree。
注意:构建CSS Object Model(CSSOM)会阻塞JavaScript的执行。JavaScript的执行也会阻塞DOM的构建。
JavaScript下载后可以通过DOM API修改DOM,通过CSSOM API修改样式作用域Render Tree。
每次修改会造成Render Tree的重新布局和重绘。只要修改DOM或修改了元素的形状或大小,就会触发Reflow,单纯修改元素的颜色只需Repaint一下(调用操作系统Native GUI的API绘制)。
作者:陈金
链接:https://www.zhihu.com/questio...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54748.html
摘要:每种可被解析的格式必须具有由词汇及语法规则组成的特定的文法,称为上下文无关文法。解析解析器,每个标识都有特定的正则进行解析。开发者可以将脚本标识为,以使其不阻塞文档解析,并在文档解析结束后执行。 浏览器组成 用户界面-地址栏、按钮之类的 浏览器引擎-用来查询及操作渲染引擎的接口 渲染引擎-显示请求的内容 网络-进行网络请求 ui后端-用来沪指选择框、对话框的基本组件 js解析器 数据...
摘要:浏览器的预解析可以减缓渲染被阻塞的情况,例如文档解析过程中预加载器发现了标签,会对文件进行加载并放在浏览器缓存中,这样当解析器遇到这个标记时,由于预加载器已经将文件加载下来了,所以会被立即执行,不需要等待从网络抓取资源,减缓了对渲染的阻塞。 参考资料 浏览器的工作原理 浏览器加载网页时的过程是什么? HTML渲染过程详解 浏览器的工作原理 一、浏览器的高层结构 浏览器的主要组件为:...
摘要:浏览器的预解析可以减缓渲染被阻塞的情况,例如文档解析过程中预加载器发现了标签,会对文件进行加载并放在浏览器缓存中,这样当解析器遇到这个标记时,由于预加载器已经将文件加载下来了,所以会被立即执行,不需要等待从网络抓取资源,减缓了对渲染的阻塞。 参考资料 浏览器的工作原理 浏览器加载网页时的过程是什么? HTML渲染过程详解 浏览器的工作原理 一、浏览器的高层结构 浏览器的主要组件为:...
阅读 3081·2021-11-25 09:43
阅读 2256·2021-09-07 10:28
阅读 3564·2021-08-11 11:14
阅读 2779·2019-08-30 13:49
阅读 3548·2019-08-29 18:41
阅读 1167·2019-08-29 11:26
阅读 1977·2019-08-26 13:23
阅读 3377·2019-08-26 10:43