浅谈浏览器加载原理

 

       要理解浏览器的工做原理首先要对浏览器有一个初步的认识（几个主流的浏览器：IE、Chrome、Firefox、afari、Opera），浏览器中最核心的部分是渲染引擎（Rendering Engine），也就是所谓的“浏览器内核”

　　其实浏览器的内核除渲染引擎外还包括JS引擎，前者决定了浏览器如何显示网页的内容以及页面的格式信息，主要负责对网页愈发的解释并渲染；后者则是对JavaScript进行解释、编译和执行，从而使网页达到一些动态效果

　　最开始的时候两者并无很明确的区分，只不过随着JS引擎愈来愈独立，后来提起内核咱们就更倾向于指的是渲染引擎

浏览器的工做流程

　　当咱们在浏览器地址栏中敲如url回车后浏览器工做流程大体是这样的：浏览器开启网络请求线程，向服务器发送完整的http请求，再由服务器把数据返回到浏览器中，期间经历了一系列流程如：DNS查询、TCP/IP请求构建、五层因特网网络协议等

　　浏览器在接收到内容后首先会根据文件的编码格式如UTF-8将字节流转为字符流，而后语法解析器根据标签的开始、标签的结束、属性等将html解析成Token（好比<p class='test' >helloworld</p> 就能够拆分为<p标签的开始、class='test'属性、</p>标签的结束）接下来就会把这些词构成一颗DOM树

　　浏览器也会将CSS样式解析成CSSOM树，以后会根据样式的Selector将CSSOM和DOM合并成为Render Tree，最后浏览器会根据Render Tree 计算布局与元素的大小并绘制整个页面。

浏览器是多进程的

　　浏览器是多进程的，有一个主控进程，以及每个tab页面都会新开一个进程（某些状况下多个tab会合并进程）

进程可能包括主控进程，插件进程，GPU，tab页（浏览器内核）等。

• Browser进程：浏览器的主进程（负责协调、主控），只有一个
• 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才建立
• GPU进程：最多一个，用于3D绘制
• 浏览器渲染进程（内核）：默认每一个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程

浏览器渲染引擎是多线程的

• js引擎线程
  
  • JS引擎一直等待着任务队列中任务的到来，而后加以处理，一个Tab页（renderer进程）中不管何时都只有一个JS线程在运行JS程序
• GPU渲染线程
  
  • 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（至关于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时当即被执行。
• 定时器线程
  
  • 传说中的setInterval与setTimeout所在线程
  • 浏览器定时计数器并非由JavaScript引擎计数的,（由于JavaScript引擎是单线程的, 若是处于阻塞线程状态就会影响记计时的准确）
  • 所以经过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
  • 注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。
• 事件触发线程
• 异步http请求线程
  
  • 在XMLHttpRequest在链接后是经过浏览器新开一个线程请求
  • 将检测到状态变动时，若是设置有回调函数，异步线程就产生状态变动事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

回流与重绘

【回流】

　　回流是指窗口尺寸被修改、发生滚动操做，或者元素位置相关属性被更新时会触发布局过程，在布局过程当中要计算全部元素的位置信息。因为HTML使用的是流式布局，若是页面中的一个元素的尺寸发生了变化，则其后续的元素位置都要跟着发生变化，也就是从新进行流式布局的过程，因此被称之为回流

触发回流包括以下操做：

　　一、DOM元素的几何属性变化

　　二、DOM树的结构变化

       三、改变元素的一些样式

　　四、调整浏览器窗口大小

　　五、获取下列属性

offsetTop\offsetLeft\offsetWidth\offsetHeight\scrollTop\scrollLeft\scrollWidth\scrollHeight\clientTop\clientLeft\clientWidth\clientHeight\getComputedStyle()\currentStyle()

 

　　触发回流必定会触发后续的重绘操做，并且对一个元素的回流，可能会影响到父级元素。好比子元素浮动后，父元素会出现高度塌陷的状况。因此，性能优化的重点在于尽可能只触发小规模的重绘，尽可能不触发回流

【重绘】

　　重绘是指当与视觉相关的样式属性值被更新时会触发绘制过程，在绘制过程当中要从新计算元素的视觉信息，使元素呈现新的外观因为元素的重绘repaint只发生在渲染层 render layer上。因此，若是要改变元素的视觉属性，最好让该元素成为一个独立的渲染层render layer

　　下面以元素显示为例，进行说明。实现元素显示隐藏的方式有不少

　　display: none/block，会引发回流，从而引发重绘，性能较差

　　visibility: visibile/hidden，只引发重绘，但因为没有成为一个独立的渲染层，会引发整个页面（或当前渲染层）的重绘，性能较好

　　opacity: 0/1，opacity小于1时，会产生render layer。因此opacity在0、1的变化中，引发了render layer的生成和销毁，所以，也会引发回流，从而引发重绘，性能较差。若是opacity: 0/0.9，则只会引发重绘

　　若是对一个元素使用硬件加速渲染，如具备CSS 3D属性，则不会进行重绘和回流。但若是使用硬件渲染的元素过多，会形成GPU的传输压力

【性能优化】

　　下面列举一些减小回流次数的方法

　　一、不要一条一条地修改DOM样式，而是修改className或者修改style.cssText

　　二、在内存中屡次操做节点，完成后再添加到文档中去

　　三、对于一个元素进行复杂的操做时，能够先隐藏它，操做完成后再显示

　　四、在须要常常获取那些引发浏览器回流的属性值时，要缓存到变量中

　　五、不要使用table布局，由于一个小改动可能会形成整个table从新布局。并且table渲染一般要3倍于同等元素时间

　　此外，将须要屡次重绘的元素独立为render layer渲染层，如设置absolute，能够减小重绘范围；对于一些进行动画的元素，能够进行硬件渲染，从而避免重绘和回流

【参考】：

https://www.cnblogs.com/xiaohuochai/p/9174471.html

https://www.jianshu.com/p/1e455a9226ce