加载资源优化
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渲染完即可执行，此时图片，视频可能还没有加载完
});
网友评论