Web前端性能优化
性能优化
- 优化原则
- 多使用内存、缓存或其他方法
- 多使用CPU计算，减少网络请求
- 入手方面：
- 加载页面和资源
- 资源压缩合并
- 使用CDN
- 静态资源缓存
- 使用SSR后台渲染，数据直接渲染成HTML
- 页面渲染
- CSS在前，JS在后，这跟渲染的过程有关
- 懒加载
- 减少DOM查询，DOM查询前可以先做缓存
- 减少DOM操作，尽量合并操作
- 事件节流，比如设置一定时间才监听
- 尽早操作，比如使用DOMConentLoaded，代替onload
具体例子
资源合并压缩，比如CSS，JS压缩
<!-- 资源合并 -->
<script src="a.js" type="text/javascript"></script>
<script src="b.js" type="text/javascript"></script>
<script src="c.js" type="text/javascript"></script>
<script src="abc.js" type="text/javascript"></script>
利用缓存
<!-- 通过连接名称控制缓存 -->
<script src="abc_1.js" type="text/javascript"></script>
<!-- 只有内容改变的时候，链接名称才会改变 -->
<script src="abc_2.js" type="text/javascript"></script>
使用CDN
CDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
懒加载（图片懒加载、下拉加载更多）
<!-- 先加载一个小的图片，等到需要用时，才用js加载 -->
<img src="preview.jpg" data-realsrc="real.png" id="img1">
<script type="text/javascript">
var img1 = document.getElementById('img1');
img1.src = img1.getAttribute('data-realsrc'); //加载真实的图片
</script>
缓存DOM查询，DOM操作都是很耗时的
<script type="text/javascript">
//未缓存DOM查询，每次循环都要查一次document.getElementById('p1')
for(var i = 0; i<document.getElementById('p1').length; i++ ){
//do something
}
//缓存DOM查询,只要查询一次
var length = document.getElementById('p1').length;
for(var i = 0; i<length; i++){
//do something
}
</script>
合并DOM插入
<script type="text/javascript">
//listNode要插入10 li标签
var listNode = document.getElementById('list');
//创建了一虚拟的节点对象frag，然后添加10个li，这些操作没有改变文档，不耗时
var frag = document.createDocumentFragment();
var i, li;
for(i=0; i<10; i++){
li = document.createElement('li');
li.innerHTML="list" + i;
frag.oppendChild(li);
}
//添加虚拟节点frag，就可以添加10个li，只需要一次DOM插入
listNode.appendChild(frag);
</script>
事件节流
<script type="text/javascript">
//监听键盘弹起事件，但是打字的速度有可能很快，比如输入abcd
//所以可以一段时间才监听一次
var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function(){
if(timeoutId){// 如果存在，清除
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function(){
//do something
},100); // 100ms监听一次
})
</script>
尽早操作，使用DOMContentLoaded代替onload
<script type="text/javascript">
window.addEventListener('load', function(){
// 页面资源全部加载完全，包括视频、图片，才能执行
})
document.addEventListener('DOMContentLoaded', function(){
// 只渲染完DOM即可执行，未加载完全部资源，如视频、图片
})
</script>
这篇文章就到这了，当然这只是性能优化部分操作。这是我最近学习的笔记，如有错误，恳请指正！
