前端有哪些性能优化

性能优化原则
1、多实用内存、缓存或其他方法
2、减少CPU计算量,减少网络加载耗时
适用于所有编程的性能优化--空间换时间

性能优化从何入手
1、让加载更快
    --减少资源体积:压缩代码 图片
    --减少访问次数:合并代码(js合并,css合并,图片合拼雪碧图 (sprite)),SSR服务器端渲染,缓存
    --使用更快的网络:CDN
2、让渲染更快
    --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

示例:

前端有哪些性能优化

前端有哪些性能优化

前端有哪些性能优化

前端有哪些性能优化

前端有哪些性能优化

尽早执行js

前端有哪些性能优化