欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

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