大部分 web 网页都是跑在浏览器环境中的

也有小部分前端，是跑在其他环境中的。本文主要讲述的是运行在浏览器上的网页，很久以前一直想要了解网页是如何在浏览器运行的，在网上看过很多文章，只可惜最后都没有在我脑子里面留下深刻的印象，我也没有真正的理解。当被问到有关于网页性能优化，我只能张口就背，很遗憾，在实际的开发过程中也没有深入骨子里，以至于我写了很多糟糕冗余的代码，让领导同事看着难受。关于这个问题我反思自己，到如今我才有一个比较清晰的概念。如果你也想了解，推荐你看一系列文章 浏览器工作原理与实践 ，目前我就是基于这个写一写自己的理解。

浏览器是如何渲染网页的？

DOM 生成

从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的。所以要通过 HTML 解析器转化为 DOM 结构。 HTML 解析器并不是等整个文档加载完成之后在解析，而是网络进程加载了多少数据， HTML 解析器便解析多少数据 ，当渲染进程准备好了之后，网络进程和渲染进程之间会建立一个共享数据的管道，网络进程接受到数据后就往这个管道里面放，渲染进程则从管道的另外一端不断的读取数据，并同时将读取到的数据喂给 HTML 解析器。

因为 javaScript 可能会修改 DOM，所以 HTML 解析器就会暂停 DOM 的解析。又因为javaScript 有可能是用来操作 CSSOM ，所以在执行 javaScript 之前，还需要等待外部的 CSS 文件下载完成，并解析生成 CSSOM 对象之后，才能执行 javaScript 。

虽然现在浏览器默认已经做了各种性能优化了，但是在本质上面 javaScript 会阻塞 DOM 的生成，而样式又会阻塞 javaScript 的执行。

题外话：我们在发送请求的时候带上了多余的用户信息，比如一些不必要的 cookie ，服务器接收到这些信息可能需要对每一项都做处理，这样加大了服务器的处理时间

所以在实际工程中需要重点关注 javaScript 文件和样式表文件，使用不当会影响到页面性能

DOM 树：和HTML 标签是一一对应的，包括head和隐藏元素，但是渲染树不包括head和隐藏元素

样式计算

首先把 css 理解成浏览器能够理解的结构 styleSheets。转换样式表中的属性，使其标准化，这里可以涉及到性能优化，平时写代码的时候尽量标准化，可以加快浏览器渲染。举个例子：vw,color:blue 都会转化为渲染引擎容易理解的 px,color:rgb(0,0,255)。所以是不是我们可以在标准化这里注意代码书写，提高渲染速度呢？？

最后就是计算每一个 DOM 树中每一个节点的具体样式了。

布局

完成之后并不是直接渲染到页面，并不是，只是把这些信息保存在布局树中，接下来是进行分层

分层，你没有听错？

因为在页面中有很多复杂的效果，3D 转换，页面滚动，z-index 等等，提高了页面的层级，为了更加方便的实现这些效果，渲染引擎还需要为特定的节点生成专用图层，并生成一颗对应的图层树（如果你用过 ps，就很好理解图层，分层了，拥有层叠上下文，被剪裁一般都会分层）

图层绘制

就是把前面所生成的东西，画在网页上；每一个画一个 DOM 节点可以看成是执行一个绘制指令，一切准备就绪就可以把绘制指令交给渲染进程去渲染了

栅格化操作

绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。

为啥会有栅格化？

因为在有些情况下图层可以很大，我们要使用滚动条滚动好久之后才滚动到底部，而我们可视区只有固定的一部分；所以合成线程会按照视口附近的图块来优先生成位图（生成位图的操作就是栅格化来执行的），通常栅格化过程都会使用 GPU 来加速生成

合成和显示

所有的图块都被栅格化，合成线程就会生成一个绘制图块的指令把他交给浏览器进程，浏览器把内容绘制到内存中，然后内存显示在屏幕上。就完成了整个渲染

虽然我们用 webpack 及相关插件进行过各种打包优化，但是如果在我们平时写代码的时候去除一点冗余代码，同事领导自己看着舒服开心，说不定打包速度都提升了。哈哈

关于重排和重绘

关于重排和重绘，网上文章很多，你能理解记住看懂的就是好文章。我写的我看懂了，你懂不懂我不知道

页面离开时

当窗口即将被卸载（关闭）时,会触发该事件.此时页面文档依然可见,且该事件的默认动作可以被取消. window.onbeforeunload=function(){ return ''} 网页会给一个提醒，问我们是否要离开此网页。如果你选择取消，那么网页不会被关闭，会一直停留在当前页面。如果你点击离开，此网页就会被关闭。

他的使用场景是： 提醒用户是否要关闭此网页，为了避免意外关闭网页 页面重新加载的时候清空一些数据

如何处理浏览器的断网情况？ 这篇文章写的挺好的的，还有demo，我推荐看看他的文章

在线和离线事件

前面两篇文章我觉得已经介绍的很详细了，用法也很简单。看看就能懂，就是监听两个事件online和offline

然后在对应的事件里面做对应的事情就好了，完美结束

浏览器判断是否断网