HTML页面渲染及优化详解

2019-06-02 本文已影响0人 vinterx

一、HTML页面渲染

HTML.png

页面渲染主要经过过程，具体介绍如下：

HTML/SVG/XHTML，解析这三种文件会产生一个 DOM Tree
CSS，解析 CSS 会产生 CSS 规则树
合并DOM Tree 和CSS规则树（CSSOM）生成渲染树（Render树）
浏览器根据Render树计算DOM节点位置，搭建页面结构
根据每个节点的属性（css）绘制HTML页面

文档对象模型（DOM树）的解析过程

字节 → 字符 → 令牌 → 节点 → 对象模型

image.png

字节转换：浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成各个字符。
令牌化：浏览器将字符串转换成 W3C HTML5 标准规定的各种令牌，例如，“<html>”、“<body>”，以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则（HTML语义化）。
词法分析： 发出的令牌转换成定义其属性和规则的“对象”。
DOM 树：根据父子关联关系，构建出对应节点数（DOM树）

二、CSS 对象模型 (CSSOM)

CSS树的生成和DOM树的生成基本是相同，如下

image.png

为什么会有CSS树

image.png

因为CSS关系也会有父子关系，就是css中常说的继承，一些样式如font-size等子元素会继承父级，所以会生成一套对应的CSS树和DOM树相对应。

三、Reflow（重排）and Repaint（重绘）

$\color{red}{重排一定会导致重绘，但是重绘不一定导致重排}$
通过上面的页面渲染介绍，很容易理解，重排就是重新布局页面结构，计算节点位置，而重绘就是绘制页面，只是一些样式如背景，颜色的变化等，不需要重新计算位置布局，所以重排一定会导致重绘，但是重绘不一定导致重排。

导致页面重排主要有以下几点

页面首次渲染。
浏览器窗口大小发生改变。
元素尺寸（宽高等）或位置（布局属性如padding、margin）发生改变。
元素内容变化（文字数量或图片大小等等）。
元素字体大小变化。
添加或者删除可见的DOM元素。
激活CSS伪类（例如：:hover）。
设置style属性。
查询某些属性或调用某些方法。

常见引起重排属性和方法
width	height	margin	padding
display	border	position	font-size
clientWidth	clientHeight	clientTop	clientLeft
offsetWidth	offsetHeight	offsetTop	offsetLeft
scrollWidth	scrollHeight	scrollTop	scrollLeft
scrollTo()	getComputedStyle()	getBoundingClientRect()	scrollIntoViewNeeded()

常见引起重绘属性和方法
color	visibility	border-color
background	text-decoration	outline-color
border-radius	background-image	box-shadow

四、重排优化

分离读写

div.style.left = '10px';
console.log(div.offsetLeft);
div.style.top = '10px';
console.log(div.offsetTop);
div.style.width = '20px';
console.log(div.offsetWidth);
div.style.height = '20px';
console.log(div.offsetHeight);

上文中触发了四次重排，通过上文介绍，offsetTop，scrollTop，clientTop等属性的修改会触发重排，当浏览器获取DOM样式的时候立刻会执行一次重排，因为需要计算浏览器位置坐标，不会再继续观察下文是否还有DOM的操作，下文介绍浏览器渲染机制。

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';

console.log(div.offsetLeft);
console.log(div.offsetTop);
console.log(div.offsetWidth);
console.log(div.offsetHeight);

这种情况看似会触发四次重排，实际只会触发一次重排，现代浏览器基本都有渲染机制，浏览器会批量将样式修改一次性执行，批量修改完后再批量获取DOM位置，实际只触发一次。

缓存DOM信息

div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';

等价于

let curLeft = div.offsetLeft;
div.style.left = curLeft + 1 + 'px';
let curTop = div.offsetTop;
div.style.top = curTop + 1 + 'px';

通过上文，容易理解这种情况会触发两次重排，可以使用缓存（实际是分离读写）来优化。

let curLeft = div.offsetLeft;
let  curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';

脱离文档

var ul = document.getElementById('demo');
for(var i = 0; i < 5; i++){
    var li = document.createElement('li');
    var text = document.createTextNode(i);
    li.appendChild(text);
    ul.appendChild(li);
}

这种情况会触发五次重排

var ul = document.getElementById('demo');
ul.style.display = 'none'; <--
for(var i = 0; i < 1e5; i++){
    var li = document.createElement('li');
    var text = document.createTextNode(i);
    li.appendChild(text);
    ul.appendChild(li);
}
ul.style.display = 'block'; <--

var ul = document.getElementById('demo');
var frg = document.createDocumentFragment(); <--
for(var i = 0; i < 1e5; i++){
    var li = document.createElement('li');
    var text = document.createTextNode(i);
    li.appendChild(text);
    frg.appendChild(li); <--
}
ul.appendChild(frg); <--

var ul = document.getElementById('demo');
var clone = ul.cloneNode(true); <--
for(var i = 0; i < 1e5; i++){
    var li = document.createElement('li');
    var text = document.createTextNode(i);
    li.appendChild(text);
    clone.appendChild(li); <--
}
ul.parentNode.replaceChild(clone,ul); <--

display:'none, 隐藏DOM节点；
创建创建一个新的空白的文档片段（DocumentFragment），它不是主DOM树的一部分，因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面重排（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。
cloneNode() 方法拷贝所有属性和值。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
总结
脱离文档 => 改变演示 => 回归文档

动画脱离文档流

避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性实现元素的动画，设置position属性，最好是设为absoulte或fixed，脱离文档流，这样不会影响其他元素的布局。

事件委托

事件委托原理：利用事件冒泡的特性，子元素都会冒泡到父元素上，当子元素如（li）元素都绑定事件时，可以只需绑定父元素（ul）来达到相同的效果，这样不仅减少了对dom的操作，减少重排或重绘，而且不用分配大量变量来保存dom，减少了内存。

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

委托

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　    alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}

尽量不使用table布局

不要使用table布局，因为table中某个元素一旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

通过类名改样式

不要一个个修改属性，应通过一个class来修改

document.getElementsByClassName('outer')[0].style.width="50px";
document.getElementsByClassName('outer')[0].style.top="60px";

改为

document.getElementsByClassName('outer')[0].className += ' news'

参考文献
https://blog.csdn.net/b954960630/article/details/82317999

HTML页面渲染及优化详解

一、HTML页面渲染

文档对象模型（DOM树）的解析过程

二、CSS 对象模型 (CSSOM)

三、Reflow（重排）and Repaint（重绘）

四、重排优化

分离读写

缓存DOM信息

脱离文档

动画脱离文档流

事件委托

尽量不使用table布局

通过类名改样式

猜你喜欢

热点阅读