个人学习博客

# 渲染机制

  • 浏览器渲染基本原理解析 https://mp.weixin.qq.com/s/njwpsI-5T2mewPYjNef0jA
  • 浏览器渲染机制 https://www.jianshu.com/p/4bc1a46d7e9a

# 1. 什么是DOCTYPE及作用

  • DTD（document type define，文档类型定义）是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式
  • DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错
  • 常见的DOCTYPE类型有哪些：
    • HTML5 <!DOCTYPE html>
    • HTML4.01 有严格模式和传统模式

# 2. 浏览器渲染过程

    1. 从输入url到得到html的详细过程
    • 1）浏览器根据DNS服务器得到域名（url）的IP地址。
    • 2）向这个IP的机器发送http（https）请求。
    • 3）服务器收到、处理并返回http（https）请求。
    • 4）浏览器得到返回的内容。
    1. 浏览器渲染页面的过程（得到返回内容之后怎么渲染成页面的过程
    • 1）解析HTML，生成DOM树（DOM）。
    • 2）解析CSS，生成CSSOM树（CSSOM）
    • 3）将DOM和CSSOM合并，生成渲染树（Render-Tree）。
    • 4）计算渲染树的布局（Layout）
    • 5）将布局渲染到屏幕上（Paint）

# 3.几个关键概念

# 1)CSS阻塞渲染：

  • 由于CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM是完备的，这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完，只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染。CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。

# 2)JS阻塞页面：

  • JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，这就导致了浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析，也阻塞了其后的CSS解析，整个解析进程必须等待JS的执行完成才能够继续。从性能角度上讲，将script放在页面底部，也就合情合理了

# 3)重排（Reflow）：

  • DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算, 并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow
  • 触发重排（reflow）：
    • 1、当增加、删除、修改DOM节点时，会导致reflow或repaint
    • 2、当移动DOM的位置，或是插入动画的时候
    • 3、当修改CSS样式的时候
    • 4、当Resize窗口的时候，或是滚动的时候
    • 5、当修改网页的默认字体时 当网页Repaint完的时候最好不要修改默认字体，会非常耗性能。（把样式放到head里面）

# 4)重绘（Repaint）：

  • 当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
  • 触发重绘（Repaint）：
    • 1、DOM改动（代码片段）
    • 2、CSS改动
  • 最小化重绘和重排
    • 1.一次性修改样式：减少内联样式使用 样式合并写法
    • 2.批量修改DOM：使用文档片段创建一个子树，然后再拷贝到文档中（document.fragment）
    • 3.缓存布局信息
    //每次需要查询div.offsetLeft 浪费性能
div.style.left = 1 + div.offsetLeft + 'px';
div.style.top = 1 + div.offsetTop + 'px';

//将这个值保存下来，避免重复取值 性能优化
current = div.offsetLeft;
div.style.left = 1 + ++current + 'px';
div.style.top = 1 + ++current + 'px';

← 性能优化 →