前端有哪些性能优化

性能优化原则
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