性能优化

• 让加载更快
• 让渲染更快

性能优化原则

• 多使用内存、缓存或其他方法（比如 webpack 打包时候，设置 filename: 'bundle.[contenthash].js' 通过 contenthash 判断是否文件修改如果没修改不进行打包生成）
• 减少 CPU 计算量，减少网络加载耗时
• 适用于所有编程的性能优化-空间换时间

让加载更快

• 减少资源体积：压缩代码
• 较少访问次数：合并代码，SSR 服务器端渲染，缓存
• 使用更快的网络：CDN

让渲染更快

• CSS 放在 head，JS 放在 body 最下面
• 尽早开始执行 JS，用 DOMContentLoaded 触发
• 懒加载（图片懒加载，上划加载更多）
• 对 DOM 查询进行缓存
• 频繁 DOM 操作，合并到一起插入 DOM 结构
• 节流 throttle 防抖 debounce

缓存

• 静态资源加 hash 后缀，根据文件内容计算 hash。
• 文件内容不变，则 hash 不变，则 url 不变。
• url 和文件不变，则会自动触发 http 缓存机制，返回 304

SSR

• 服务器端渲染：将网页和数据一起加载，一起渲染
• 非 SSR（前后端分离）：先加载网页，再加载数据，再渲染数据
• 早先的 JSP ASP PHP，现在的 vue、React SSR

懒加载

<img id="img1" src="preview.png" data-realsrc="abc.png" />
<script>
  // 当图片需要展示的时候，将 data-reslsrc 中存储的真正的图片地址进行加载。
  const img1 = docunment.getElementById('img1')
  img1.src = img1.getAttribute('data-reslsrc')
</script>

缓存 DOM 查询

// 不缓存 DOM 查询结果

for (let i = 0; i < document.getElementsByTagName('p').length; i ++) {
  // 每次循环，都会计算 length，频繁进行 DOM 查询
}

// 缓存 DOM 查询结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for (let i = 0; i < length; i ++) {
  // 缓存 length，只进行一次 DOM 查询
}

多个 DOM 操作一起插入到 DOM 结构

// 循环查询
const list = document.getElementById('list')

for (let i = 0; i< 10; i++) {
  const li = document.createElement('li')
  li.innerHTML = `List item ${i}`
  list.appendChild(li)
}

// 一次查询
// 创建一个文档片段，此时还没有插入到 DOM 中，存在于内存中
const frag = document.createDocumentFragment()

// 执行插入
for(let x = 0; x < 10; x++) {
  const li = document.createElement('li')
  li.innerHTML = `List item ${x}`
  frag.appendChild(li)
}
// 都完成之后，再插入到 DOM 树中
list.appendChild(frag)

尽早开始 JS 执行

window.addEventListener('load', function() {
  // 页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function () {
  // DOM 渲染完即可执行，此时图片、视频还可能没有加载完
})

阅读量：

评 论：