性能优化相关

• 请求过程（减少http请求、减小单次请求数据大小、加快请求速度）
  • 针对TCP三次握手时间，使用长连接；浏览器一个域名维护6个长连接可以使资源对应多个域名并行加载；
  • 利用浏览器缓存
    • 强缓存
    • 协商缓存
  • 利用本地缓存
    • local、session
    • cookie优化
      • 尽量减少cookie缓存，除去必要的状态维护尽量使用local和session
      • 避免不需要状态的请求也携带cookie，比如CDN服务器，使其和需要状态的服务不使用同一个域名；通过domain和path属性限制
      • 设置合理的过期时间
  • 借助CDN
    • 静态资源保存在CDN服务器
  • 图片优化
    • 根据不同场景使用最合适的图片类型
      • jpg的特点是有损压缩，压缩到50%以下还能保持60%的清晰度，体积小；但是处理色彩对比强烈和线条感强的图片会有比较明显的模糊感，不支持透明；适用于轮播图，比如京东和淘宝
      • png是无损压缩的高保真图片类型，会比jpg有更好的色彩表现力，而且支持透明，但是体积太大，一般用于LOGO这种精细的图片
      • SVG文件体积更小，压缩性更强，但是渲染成本比较高
      • base64，是一种编码方式，不需要你发送http请求，但是它会膨胀体积，会使html或者css文件增大体积，一般用于小图标
      • webP，无损压缩下比png要小，有损压缩比jpg要小，都支持透明；缺点浏览器支持不完全；可让服务端根据http请求头里accept字段里是否包含webP判断返回webP还是其他格式图片
    • 使用雪碧图
  • 减少代码包体积
    • gzip压缩，只对文件比较有效，原理是将文件中相同的字段替换，可以显著减少文件体积；对图片效果一般
    • 打包过程使用插件去除冗余代码（如console和引入了但是没有用到的模块）
• 渲染过程
  • css
    • 样式表放在标签中能使页面逐渐渲染，因为布局树会等待cssom的生成，在head标签中提早加载css可以避免dom树生成后等待加载css的空白时期
    • 使用 link 引入，link一边解析html一边加载，@import 是同步操作会等待html解析完成才去加载
    • CSS选择符，从右到左匹配元素
      • 避免使用通配符
      • 利用继承，减少重复css
      • 少用标签选择器，尽量用类名代替
      • 减少嵌套
  • js
    • JS执行会阻止dom渲染，合理根据场景使用async和defer达到异步加载 延迟执行的效果
    • 减少绑定数据监听事件，可以使用事件委托通过事件冒泡机制获取触发的子节点事件
    • 减少 dom 操作（减少重绘回流）
      • 减少 dom 元素的动态增加和删除
      • 避免修改 dom 元素 css 影响布局属性比如 height、width、positon、margin 等
      • 避免获取 computedStyle
      • 避免对 scroll 属性的获取
    • 避免递归死循环爆栈
    • 减少闭包引发的内存泄漏
    • 异步更新，vue
    • 懒加载优化首屏渲染
    • 防抖和节流