文章目录

  1.网页被解析的过程

  大家有没有深入思考过：一个网页URL从输入到浏览器中，到显示经历过怎么样的解析过程呢？

  要想深入理解下载的过程js设置浏览器内核，我们还要先理解，一个index.html被下载下来后是如何被解析和显示在浏览器上的.

  2.浏览器的内核

  浏览器最核心的就是浏览器内核

  常见的浏览器内核有

  我们经常说的浏览器内核指的是浏览器的排版引擎：

  也就是一个网页下载下来后，就是由我们的渲染引擎来帮助我们解析的。

  3.浏览器渲染流程3.1 渲染引擎解析页面简介

  渲染引擎在拿到一个页面后，如何解析整个页面并且最终呈现出我们的网页呢？

  更详细的解析过程如下：

  3.2 解析一: HTML解析过程

  因为默认情况下服务器会给浏览器返回index.html文件，所以解析HTML是所有步骤的开始：

  3.3 解析二: 生成CSS规则

  在HTML解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件：

  浏览器下载完CSS文件后，就会对CSS文件进行解析js设置浏览器内核，解析出对应的规则树：

  3.4 解析三: 构建Render Tree

  当有了DOM Tree和 CSSOM Tree后，就可以两个结合来构建Render Tree了

  注意一：link元素不会阻塞DOM Tree的构建过程，但是会阻塞Render Tree的构建过程

  注意二：Render Tree和DOM Tree并不是一一对应的关系，比如对于display为none的元素，压根不会出现在render tree中；

  3.5 解析四: 布局和绘制

  第四步是在渲染树（Render Tree）上运行布局（Layout）以计算每个节点的几何体。

  第五步是将每个节点绘制（Paint）到屏幕上

  4.回流和重绘(面试重点)4.1 回流

  理解回流reflow：（也可以称之为重排）

  什么情况下引起回流呢？

  4.2 重绘

  理解重绘repaint：

  什么情况下会引起重绘呢？

  4.3 如何避免回流

  所以在开发中要尽量避免发生回流：

  修改样式时尽量一次性修改尽量避免频繁的操作DOM尽量避免通过getComputedStyle获取尺寸、位置等信

  息；对某些元素使用position的absolute或者fixed5.特殊解析 – composite合成

  绘制的过程，可以将布局后的元素绘制到多个合成图层中。

  默认情况下，标准流中的内容都是被绘制在同一个图层（Layer）中的；

  而一些特殊的属性，会创建一个新的合成层（ CompositingLayer ），并且新的图层可以利用GPU来加速绘制；

  那么哪些属性可以形成新的合成层呢？常见的一些属性：

  分层确实可以提高性能，但是它以内存管理为代价，因此不应作为 web 性能优化策略的一部分过度使用。

  6. script标签的属性6.1 script元素和页面解析的关系

  我们现在已经知道了页面的渲染过程，但是JavaScript在哪里呢？

  为什么要这样做呢？

  但是这个也往往会带来新的问题，特别是现代页面开发中：

  为了解决这个问题，script元素给我们提供了两个属性（attribute）：defer和async。

  6.2 defer属性

  defer 属性告诉浏览器不要等待脚本下载，而继续解析HTML，构建DOM Tree。

  所以DOMContentLoaded总是会等待defer中的代码先执行完成。另外多个带defer的脚本是可以保持正确的顺序执行的, 执行顺序就是书写的顺序。从某种角度来说，defer可以提高页面的性能，并且推荐放到head元素中, 放在head元素中可以提前下载,；注意：defer仅适用于外部脚本，对于script默认内容会被忽略。6.3 async属性

  async 特性与 defer 有些类似，它也能够让脚本不阻塞页面。

  async是让一个脚本完全独立的：

  浏览器不会因 async 脚本而阻塞（与 defer 类似）；async脚本不能保证顺序，它是独立下载、独立运行，下载完成就运行, 不会等待其他脚本；async不能保证在DOMContentLoaded之前或者之后执行；

  defer通常用于需要在文档解析后操作DOM的JavaScript代码，并且对多个script文件有顺序要求的；

  性与 defer 有些类似，它也能够让脚本不阻塞页面。**

  async是让一个脚本完全独立的：

  浏览器不会因 async 脚本而阻塞（与 defer 类似）；async脚本不能保证顺序，它是独立下载、独立运行，下载完成就运行, 不会等待其他脚本；async不能保证在DOMContentLoaded之前或者之后执行；

  defer通常用于需要在文档解析后操作DOM的JavaScript代码，并且对多个script文件有顺序要求的；

  async通常用于独立的脚本，对其他脚本，甚至DOM没有依赖的；