性能优化是一个庞大而相对复杂的知识，如今互联网发展迅速，市场竞争激烈，在这样的环境下一个网站的性能决定着一个项目的好与坏。为了降低软件项目的跳出率、提高访问速度、减少加载时间、带给用户流畅的终端体验，好的优化是必不可少的。
如何判断页面的载入时间是合适的，通常会将浏览器缓存清空并重新加载页面，打开控制台查看页面加载时间，时间的长短做为判断的依据，主要判断标准如下：
| 时间范围（s） | 接受程度 |
| T < 2 | 优 |
| 2 ≤ T ≤ 4 | 良 |
| T > 5 | 差 |
优化法则万变不离其宗，就是“越少越快、越简单越快”，用最少的资源完成相同的工作。以下是从某些方面进行阐述，如何快速提升并优化网页性能。
一、图片优化
网页加载图片是最正常不过的一件事情，图片的视觉冲击能够给用户带来更好的体感，但是图片的加载会占据大部分的网络资源，这也是导致页面加载缓慢的主要原因之一，主要从以下几个方面来进行图片优化：
1、替换原则
不使用图片毋庸置疑是最好的解决方法，但会影响页面视觉感，为此可通过CSS效果（渐变，阴影，圆角等）来替换部分可构造图片，减少资源字节数，这样也会加快渲染时间；
2、CSS Sprites
CSS Sprites其实就是将一些零碎的图片整合到一张图片中，再利用“background”进行背景图片的精确定位。其优点就是能够很好的减少网页的HTTP请求，降低整体图片的大小，从而提高页面的性能。因为浏览器同一时间能够加载的资源数是一定的，一般规定IE 8是6个，Chrome是6个，Firefox是8个，尽量避免同页面不加载无用的图标。相对的也存在些许缺点：做图时间长；维护麻烦；高清失真，为了适应不同的分辨率，可能要准备多个规格的图片。
3、Icon Font
开源的字体库很多，现如今最常用的就是阿里巴巴图标库，阿里库可以新建项目并添加相关成员共同维护同一项目的字体图标，可以解决图片重复载入问题：
(1)、基础图标字体
优点：矢量图标（可修改颜色、大小）、体积小（可能几百个图标才几十KB）、灵活性好、兼容性好（支持IE6）、减少HTTP请求
缺点：渲染颜色单一
(2)、symbol引用(多色图标)
优点：支持多色图标
缺点：兼容性交差（支持IE9+）
4、图片格式
图片存在很多格式，最常见的图像格式是GIF、JPEG、PNG等，每种格式都有其长处和局限性，建议使用JPEG格式，而不是GIF和PNG图像，除非图像包含Alpha因子或者是透明的。
5、矢量图和栅格图
( 1)、矢量图优化
SVG是一种可缩放矢量图形，可以通过HTML绘制，通常会使用一些工具进行文件压缩，编辑器元数据、注释、隐藏元素、默认值或非最佳值以及其他可以安全地删除或转换而不会影响SVG呈现结果的内容。我们可以通过svgo将SVG压缩，可以对比一下压缩前后文件大小缩减了36.7%。
( 2)、优化栅格图
栅格化图是由数1×1像素小方块构成。可以根据当前所需图片最大像素来调整图片大小，避免多余的资源浪费，通常通过有损压缩和无损压缩来处理图片。根据图片的大小就可以判断图片的大小：
| 尺寸 | 像素 | 文件大小 | 尺寸 | 像素 | 文件大小 |
| 100 * 100 | 10,000 | 39 KB | 300 * 300 | 90,000 | 351 KB |
| 200 * 200 | 40,000 | 156 KB | 500 * 500 | 250,000 | 977 KB |
二、CSS优化
在项目中经常遇到的CSS重复样式过多、命名不合理、没有复用、过度嵌套等问题，伴随着项目页面越来越多,重复样式也逐渐堆积重复调用。因此，为了提高页面选渲染速率、加快页面加载速度、提高复用率、快捷维护，优化CSS代码尤其的重要:
1、渲染样式
(1)、所有样式属性值为0时，不加单位（最好的方法就是看看Pycharm右侧是否有黄条，有旧代表CSS样式不规范）；
(2)、删除多余空样式{}
(3)、属性值为浮动小数0.**，可以省略小数点之前的0；
(4)、属性值使用缩写；
(5)、当需要单一样式时，采用单一属性；
(6)、避免层级过深的选择器嵌套
(7)、充分利用CSS继承属性，减少代码量
(8)、抽离提取公共样式，方便集体操作；减少代码量，删除无关多余样式；
(9)、属性存在浏览器前缀都要写上；
(10)、尽量避免使用position、float、transform、动画、过度效果等；
(11)、尽量避免样式行内样式和内部样式
2、选择器性能
(1)、选择器有一个固定的排序，也对应着效率的高低，对于编写高效率的CSS选择器可以参考网上列举的注意事项，这里不做列举：
参考示例：p #mydom和#mydom p虽然权重值一样，但前者效率高于后者;
(2)、避免全局使用通配符选择器；
(3)、降低选择器的权重值；
(4)、尽量使用继承样式；
(5)、尽量少的使用后代选择器；
3、加载性能
(1)、CSS压缩：通过压缩工具将CSS压缩打包，减小加载体积；
(2)、普通页面加载CSS样式，要使用连接式语法link，该操作会在页面加载时一块渲染，导入式@import则是在页面加载完成之后渲染，从而延长了部分时间；
(3)、资源提示（Resource Hints）：定义HTML中Link中的rel值（dns-prefetch、preconnect、prefetch、prerender），可以帮助浏览器指定源和预处理资源来提升页面性能；
(4)、Preload：提供了预获取资源的能力，可以将获取资源的行为从资源执行中分离出来，构建自定义的资源加载与执行。
三、JS优化
1、加载资源
(1)、合并文件（GZIP压缩资源），引用文件放在也页面尾部（减少页面CSS，HTML阻塞，从而减少界面空白时间（避免浏览器解析script标签之前，不会继续渲染页面）；
(2)、推迟不必要的JS加载；
(3)、去除不必要的插件引用；
2、代码编写
(1)、代码精简的时候会移除不必要的空白字符（空格，换行、制表符），这样整个文件的大小就变小了。
(2)、减少作用域链上的时间，作用域中的数量越多加载时间越长，所以要避免全局查找，减少全局变量，也要尽量避免with语句。
(3)、避免使用定时器，即使避免不了也要及时做清除操作；
(4)、在一个没有变量声明的局部变量中定义函数作用域时，在每个变量之前加let或const，以便定义当前作用域，防止查找并加速代码执行；
(5)、减少DOM操作：DOM操作应该是最耗能的一种操作；
(6)、避免使用迭代器；
(7)、多变量声明，使用一个var定义；
(8)、避免对象嵌套过深、避免在原型链中位置过深；
(9)、语法替换：例如同Map替换大量的if-else和switch会提升性能；
3、网络请求
(1) 、减少HTTP请求：过多的HTTP请求会增加CPU使用率，同时页面响应时间延长。
(2) 、减少默认请求：不需要默认加载HTTP请求改为点击操作后执行，可以默认固定的数据，不必请求后台数据；
(3) 、减少重定向和跨域请求；
4、快速响应
JS是单线程语言，浏览器值分配一个主线程来执行一个任务其他任务则需要排队等待，并且在运行脚本期间，浏览器渲染线程都是处于挂起状态。那么web worker就诞生了，web worker是运行在UI线程外执行的JS，独立于其他脚本，不会阻塞UI线程，从而不会影响页面的性能。
5、本地缓存
(1) 、临时缓存（sessionStorage）：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据；一般用于固定不变的数据存储；
(2) 、长期缓存（localStorage）：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除；一般用于长期稳定的数据；
(3) 、Cookie缓存：是浏览器提供的一种技术，通过服务器将一些数据保存在客户端，不需要通过网络传输，因而提高网页处理的效率，并且能够减少服务器的负载，但安全性差；
6、请求缓存
（1）、Ajax请求使用缓存：
POST请求：不能在客户端缓存，每次请求都需发送给服务器进行处理，并且都会返回状态码200。（可以在服务器端对数据进行缓存，以便提高处理速度）
GET请求：可以（默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。
（2） 、非HTTP协议定义的缓存机制：在HTML页面的<head>节点中加入<meta>标签；
（3）、添加Expires头
初次访问页面会加载所有所需HTTP请求，但是通过使用Expires可以使其被缓存，再次访问便可以减少不必要的HTPP请求，从而提高加载速度。Web服务器通过Expires头设置客户端在指定时间内可以使用一个组件的当前副本。引入Cache-Control：max-age来指定组件被缓存时长，若同时制定Cache-Control和Expires，则max-age将覆盖Expires头。
浏览器缓存的过程:
四、VUE优化
1、vue-router
- 、懒加载，异步路由；
- 、keep-alive，用来缓存组件,避免多次加载相应的组件,减少性能消耗；
2、页面优化
- 、对页面vuex进行优化，减少大量重复代码重复请求；
- 、第三方框架按需引入；
- 、减少等待通过XHR获取数据的时间：在redis中添加缓存；提前发起XHR请求；
- 、合理使用属性v-if/v-show、循环时添加key、遵循编码规范、合理使用生命周期等；
- 、公用部分改为模块调用，减少代码量；
- 、打包优化：工程文件打包的时候不生成.map文件
- 、释放资源：手动将iframe的内存释放、定时器销毁等
五、DNS优化
减少DNS查询，首先要了解访问路由到页面加载这个过程中间的流程，当用户在浏览器回车瞬间浏览器会解析域名向服务器发起TCP的3次握手，建立连接后发起HTTP请求，服务器响应请求返回HTML，浏览器解析并加载HTML资源后进行页面渲染。那么在查询过程中减少不同域名的数量将减少并行下载的数量，加快网站访问速度。
六、使用CDN
如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。
CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。
CDN的缺点：
1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。
2、如果CDN服务质量下降了，那么你的工作质量也将下降
3、无法直接控制组件服务器；
七、总结
总之优化是一个循序渐进的过程，不是一蹴而就的，只有通过多方面的同步优化，才能更好的提升页面加载速度，带给用户更好的体验，希望今后在优化方面做的更好！
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
