前端开发 之 性能优化

原则

　　1、多使用内存、缓存或者其他方法存储

　　2、减少 CPU 计算、减少网络请求

入手

　　1、怎么让页面、静态资源加载的更快

　　2、怎么让页面上的一些操作变得更快

加载资源优化

1、静态资源的压缩合并，预加载文件

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

<script src="abc.js"></script>　　// 合并在一起

window.addEventListener('DOMConetentLoaded', function(){
　　setTimeout(function(){
　　　　var xhr = new XMLHttpRequest();
　　　　xhr.open('GET', 'http://dome.js');
　　　　xhr.send(null);
　　　　xhr.open('GET', 'http://demo.css');
　　　　xhr.send(null);
　　　　xhr.open('GET', 'http://demo.jpg');
　　　　xhr.send(null);
　　}, 1000)
})

2、静态资源进行缓存

通过链接名称控制缓存
<link rel="stylesheet" href="/css/main.css" />　　// 浏览器第一访问后会自动缓存，第二次或以后访问都会从缓存中读取
<link rel="stylesheet" href="/css/main_20171018.css" />　// 只有内容改变的时候，链接的名称才会改变，浏览器又会重新请求拉取，继续缓存　

3、使用 CDN 让资源加载更快

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

4、使用 SSR 后端渲染，数据直接输出到 HTML 中（如： angular，数据直接输出到页面上，不通过 Ajax 网络请求）

渲染优化

1、CSS 放前面，JS 放后面

2、懒加载（图片懒加载、下拉加载更多），图片先不加载，什么时候用，什么时候加载

<img id="imgId" src="preview.png" data-realsrc="abc.png" />　　// 第一次加载是全站通用的预览图，很小，会很快加载
<script type="text/javascript">
　　var imgId = document.getElementById('imgId');
　　imgId.src = imgId.getAttribute('data-realsrc');　　// 当需要展示的时候，再把 data-realsrc 里面图片的真正地址赋值给 src
</script>

3、减少 DOM 查询，对 DOM 查询做缓存，减少 DOM 操作，多个操作尽量合并在一起执行（DOM 操作是非常昂贵的，意思就是耗时、耗性能）

var listNode = document.getElementById('list');
var frag = document.createDocumentFragment();　　// 创建一个代码片段，不会有实质的 DOM 结构
var x, li;
for (x=0; x<10; x++) {
　　li = document.createElement('li');
　　li.innerHTML = 'List item' + x;
　　frag.appendChild(li);　　// 在片段中插入 li，不会触发的 DOM 操作
}
listNode.appendChild(frag);　　// 只有一次的 DOM 插入操作

4、事件节流

var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function(){
　　if(timeoutId){
　　　　clearTimeout(timeoutId);
　　}
　　timeoutId = setTimeout(function(){
　　　　// 延迟执行 1秒 触发 change 事件
　　}, 1000)
})

5、尽早执行操作（如：DOMContentLoaded）

window.addEventListener('load', function(){
　　// 页面的全部资源加载完才会执行，包括图片、视频等
})

window.addEventListener('DOMContentLoaded', function(){
　　// DOM 渲染完即可执行，此时图片、视频等可能还没有加载完
})