1.资源合并
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="abc.js"></script>
2.缓存
- 通过连接名称控制缓存。
- <script src="abc_1.js"></script>
- 只有内容改变的时候，链接名称才会改变
- <script src="abc_2.js"></script>
3.CDN
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
4.使用SSR后端渲染
5.懒加载
<img src="preview.png" data-realsrc="abc.png"/>
<script type="text/javascript">
var img1 = document.getElementById('img');
img1.src = img1.getAttribute('data-realsrc');
</script>
6.缓存DOM查询
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script type="text/javascript">
//未缓存DOM查询
var i;
for(i=0;i < document.getElementsByTagName('p').length;i++){
//需要进行5次DOM查询
}
//缓存DOM查询
var i;
var pList = document.getElementsByTagName('p');
for (i=0;i < pList.length;i++) {
//只需要进行一次DOM查询，调用变量里的属性
}
</script>
7.合并DOM插入
//未使用缓存插入
DOM
var listNode = document.getElementById('list');
var x,li;
//插入10个LI标签
for (x = 0; x < 10; x++) {
li = document.createElement('li');
li.innerHTML = "List item" + x;
listNode.appendChild(li);
}
//使用缓存插入DOM
var listNode = document.getElementById('list'); //document.createDocumentFragment() 创建临时片段
var frag = document.createDocumentFragment();
var x,li;
for (x = 0; x < 10; x++) {
li = document.createElement('li');
li.innerHTML = "List item" + x;
frag.appendChild(li);
}
listNode.appendChild(frag);
8.事件节流
9.尽早操作
window.addEventListener('load',function(){
//页面全部加载完成才会执行，包括图片、视频等。
});
window.addEventListener('DOMContentLoaded',function(){
//页面渲染完成后执行，此时图片、视频还可能还没加载完。
})
