主要内容如下
- 代码层面的优化
- 缓存
- 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打包成图片，用画布加载，野路子。。
