前端性能优化的方法总结

本文同步：个人博客

性能优化的原则

• 多实用内存，缓存或其他方法
• 减少cpu计算量，减少网络加载耗时

适用于所有编程的性能优化-空间换时间

性能优化的方向

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

让加载更快

• 减少代码的体积：压缩代码。
• 减少访问次数：合并代码（图片也可以合并），SSR服务器端渲染（将页面已经在服务器渲染好了，不用下载某些静态网络），缓存
• 使用更快的网络

让渲染更快

• css放在head，js放在body下面
• 尽早开始执行js，用DOMContentLoaded触发
• 懒加载（图片懒加载）
• 对DOM查询进行缓存
• 频换DOM操作，合并到一起插入DOM结构
• 防抖和节流（让渲染更加流畅）

性能优化的常见应用

合并代码

缓存

对缓存的理解：静态资源加hash后缀，根据文件内容计算hash，如果文件内容不变，那么hash不变，则url不变，url和文件不变，则会自动触发http缓存机制，返回转态码304
只要触发缓存后，大部分的文件都不用下载了，所以访问速度是飞快的

CDN和SSR

CDN：专门做静态文件的服务网站

SSR：将网页和数据一起加载，一起渲染。非SSR：先加载网页在渲染数据
ssr其实本质上就是一种前后端不分离的方式的渲染，和以前的jsp差不多

懒加载

图片的懒加载：不希望还没呈现到屏幕的图片都一下加载完，只希望被看到的地方的图片加载，如下：我们可以先设置一个图片体积非常小的预览图片preview.png，把真正的图片地址放到自定义属性data-realsrc中，这是设置判断语句，当用户滑到这里时，才进行赋值而加载

缓存DOM

缓存DOM查询：意思就是将耗时非常长的DOM查询值尽量保存起来

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

尽早执行js

用DOMContentLoaded触发