首页 » 文章 » 文档 » 开发运行环境 » 前端性能优化有哪些方式

前端性能优化有哪些方式

性能优化原则

  • 多实用内存,缓存或其他方法
  • 减少 CPU 计算量,减少网络加载耗时
  • (适用于所有编程的性能优化 —— 空间换时间)

从何下手:让加载更快,让渲染更快

让加载更快

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

让渲染更快

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

各种缓存详解

资源合并

比如:a.js,b.js,c.js 合并为 abc.js

缓存,加 hash

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

SSR

  • 服务器端渲染,将网页和数据一起加载,一起渲染
  • 非 SSR(前后端分离):先加载网页,再加载数据,再渲染数据
  • 比如现在的 vue SSR

CDN

比如:https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/1.4.0/css/bootstrap.css

懒加载

<img id="img" data-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<script>
var img = document.getElementById('img')
img.src = img.getAttribute('data-sr')
</script>

缓存 DOM 查询

// 不缓存 DOM 查询结果
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {}

// 缓存 DOM 查询结果
const length = document.getElementsByTagName('p').length
for (let i = 0; i < length; i++) {}

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

const list = document.getElementById('list')

// 创建一个文档片段,此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()

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

// 先插入到文档片段中
frag.appendChild(li)
}
// 都完成后,再统一插入到 DOM 结构中
list.appendChild(frag)

尽早开始执行 JS

window.addEventListener('load',function(){
// 页面的全部资源加载完成才会执行,包括图片,视频等
})

window.addEventListener('DOMContentLoaded',function(){
// DOM 渲染完后即可执行,此时图片,视频可能还没加载完
})

»开发运行环境

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top