主要内容如下

• 代码层面的优化
• 缓存
• http
• 减小打包体积

代码层面的优化

• css
  • will-change
  • 告诉浏览器那些样式改变，渲染加速
• html优化
  • dom结构的精简
  • 避免空的src和href。
    • 当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。
  • 为文件头指定Expires，manifest。
• js性能优化

  • 减少全局方法

  • 字符串操作

  • 使用innerHTML会比dom操作的方法要快

    • 当使用innerHTML设置为某个值时，后台会创建一个HTML解释器，然后使用内部的DOM调用来创建DOM结构，而非基于JAVASCRIPT的DOM调用。由于内部方法是编译好的而非解释执行，故执行的更快。

  • clone比createElement快

  • 提高首屏渲染速度，加载需要的，非展示部分异步加载

  • ===和!==比==少类型转换

  • v-dom 减少dom操作

  • 多次css操作改成一次，从而减少css reflow的触发

  • switch 代替if else

  • 设置cookie的域和过期时间

  • 利用LocalStorage合理缓存资源。

  • ....

• 图片懒加载，没有用到的页面display none 或者 直接清除(react的做法)
• 正常页面是先加载js再加载css，设置异步加载使得可以同时加载

缓存

• 客户端缓存 Last-Modified 与If-Modified-Since /Expires 来判断是否使用缓存，不过还是要向服务器发送请求。
• 服务器缓存 manifest 让服务器知道那些文件缓存那些不缓存，同时html加上manifest标签。服务器缓存是已url为标识。
• 静态资源使用cdn服务器

http

• 0.x版本 单个请求无并发
• 1.x版本支持并发但有限制
• 2支持并发无限制，同时优化性能，报头压缩，传输改为二进制
• 雪碧图，图片打包base64从而减少请求
• 使用http2 提升性能
• http1.x分域名 提高并发数
• cookie会带到http请求中，注意控制Cookie大小和污染,Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。
• ajax，get比post更快，get发一个tcp包，post先发头再发数据包。

减小打包体积

• 使用打包工具压缩代码
• 提高js css的重用率
• gzip
• 将css，js打包成图片，用画布加载，野路子。。