前端性能优化

前言：浅谈前端性能优化方案，后续继续完善与补充

• 从开发流程

开发流程	优化途径
网页开发时	减少http请求：CSS Sprites CSS放在顶部：加载完成后同步渲染页面 JavaScript脚本在底部引入 使用浏览器缓存：cookie，session Storage等 异步加载：Ajax.Axios.Fetch等
vue开发时	组件化管理 v-for与v-if不同时使用：（原因）v-for优先级更高，v-if会每次重复运行，影响性能和效率；（解决）：使用computed计算属性，或先v-if判断再使用v-for 路由懒加载 图片懒加载：Lazy-load插件
webpack打包时	JS、CSS代码压缩 多线程打包 source-map优化 tree-shaking去除无用代码等 其他详见webpack配置和优化
服务器端优化	SSR服务器渲染：即在服务器完成HTML标签的渲染，统一直接返回给客户端

• 从优化角度

优化角度	优化途径
降低请求量	合并资源，减少HTTP请求数，minify/gzip压缩，webP，lazyLoad
加快请求速度	预解析DNS，减少域名数，并行加载，CDN分发
缓存	HTTP协议缓存请求，离线缓存manifest，离线数据缓存localStorage
渲染	JS/CSS优化，加载顺序，服务器渲染