如何进行网站性能优化

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

网站的访问量及用户的持久性其实在一定程度上取决于其性能，如果一个网站响应耗时久，动画卡顿，占用大量的cpu等，往往就会导致用户流失。尤其是app及微信端应用，可以这么说，如果页面打开都要超过4秒，这体验绝对差。作为一个开发者，是不允许出现这种情况的，那么该如何提高页面的性能呢？

2.知识剖析

一个网站生成的过程？

DNS解析

什么是DNS解析？当用户输入一个网址并按下回车键的时候，浏览器得到了一个域名。而在实际通信过程中，我们需要的是一个IP地址。因此我们需要先把域名转换成相应的IP地址，这个过程称作DNS解析。

发起tcp请求

发起HTTP请求

负载均衡

当一台服务器无法支持大量的用户访问时，将用户分摊到两个或多个服务器上的方法叫负载均衡。

浏览器渲染

浏览器根据页面内容，生成DOM Tree。根据CSS内容，生成CSS Rule Tree(规则树)。调用JS执行引擎执行JS代码。 根据DOM Tree和CSS Rule Tree生成Render Tree(呈现树)根据Render Tree渲染网页

网页静态资源加载

以阿里巴巴的淘宝网首页的logo为例，其url地址为 img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg 　　我们清楚地看到了url中有cdn字样。 　　什么是CDN？如果我在广州访问杭州的淘宝网，跨省的通信必然造成延迟。如果淘宝网能在广东建立一个服务器，静态资源我可以直接从就近的广东服务器获取，必然能提高整个网站的打开速度，这就是CDN。CDN叫内容分发网络，是依靠部署在各地的边缘服务器，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度。

网页静态资源加载

以阿里巴巴的淘宝网首页的logo为例，其url地址为 img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg 　　我们清楚地看到了url中有cdn字样。 　　什么是CDN？如果我在广州访问杭州的淘宝网，跨省的通信必然造成延迟。如果淘宝网能在广东建立一个服务器，静态资源我可以直接从就近的广东服务器获取，必然能提高整个网站的打开速度，这就是CDN。CDN叫内容分发网络，是依靠部署在各地的边缘服务器，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度。

3.常见问题

如何进行优化

4.解决方案

1.尽可能减少HTTP请求：图片合并 （css sprites），Js脚本文件合并、css文件合并

2.将css放在页面最上面，将js放在页面最下面

css放在页面最上面可以防止页面出现白屏、闪跳的现象，即减少页面的首屏出现时间。js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。而且js中可能会对DOM节点进行操作，而这时代码是自上向下进行执行的，这样会造成js对相应的元素操作不了。所以js放在页面的最下面

3.压缩js和css

减少文件体积，去除不必要的空白符、格式符、注释（即对代码进行格式化）

4.使用CDN(内容分发网络)

5.使用keep-alive

我们知道HTTP协议采用“请求-应答”模式，当使用普通模式，即非KeepAlive模式时，每个请求/应答客户和服务器都要新建一个连接，完成 之后立即断开连接（HTTP协议为无连接的协议）；当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服 务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。

6.异步加载：减轻网页阻塞

7.减少网页刷新：部分加载页面，如使用ajax或angular路由

8.懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

5.编码实战

6.扩展思考

有什么帮助我们优化性能的工具

Audits 和 Chrome 性能插件

https://www.jianshu.com/p/36165e678c25

7.参考文献

https://blog.csdn.net/dataiyangu/article/details/79946416

8 更多讨论