加载资源优化

1，静态资源的压缩合并，减少HTTP请求

资源的合并，可以减少http请求数量。
资源的压缩，可以减少http请求大小。
利用项目构建工具，如gulp, grunt, webpack等等，都可以做到JS或者CSS文件的压缩，合并。

2，静态资源缓存

所谓缓存，就是资源文件在浏览器中存在的备份。
通过链接名称控制缓存。

<script src="abc_1.js"></script>

只有当内容改变的时候，链接名称才改变。

<script src="abc_2.js"></script>

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

CDN会根据客户端的所在位置，选择就近的服务器加载资源，所以速度会更快。

4，使用SSR(Server side rendering)后端渲染，数据直接输出到HTML中

现在Vue，React提出了这样的概念
其实jsp，php，asp都属于后端渲染

渲染优化

1，CSS放前面，JS放后面

2，非核心代码异步加载

异步加载方式1：动态脚本加载
用JS(document.createElement)创造一个标签，然后把这个标签加到文档中。
说白了就是动态创造节点。

异步加载方式2：defer
可以看到，引用script的时候，如果加了defer，是后执行的。

<!-- defer1.js -->
console.log('defer1')

<!-- defer2.js -->
console.log('defer2')

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./defer1.js" defer></script>
    <script src="./defer2.js" defer></script>
</head>
<body>
    <script>
        for(var i=0;i<3;i++){
            console.log(i);
        }
        
        // 输出结果：
        // 0
        // 1
        // 2
        // defer1
        // defer2
    </script>
</body>
</html>

异步加载方式3：async
可以看到，引用script的时候，如果加了async，也是后执行的。
这里要注意，async1.js和async2.js的执行顺序，不一定就是async1.js => async2.js的。
也就是说，与加载顺序无关。

<!-- async1.js -->
console.log('async1')

<!-- async2.js -->
console.log('async2')

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./async1.js" async></script>
    <script src="./async2.js" async></script>
</head>
<body>
    <script>
        for(var i=0;i<3;i++){
            console.log(i);
        }
        
        // 输出结果：
        // 0
        // 1
        // 2
        // async1
        // async2
    </script>
</body>
</html>

defer与async的区别：
defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行。
async是在加载完之后立即执行，如果是多个，执行顺序与加载顺序无关。

3，懒加载(图片懒加载，下拉加载更多)

首先，给img标签的src赋值一个预览图片，这个图片比较小。
然后，在JS中把src替换成真正的图片。

<img id="img1" src="preview.png" data-realsrc="abc.png"/>
<script>
    var img1 = document.getElementById('img1');
    img1.src = img1.getAttribute('data-realsrc');       
</script>

4，减少DOM查询，对DOM查询做缓存

// 未缓存DOM查询
var i;
for (i = 0; i < document.getElementsByTagName("p"); i++) {
    // todo
}

// 缓存了DOM查询
var pList = document.getElementsByTagName("p");
var i;
for (i = 0; i < pList.length; i++) {
    // todo
}

5，减少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();
}

// 把合并好之后的代码片段一次性插入到真实DOM中
listNode.appendChild(frag);

6，事件节流

第一次触发keyup事件时，设置一个定时器，在指定间隔(100ms)之后运行代码。
第二次触发keyup事件时
如果小于间隔时间(100ms)，定时器尚未执行，那么清除定时器并重设一个。
如果大于间隔时间(100ms)，定时器已经执行，那么再设置一个定时器。
以此来达到一段时间内的事件触发只执行一次操作。

var textarea = document.getElementById('text');
var timeoutId;

textarea.addEventListener('keyup',function(){
    if(timeoutId){
        clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(function(){
        // 触发change事件
    },100);
});

7，尽早执行操作(如DOMContentLoaded)

window.addEventListener('load',function(){
    // 页面的全部资源加载完才会执行，包括图片，视频等
    // 图片，视频资源等是异步加载的
});
window.addEventListener('DOMContentLoaded',function(){
    // DOM渲染完即可执行，此时图片，视频可能还没有加载完
});

页面性能优化