web性能优化基础
内容纲要
网页性能对网站至关重要，每一个细节都要处理好。一个完整的请求需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。
资源压缩与合并
对于css加载的图片可以采用纹理贴图。
针对代码体积及文件加载，可以利用webpack 模块化打包工具分块打包、按需加载以及提取公共部分代码，利用缓存可以得到解决。
DNS预解析
从用户输入一个网址到网页最终展现到用户面前，中间的大致发生以下几个流程：
- 发送到DNS（域名服务器）获得域名对应的WEB服务器的IP地址。
- 客户端浏览器与WEB服务器建立TCP（传输控制协议）连接。
- 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。
- WEB服务器响应请求，返回指定的URL数据或错误信息；如果设定重定向，则重定向到新的URL地址。
- 客户端浏览器下载数据，解析HTML源文件，解析的过程中实现对页面的排版，解析完成后，在浏览器中显示基础的页面。
- 分析页面中的超链接，显示在当前页面，重复以上过程直至没有超链接需要发送，完成页面的全部显示。
- DNS解析时间可能导致大量用户感知延迟，DNS解析所需的时间差异非常大，延迟范围可以从1ms（本地缓存结果）到普遍的几秒钟时间。
<link rel="dns-prefetch" href="hostname" />
预加载
预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源。
预加载使用 标签，并指定 rel=”prefetch”属性，而href属性就是需要预加载的文件路径。
<link rel="prefetch" href="page2.html" />
<link rel="prefetch" href="sprite.png" />
懒加载
一个页面有很多图片，而首屏出现的图片大概就一两张，如果一次性把所有图片都加载出来，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，其中要用的技术就是图片懒加载–到可视区域再加载。
function lazyload () {
var eles = document.querySelectorAll('img[data-original][lazyload]');
var viewHeight = window.innerHeight;
eles.forEach(function (item, index) {
var rect;
if (item.dataset.original === '') {
return;
}
rect = item.getBoundingClientRect();
if (rect.bottom >= 0 && rect.top < viewHeight) {
item.src = item.dataset.original;
item.removeAttribute('data-original');
item.removeAttribute('lazyload');
}
});
}
减少DOM的操作
因为每次操作都会导致浏览器重排和重绘，因此应避免或减少：
- 改变内容
- 操作大量无关属性
- 改变DOM结构
- 改变浏览器尺寸
请求数
基于端口数量和线程切换开销的考虑，浏览器不可能无限量的并发请求，因此衍生出来了并发限制。浏览器的并发请求数目限制是针对同一域名的。因此静态资源可以引用不同域名下的资源文件，间接增加浏览器请求资源的并发数。
其他
错误页面
当检测到http出错时，尽量弹出一个设计过的错误页面，这远比页面一片空白要体验友好。
网络检测
在错误页面做一个网络检测，出一个网络情况的报告，一来可以让用户自己发现问题，二来用户可以直接把这个报告提供给在线客服，加速问题的定位，当然更重要的是让用户觉得我们对这个问题很重视，我们很专业。
code enjoy! (^_−)
作者：indeex
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。