web页面性能优化 （vue项目和 jq项目）

项目分析web

web端 主要用的框架现阶段是区分于微信 pad端的，主要用了vue + element的基础框架，微信端，pad端用了jq+mui的基础框架，基于两个不同类型的项目，前端页面性能优化总结了几个方面：

1.webpack打包优化（vue）。
2.组件细化，动态加载（vue）。
3.无阻塞：css文件在头部引入，js在也页面尾部，防止页面阻塞（jq）
4.压缩HTML、CSS、JS(jq)。
5.减少http请求。
6.图片的优化。
7.优化代码的质量。
8.cdn引入。
9.利用浏览器的indexedDb缓存。
10.加入一些等待转圈的动画，优化用户的体验。

1.webpack打包优化（vue）。

1）路由懒加载。
2）css文件过大处理 ：build=>webpack.prod.conf.js=>allChunks: false,
3) css浏览器无映射 .map 打包去掉 config=>index.js=>build productionSourceMap:false
4) vue webpack 单页面 加载慢 gzip 访问（大大的提高了加载速度 ）
5) 插件的按需加载减少vonder.js的体积。
6) cdn 加载， 要做处理防止资源奔溃，在服务器上也放一个插件包
第一：cdn引入，script需要放在头部，不然会报错，注意顺序，每个script后跟着一个script防止cdn不稳定，引入自己服务器上得对应得插件。
第二：webpack.base.conf.js中配置以下信息，前面是插件名，后面是全局得使用名，然后直接使用即可，无需import

2组件细化，动态加载（vue）。

有点类似于路由懒加载。在一些页面用require代替import

3.无阻塞：css文件在头部引入，js在也页面尾部，防止页面阻塞（jq）

浏览器的渲染机制：
1）解析HTML，生成DOM树（DOM）
2）解析CSS，生成CSSOM树（CSSOM）
3）将DOM和CSSOM合并，生成渲染树（Render-Tree） Script标签的处理
4）计算渲染树的布局（Layout）
5）将布局渲染到屏幕上（Paint）

css阻塞：DOM树和CSSOM树是完全独立的。css放在底部，只能html加载完才能加载，渲染树是要等DOM树和CSSOM树加载完才能合成。这就是所谓的css阻塞，应放头部一起加载。

js阻塞：浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析（而CSS不会）

4.压缩HTML、CSS、JS(jq)。

vue端webpack自动打包压缩的。jq找一个代码打包工具打包下再上传

5.减少http请求。

其中大约80%的时间都耗在了http请求上，所以要想大幅度优化页面，必须从http请求上入手

1）减少请求，把一些公共的信息一次请求到位存放在浏览器缓存。
2）图片的请求下一页讲

6.图片的优化

图片的优化方案：
1）大型图片在保存不失真的情况下尽量压缩他的大小
2）小型图标尽量用字体代替（参考Iconfont-阿里巴巴矢量图标库） 或者是 SVG
3) 利用css sprites 雪碧图技术，减少http请求 （合成雪碧图，网上有挺多的工具的，问题：背景定位比较麻烦）
优点：减少加载网页图片时对服务器的请求次数；提高页面的加载速度
缺点：维护比较麻烦，当前项目图标比较少的时候没必要用（个人感觉适用于移动端 vue项目，雪碧 图从进入就加载，不刷新的情况下还是比较能提高速度的。不过相比较vue打包后小图片转base64展示，提高效果不大）
4）vue项目可以控制图片大小多少以内转base64
5)很多图片的时候可以实行图片懒加载（我们项目中暂时没那么多图片用不到）
6）图片合理加载，尽量一次加载一次大的图片
7)图片压缩https://compresspng.com/zh/

7.优化代码的质量

代码质量比较重要，后期也比较利于维护
1）多用es6的语言，精简代码。
2）多用一些js的原生方法，例如map(), filter()，forEach()等 尽量少用for循环。
3) 多封装一些复用的组件，代码，方法。
4）用mvc框架 区分视图层，控制层，数据层，复用接口。
5）多人开发时需要多交流沟通，分配工作，由一个人去写一些公共的样式，组件。

8.利用浏览器的indexedDb缓存

浏览器本地数据库。
将页面渲染的一些信息放在浏览器本地数据库中直接往里面取，提升页面的加载速度以及优化了用户体验。

9.加入一些等待转圈的动画，优化用户的体验。

考虑到一些页面的数据请求会比较慢，
1）后台简化逻辑，加快接口的请求速度。
2）优化用户体验，加一个等待框。