web前端开发性能优化
程序员文章站
2022-07-02 10:38:16
...
性能优化
-
优化原则
- 多使用内存、缓存或其他方法
- 多使用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>
这篇文章就到这了,当然这只是性能优化部分操作。这是我最近学习的笔记,如有错误,恳请指正!
上一篇: 也许作文真的感人