Web前端性能优化

「爱情、让人受尽委屈。」 2022-11-12 08:23 413阅读 0赞

## 一、影响网页加载速度关键因素 ##

**1）网页内容的大小**  
\-压缩JS, CSS文件  
\-压缩图片。例如新的webp，图片压缩率达到40%，如果图片768KB压缩后为460.8KB。  
\-服务器端开启gzip压缩（70%压缩率）。如果你的网页有300KB，压缩之后就变成了90K左右（Gzip的 思想就是把文件先在服务器端进行压缩，然后再传输。浏览器解压缩）

**2）网页开启的连接数**  
\-合并JS  
\-合并CSS  
\-合并图片 — CSS Sprites（精灵/雪碧）

**3）网页是否缓存静态数据**  
Expires header 来缓存这些文件（通过服务器端脚本设置Cache-Control和Expires可以完成。）

**4）其他**  
减少CSS选择器嵌套，尤其是后代选择器

## 二、reflow&repaint（回流&重绘） ##

**什么是回流？**  
reflow（回流）：浏览器重新计算HTML文档中元素的位置和几何形状，以达到重新绘制部分或全部HTML文档的目的。  
**触发条件：**  
浏览器窗口大小调整。  
使用JavaScript设定“计算值”。  
添加或删除元素的DOM。

**什么是重绘？**  
repaint（重绘）：当 DOM 元素的外观属性发生变化时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。  
**触发时机：**  
一个元素的外观被改变，但没有改变布局的情况下发生。例如改变visibility、outline、前景色等。

## 减少reflow触发条件 ##

**减少不必要的DOM深度.。**  
因为改变DOM树的一个层级，会导致整个DOM树改变。这会***导致更多的时间花费到了回流上**。*  
**简化CSS规则，删除无用的CSS。**  
*避免渲染重叠的几率。*  
如果我们创建了一个复杂呈现，例如动画，可使用绝对定位或者固定定位元素。  
绝对定位，固定定位脱离文档流。  
避免使用没有必要的复杂CSS选择器。尤其是**后代选择器**。 这会导致CPU花费更多的事件计算。  
CSS样式从右向左解析。

## 最小化reflow建议 ##

例：

var myelement = document.getElementById('myelement');
    myelement.width = '100px';
    myelement.height = '200px';
    myelement.style.margin = '10px';

上述代码会导致reflow三次，应该把样式封装到一个样式中

var myelement = document.getElementById('myelement');
    myelement.classList.add('newstyles');
    +
    .newstyles {
    	width: 100px;
    	height: 200px;
    	margin: 10px;
    }

**使用“文档片段”**

var
    	i, li,
    	frag = document.createDocumentFragment(),
    	ul = frag.appendChild(document.createElement('ul'));
    
    for (i = 1; i <= 3; i++) {
    	li = ul.appendChild(document.createElement('li'));
    	li.textContent = 'item ' + i;
    }
    
    document.body.appendChild(frag);