前端性能优化笔记

一、性能优化的原则

  • 多使用内存、缓存
  • 减少CPU计算、减少网络请求

二、 性能优化入手点
2.1 页面和静态资源的加载

  • 静态资源的压缩合并
    <script src="a.js"></script>
    <script src="b.js"></script>

    构建工具合并 ==> <script src="ab.js"></script>

  • 静态资源缓存
    静态资源由浏览加载一次后会有缓存，只要静态资源名字不改变，则访问浏览器的缓存。只有内容改变的时候，静态资源名字才会改变。

  • 使用cdn让资源加载更快
    常用的cdn服务百度CDN库、360的CDN服务、新浪公共CDN库、BootCDN、又拍云CDN库、CDNJS.CN和开放静态文件CDN库。

  • 使用ssr后端渲染
    好处：数据直接输出到html中进行渲染，而不需要使用ajax发送数据请求得到数据后再进行渲染。

2.2 页面的渲染

  • css放在头部，js放在底部，因为js会阻塞页面渲染
    <html>
    <head>
    <link rel="stylesheet" href="main.css">
    </head>
    <body>
    <script src="main.js"></script>
    </body>
    </html>

  • 懒加载（图片懒加载、下拉加载更多）
    实现原理：使用尺寸较小的图片作为预览图，在img的自定义数据属性data-realsrc里存储图片的真实src链接，当页面渲染到图片时再进行src的替换。



    <script>
    var img = document.getElementById('lazyImg')
    img.src = img.getAttribute('data-realsrc')
    </script>

  • 减少dom查询，对dom查询做缓存
    // 未优化
    for (var i = 0; i < document.getElementById('p').length; i ++) {
    // something to do
    }

    // 优化后
var pList = document.getElementById('p')
for (var i = 0; pList.length; i ++) {
  // something to do
}

  • 减少dom操作，多个操作尽量合并在一起执行
    var listNode = document.getElementById('list')
    // 要插入10个li标签
    var frag = document.createDocumentFragment()
    for (var x = 0; x < 10; x++) {
    li = document.createElement('li')
    li.innerHTML = 'List item' + x
    frag.appendChild(li)
    }
    listNode.appendChild(frag)

  • 事件节流
    实现原理：设置事件的延迟执行，当用户快速持续地触发keyup事件时，只有最后一次触发才会执行。
    var input = document.getElementById('input')
    var timer
    input.addEventListener('keyup', function() {
    if (timer) clearTimeout(timer)
    timer = setTimeout(function() {
    // 触发事件
    }, 100)
    })

  • 尽早执行操作
    window.addEventListener('load', function() {
    // 页面的全部资源加载完才会执行，包括图片、视频等，等待时间可能比较久
    })

    window.addEventListener('DOMContentLoaded', function() {
  // 渲染完即可执行，此时图片、视频可能还没有加载完。大部分框架使用此方法
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容