关于前端优化

身为强迫症,要对自己写的代码负责,所以了解一下前端优化是有必要的

1. 文件压缩与合并
   html css js 压缩 文件合并 gzip压缩(webpack构建工具了解一下)
   主要减少http请求数,文件大小的方式优化

2. 图片压缩
   一种是雪碧图,核心也是减少http请求数
   一种就是压缩图片大小,这里推荐一个压缩工具图片压缩

3. 文件加载和懒加载和预加载
   (注意:同一个cdn最大请求数有限制,所以有些情况会同时存在几个cdn用来分发资源文件)
   css阻塞页面渲染,所以放在head里面
   如果js操作dom,需要放在</body>前面,方面dom操作
   图片等资源如果数量巨大(常见电商网站),图片在进入可视区域以后再开始加载即懒加载
   一些页面为了保证流畅度(比如用了大量图片的h5活动页),需要等资源全部加载结束后再开始渲染,即预加载

4. 重绘与回流
   回流: 触发页面重布局(消耗很大)
   重绘: 不改变布局,只改变样式,比如颜色(消耗小)
   优化点:

• 尽量减少会引起回流的操作,限制回流在一个图层中
• 使用translate替代top操作
• 使用opacity替代visibility
• 不要一条条改变css,而是封装成className整体替换
• 复杂的操作先将dom结构display:none 然后操作后显示

5. 游览器储存
   cookie cdn的域名和主站的域名要分开,避免请求cdn携带cookie的流量损耗
   Worker 可以把非常耗费性能的操作放在worker里运行,防止js堵塞

6. 游览器缓存(主要是通过服务端设置)
   cache-control

   • max-age 服务端设置最大有效时间(直接游览器缓存拿)
   • s-maxage 最大有效时间(public private 公共还是私有 no-cache不缓存no-store)
   • expores 等同于max-age,权重低于它
     缓存验证
   • last-modified与if-midified-since与服务端协商的一个过期时间(需要请求服务端确认是缓存还是新文件304缓存200新文件)
   • eTag 文件hash值 等同于last-modified 更准确的缓存策略

7. 服务端优化
   首屏加载问题通过服务端渲染ssr解决(要考量平衡服务端与客户端的计算能力)