前端优化（css,js,网络）

css

• CSS优化、提高性能的方法有哪些

• 多个css合并，尽量减少HTTP请求

• 将css文件放在页面最上面

• 移除空的css规则

• 避免使用CSS表达式

• 选择器优化嵌套，尽量避免层级过深

• 充分利用css继承属性，减少代码量

• 抽象提取公共样式，减少代码量

• 属性值为0时，不加单位

• 属性值为小于1的小数时，省略小数点前面的0

• 使用CSS Sprites将多张图片拼接成一张图片，通过CSS background 属性来访问图片内容

js

• 节流、防抖

• 长列表滚动到可视区域动态加载（大数据渲染）

• 图片懒加载（src）

• 使用闭包时，在函数结尾手动删除不需要的局部变量，尤其在缓存dom节点的情况下

• DOM 操作优化

  • 批量添加dom可先createElement创建并添加节点，最后一次性加入dom

  • 批量绑定事件，使用事件委托绑定父节点实现，利用了事件冒泡的特性

  • 如果可以使用innerHTML代替appendChild

  • 在 DOM 操作时添加样式时尽量增加 class 属性，而不是通过 style 操作样式，以减少重排（Reflow）

网络

• 减少 HTTP 请求数量

• 利用浏览器缓存，公用依赖包（如vue、Jquery、ui组件等）单独打包/单文件在一起，避免重复请求

• 减小cookie大小，尽量用localStorage代替

• CDN托管静态文件

• 开启 Gzip 压缩