前端开发视角：网页性能的极致优化

提升网页性能的方式有很多，把很多方法做到位就能大大的提升网页访问速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

那么对于网页性能的提升，作为开发者的我们能做哪些事情呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

备注：以下是博主的一些实践和想法 主要针对于http1.1协议文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

在说性能优化方法之前我们来思考下哪些问题会带来性能方面的瓶颈？

用户的每次请求都是一次完整的http请求过程，我们可以大致想到以下几个问题会导致网页访问变慢文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

1、同时访问的用户太多，同时访问的用户越多页面加载就越慢，因为每台服务器的宽带，读取文件的速度，处理计算的速度是固定的，同时访问的请求越多就一定会带来一些性能上的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

2、网页返回的内容越大，网页就越慢，这是一定的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

3、http请求时body的内容越大，网页也就越慢，这同上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

4、网页依赖的文件越多，也就意味着更多的http请求，加载时间也会带来一定的影响文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

5、用户的网络越慢，网页加载时间就一定越慢，因为传输的内容大小是固定的，网络越慢每次返回的资源大小也更少文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

6、服务器网络宽带越小，响应的时间也一定越慢文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

7、服务器内存，硬盘，cup越小或性能越差也会响应时间越长文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

8 、....文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

对于网页的性能优化可分为三个部分：

1、针对于前端代码层面的性能优化
2、针对于浏览器和http方面的性能优化
3、针对于web服务器和后端的性能优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

一：前端代码层面的优化

比较大提升性能的几个点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

1、网页资源或图片使用cdn加速和压缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

2、css放头部js放底部，js可以根据情况加上async或defer文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

3、图片做懒加载文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

4、做首屏渲染，首屏以下代码做异步加载文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

5、做按需加载，在资源需要时再加载（比如路由资源，弹出层等）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

6、做骨架屏渲染，提升界面体验效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

7、某些资源或数据使用浏览器缓存，sessionStorage和localStorage,或者浏览器数据库文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

8、使用Service Worker缓存任何可控的资源，甚至可以做离线应用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

代码层面的优化：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

1、压缩js,jss,img等资源文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

2、CSS Sprite技术等文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

3、尽量减少html,css层级深度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

4、api资源请求尽量使用异步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

6、合并css,js,图片文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

7、减少http请求，css嵌入网页，小图片使用base64文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

8、抽离公共代码，减少资源体积文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

9、代码层面的优化有很多，不一一列举，只要做到极致，一定会有效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

10、......文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

二：浏览器和http方面的优化

1、针对于资源（css,js,img）尽量做强缓存，web服务器设置Cache-Control的max-age，设置合适的值(值越大缓存时间越长)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

2、针对于有可能会变的资源可以使用协商缓存，设置ETag或Last-Modified，也可以两者同时设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

服务器会优先验证ETag的值，因为Last-Modified的值只精确到了秒级，并没有精确到毫秒级别，并不能100%的保证两次资源是否一致，而ETag不会有此问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

3、合并资源，减少http请求数量，在http1.1中，只能同时处理一定量的http请求，请求过多的资源会先处于等待状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

4、使用浏览器的缓存功能，例如sesson和local,有些资源和数据第二次以后可以完全不必要去后端获取文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

5、使用新的api，Service Worker开辟新的线程去做耗时的工作或之后需要的资源。甚至可以做离线应用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

三：web服务器和后端的优化

web服务器和后端是前端开发者们基本接触不到的点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

1、对于html,css,js等资源我们可以开启资源压缩，常用的为gzip，开启gzip会对服务器cpu有一定的消耗，对于流量不大的网站没什么影响文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

2、对于常规的网站我们可以开启Connection: keep-alive，这样http通道就会高效的被利用，请求也会加快文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

3、对于高并发的网站尽量不要设置Connection参数(即keepalive_timeout的值)，或者值设置的越短越好，服务器处理请求的数量是一定的，如果每次请求占用通道的时间越长，同时处理的请求就会越少。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

4、搭建自己的cdn服务器，让资源返回速度更快文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

5、最大化的利用服务器性能：开启多线程，设置最大并发链接数、最大链接数、最大文件访问数、tcp等待状态等文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

还可以从提升硬件方面考虑性能问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

1、提升服务器性能，根据项目情况选择相应服务器，计算密集，I/O密集 ，进程密集等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

2、提升网络带宽，增加内存、硬盘、cpu等文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

3、对于高访问量的资源或者api做负载均衡配置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

4、拆分服务器，例如后台服务器，资源文件服务器，数据库服务器，nginx入口服务器等，特定的资源去特定的服务器获取文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

5、对于高并发的网站需要做集群处理，后台服务器集群，数据库集群，redis集群等文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

6、使用redis缓存数据资源，redis相对于关系数据库能很大的提升获取资源速度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

针对于后端代码的优化就交给后端人员。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html

如果能做到以上60%以上的点，你的网站性能一定会有大幅度的提升。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10120.html