前端性能优化汇总

前端优化一直是前端开发人员要掌握的内容
目前汇总一下实践中优化的手段

目录结构

• 样式文件放在头部，js文件放在底部,
  因为页面解析是自上而下，js文件放在头部，会阻塞dom解析

JS/CSS方面

• 文件压缩
• 减少js对dom的直接操作
• dom 属性读写分离
• 使用事件委托机制
• 减少重排和重绘
• 不要一条条修改样式，通过class 类或者 classText 属性一次性修改
• 用 link 代替@impor
• 减少作用域链的查找 访问局部变量比访问全局变量快，嵌套越深，访问越慢

img 方面

• 使用雪碧图 或者svg 图标，减少http请求
• 多图片页面 可以使用懒加载或预加载

网站优化

• 减少http 请求数
• 静态资源合并和压缩
• 合理设置 缓存 （为文件头指定 expires或cache-control/Etag）
  expires是HTTP1.0中设置过期时间
  Etag（实体标签）是HTTP1.1中引入，Etag是唯一标识了一个组件的一个特定版本的字符串
  cache-control是HTTP1.1引入来代替Expires，使用max-age指令来指定副本被缓存了多久
• 使用 CDN静态资源(内容分发网络)
• 缓存DNS查找，减少DNS查找次数
• 避免重定向和减少不必要的http跳转
• Gzip 压缩
  请求头中设置Accept-Encoding文件头的压缩格式，可以压缩响应内容
• 配置 Etag（实体标签）
  用来判断浏览器缓存中的内容和服务器中的内容是否匹配的一种机制
  比使用last-modified date 更加灵活

其他补充

• SSR服务端渲染
• import方法动态导入，实现按需加载