如何进行web前端性能优化

来源：重庆达内IT教育培训学校时间：2021/6/7 10:06:07

八个方面深度解析前端知识/技能，本篇分享的是：
【如何进行web前端性能优化？】
1.背景介绍
网站性能优化主要是针对两个方面：
1．从用户角度而言，优化就是让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2．从服务器角度而言，优化是减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
2.知识剖析
优化网站性能需要先了解网站的运行步骤：
A.网络请求
1．在浏览器中输入url地址，客户端检查url中的域名是否存在于本地host文件中
2．未在host中找到ip地址，则访问本地DNS服务器中查询域名。
3．未在本地DNS中找到域名，则访问DNS根服务器，然后向下级DNS服务器一级一级查找域名。
4．DNS服务器找到域名后，返回ip地址，浏览器收到ip地址
5．浏览器通过ip地址向服务器发起TCP连接，进行3次握手。
6．握手完成后，浏览器生成http请求，发送给服务器
服务器收到http请求，根据请求处理所需文件，然后生成http响应报头
http响应报头与所需文件合并成http响应数据包，发送给客户端，若文件太大，可能会有分程
7．客户端收到http响应数据包，提取出文件，进行加载。一次http请求完成。
B.文件加载：
1．客户端浏览器加载了html文件后，由上到下解析html为DOM树（DOMTree）
2．遇到css文件，css中的url发起http请求。
这是第二次http请求，由于http1.1协议增加了Connection:keep-alive声明，故tcp连接不会关闭，可以复用。
3．http连接是无状态连接，客户端与服务器端需要重新发起请求–响应
4．在请求css的过程中，解析器继续解析html，然后到了script标签。
5．由于script可能会改变DOM结构，故解析器停止生成DOM树，解析器被js阻塞，等待js文件发起http请求，然后加载。这是第三次http请求。js执行完成后解析器继续解析。
6．由于css文件可能会影响js文件的执行结果，因此需等css文件加载完成后再执行。
7．浏览器收到css文件后，开始解析css文件为CSSOM树（CSSRuleTree）。
8．CSSOM树生成后，DOMTree与CSSRuleTree结合生成渲染树（RenderTree），
9．RenderTree会被css文件阻塞，渲染树生成后，先布局然后渲染，页面就会呈现信息。
10．继续边解析边渲染，遇到了另一个js文件，js文件执行后改变了DOM树，渲染树重新渲染此部分。
11．继续向下渲染，碰到一个img标签，浏览器发起http请求，不会等待img加载完成，继续向下渲染，之后再重新渲染此部分。
12．DOM树遇到html结束标签，停止解析，进而渲染结束
3.常见问题
网站性能如何优化
4.解决方案
1．减少DNS查询:将服务器域名的ip信息加入本地host文件，这也是常见的翻墙方法
2．减少DNS查询:使用优质的本地DNS服务器，在系统中设置
3．减少tcp连接，开启KeepAlive声明
4．减少http请求数量，可减少多余的请求头与响应头：对于图片使用雪碧图，对于html文件和css文件，js文件分别进行合并操作。
5．减少下载时间：为文件减负，压缩图片，使用压缩应用压缩文档中的空格，删除文件多余的语句和注释，创造自己的js精简库和精简框架
6．减少下载时间：html中引用各种框架和库时，使用CDN链接，CDN会自动寻找网络响应的较优解
7．减少下载时间：使用本地浏览器缓存。
8．减轻html文件解析阻塞与渲染阻塞：使用浏览器预加载功能
9．提前渲染开始时间：将css链接放在html头部
10．减轻解析器的阻塞：将js链接放在body尾部
11．按需加载：如在angular路由中使用懒加载，减轻首页负担。
12．异步加载：减轻网页阻塞
13．减少网页刷新：部分加载页面，如使用ajax或angular路由
5.编码实战
6.扩展思考
如何优化代码
可使用chrome开发者选项audits功能。

领取试听课

每天限量名额，先到先得

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/2305/news/366882/违者必究！以上就是重庆达内IT教育培训学校小编为您整理 如何进行web前端性能优化的全部内容。