开发说做了性能优化，到底做了啥？

我们在谈及一个 页面性能如何时，说的是页面的加载速度快不快，页面交互是否顺畅不卡顿。

当你在浏览器输入一个URL并回车时，页面加载的全过程是这样的：

1、URL解析-把URL解析出对应的域名

2、DNS解析-把域名解析成IP地址

3、HTTP连接-浏览器发起http请求，和服务器建立连接通信

4、服务器处理请求-服务端返回数据

5、浏览器接受响应-浏览器根据http返回状态码，作出相应动作

6、浏览器渲染页面-根据规则解析html,css,js并渲染绘制页面

以上的1～5点都是网络请求和处理的过程，第6点是浏览器渲染页面的过程。

所以开发做前端web性能优化时，会从网络层面和渲染层面优化。

下面讲解下前端常用的性能优化手段～

目录

1. 页面渲染优化

2. 按需加载文件

3. 预加载文件

4. 图片懒加载
   

5. 利用缓存

6. 减少并发的http请求数量

7. 防抖节流

8. 同步改异步

9. 优化算法

   页面渲染优化

当页面所请求html,css,js等静态文件加载回来后，浏览器会按照以下几个步骤渲染UI页面：

1、解析html

2、解析样式

3、执行javascript

4、布局页面

5、绘制页面

通过优化html结构、减少页面dom元素的操作、减少页面的重新绘制都能优化页面性能，使得页面交互顺畅不卡顿。

按需加载文件

当我们访问一个页面地址时，浏览器会按照代码所需的文件，请求文件并下载在计算机中，只有页面所需的静态文件比如css、js 正常加载回来时，页面才能正常渲染，否则可能会出现白屏，影响用户体验。

减小文件体积、减少请求文件（只在该页面需要时才加载相应文件），都能减小请求网络返回时间。

预加载文件

预加载文件指的是提前加载下一个功能使用到的文件。
举个例子：比如我们以前经常玩的QQ农场，因为QQ农场有大量的图片，如果在进入QQ空间后，在网络空闲时，“偷偷”把QQ农场需要的部分图片下载缓存下来，如果后面用户进入QQ农场时，由于很多图片已经加载好，页面整体的加载速度会提高很多。但是这种策略的缺点是，可能用户后面也不玩这个功能，导致“盗走”了用户部分流量。

图片懒加载

图片懒加载也叫图片延迟加载。通常用于图片比较多，并且页面高度有好几屏的网页。当页面首次加载时，只显示可视区域的图片（只请求可视区域的图片），当用户滚动页面，下一屏的图片即将进入可视区域时，才加载这部分图片。这么做可减少并发加载图片的个数，提升整个页面的加载速度。

利用缓存

缓存分很多种，有客户端缓存和服务端缓存，客户端缓存主要包括http缓存和h5离线缓存；服务端缓存主要包括redis缓存和CDN缓存。下面讲下常用的http缓存和CDN缓存带来的加载速度优化。

开启http缓存策略，浏览器就会缓存加载过的文件，当网站再次请求相同文件名的文件时，就会优先从浏览器缓存中获取，而不是重新发起向服务端获取，提高了文件加载速度。

使用cdn来存放html、css、js、图片等前端静态资源，也是一种缓存优化方式。

cdn是一个为了使用户就近获取内容，提高资源访问速度的一种内容分发网络，主要由内容分发技术和内容缓存设备组成。

举个例子：假设你的目标用户是国际用户，cdn缓存设备分别在亚洲、欧洲、美洲、澳洲、非洲各有一台，如果你是一个美国用户，当前端请求静态资源时，就会被分配到最近的美洲cdn缓存设备获取资源。

减少并发的http请求数量

由于同时同个域名下的并发http请求数量有限，如果超过一定的数量，剩下的请求会排队等待上一个请求完成后释放出网络链路（tcp连接），才继续完成请求。如果能减少请求并发数，就能提升整个网页的加载速度。

一般开发会通过合并多张小icon为一张雪碧图、按需动态请求接口数据、合并接口等方式去优化。

防抖节流

将几次频繁操作合并为一次操作进行，叫做防抖。
举个例子：一个搜索输入框，当输入一个字符时就会自动触发内容更改事件，然后向后端发起查询请求。但是一般搜索一个内容，要输入n个字符用户才想要开始搜索，我们应该在手指停止输入后的一段时间后才发起查询（一般是100ms），这样不仅能减少请求次数，节约流量，还能防止下拉框的抖动。

比如搜索“呼和浩特”，用户其实是希望输入到最后一个字符“特”字时，才发起搜索。

同步改异步

举个例子：批量导入excel数据到数据库，如果数据量较大，合法性查库校验较多，都会导致处理文件数据缓慢，可通过同步改成异步处理的形式，当程序处理完所有数据后，再以站内信的形式通知用户已处理完毕。

优化算法

举个例子：当一个页面功能的操作步骤较多时，可以把核心功能拆解出来，次要功能降级为异步处理。举个例子：2015年春晚的摇一摇红包。我们来看下摇一摇红包里面有几个功能：

摇红包->拆红包->红包实时入账

这个功能一开始时，逻辑是这样的：用户摇一摇，拆完红包后，红包是实时入账的。但是由于参与人数较多，很可能会造成网络拥塞，许多用户可能连摇一摇红包界面都进不去，为了减少请求次数，缓解服务器压力，后来采取了优雅降级的方案，把红包实时入账功能改成异步的形式，红包金额在7天之内入账，这样金额就可以分批入账了。

巧妙地拆解步骤，留下核心功能，降级次要功能，是优化算法的一种有效方式。

精彩回顾：

万字长文聊聊产品经理跳槽面试大揭秘（下）

面试题：作为产品经理你是如何应对需求变更的？

2020，那些惊艳我的产品迭代