web前端性能优化

1、减少http请求

一、CSS Sprites（CSS 精灵）：

将多张图片合并成一幅单独的图，通过 background-position 来显示；

二、合并样式表和脚本：

将引入的 css 文件和 js 文件合并成一个样式表；

三、使用CDN：

加载不是经常更新和修改的静态资源(如：图片、CSS、JS第三方库等)，一是CDN域名一般会缓存在本地，二是CDN的网络请求速度是非常快的。

2、非核心代码异步加载

一、defer：

在HTML解析完之后才会执行，若有多个，按照加载的顺序一次执行

二、async：

在加载完之后立即执行，若有多个，执行顺序和加载顺序无关

demo：

<script src="https://juejin.cn/post/defer.js" defer></script>
<script src="https://juejin.cn/post/async.js" async></script>
复制代码

3、利用浏览器缓存

强缓存

Response Headers

1. Cache-Control: no-cache / no-store / max-age=8640000
2. Expires: "资源的最后修改时间"

协商缓存

Response Headers

1. Etag: "资源的唯一标识"
2. Last-Modified: “资源的最后修改时间”

Request Headers

1. Etag: "If-None-Match"

2. Last-Modified: "If-Modified-Since"

4、预解析DNS

1. 使用<link rel="dns-prefetch" href="https://leslie.com">预解析DNS

2. 页面中的所有 a 标签在高级浏览器里是默认打开了DNS预解析的，若页面是 https 协议打开的很多浏览器的 a 标签是默认关闭DNS预解析的，通过<meta http-equiv="x-dns-prefetch-control" content="on">强制打开 a 标签的DNS预解析

5、懒加载

<img src="https://juejin.cn/post/preview.png" src="https://juejin.cn/post/real.png">

<script>
    const myImg = document.getElementsByTagName('img')[0]
    myImg.src = myImg.getAttribute('data-src')
</script>
复制代码

6、使用防抖和节流

一、防抖（debounce）

const debounce = function(fn, delay = 300) {
    let timer = null
    return function() {
        if(timer) {
            clearTimeout(timer)
        }

        timer = setTimeout(function() {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}
复制代码

二、节流（throttle）

const throttle = function(fn, delay = 60) {
    let timer = null
    return function() {
        if(timer) {
            return 
        }
        
        timer = setTimeout(function() {
            fn.apply(this, arguments)
            timer = null
        }, timer)
    }
}
复制代码

7、DOM查询/DOM操作

一、对 DOM 查询进行缓存

const myBox = document.getElementById('myBox')

myBox.addEventListener('click', (event) => {
    console.log(event.target)    
})
复制代码

二、对频繁的 DOM 操作，合并到一起插入 DOM 结构

const myList = document.getElementById('myList')

const myFragment = document.createDocumentFragment()

for(let i = 0; i < 10; i++) {
    const li = document.createElement('li')
    li.innerHTML = i
    myFragment.appendChild(li)
}

myList.appendChild(myFragment)
复制代码