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>

这篇文章就到这了，当然这只是性能优化部分操作。这是我最近学习的笔记，如有错误，恳请指正！