【刷题】面筋-页面很卡的缘由分析及解决方案

打开开发者工具看network里的瀑布图。

缘由一：http请求次数太多

解决：减小http请求次数
①　图片地图：把多张图片整合到一张图片中，以位置定位超连接。
②　CSS Sprites合并图片，经过指定CSS的backgroud-image和backgroud-position来显示元素。
③　合并JS脚本和CSS样式表。
④　使用外部JS和CSS文件。

缘由二：接收数据时间过长，以下载资源过大

解决：对HTTP传输进行压缩，即在js，css、图片等资源已经压缩的基础上，在HTTP传输过程当中的再次压缩。客户端能够经过Accept-Encoding头来声明浏览器支持的压缩方式，服务端经过Content-Encoding来启用压缩，配置压缩的文件类型，压缩方式。gzip使用无损压缩，压缩效果最佳，已经成为使用最为广泛、支持的浏览器最多的数据压缩格式。

缘由三：JavaScript脚本过大，阻塞了页面的加载

解决：将JavaScript脚本放在标签前。script没有async和defer时，JS文件将在下载后当即执行。这种状况下，script放在顶部会阻塞页面呈现，在网速慢的状况下会致使“白屏”，直到脚本下载完毕才继续呈现页面。所以，script放在底部可让页面尽快呈现。
https://blog.csdn.net/zhouziyu2011/article/details/71330739

缘由四：CSS、JavaScript、图片等须要重复加载

解决：静态资源统一放在一个静态域名上，减轻重复下载静态资源的负担。

缘由五：cookie影响

解决：减少cookie的影响
①　去除没有必要的cookie，若是网页不须要cookie就彻底禁掉。
②　将cookie的大小减到最小：减少HTTP请求报文的大小，提升响应速度。
③　设置合适的过时时间：cookie信息将存储到硬盘上，即便浏览器退出cookie还会存在，只要cookie未被清除且还在过时时间内，该cookie就会在访问对应域名时发送给服务器。
④　经过使用不一样的domain减小cookie的使用：cookie在访问对应域名下的资源时都会经过HTTP请求发送到服务器，但在访问一些资源，如js，css和图片时，大多数状况下cookie是多余的，可使用不一样的domain来存储这些静态资源，这样访问这些资源时就不会发送多余的cookie，从而提升响应速度。

缘由六：网页资源过多

解决：使用CDN部署网络以提升下载速度，能够先经过免费的CDN供应商来分发网页资源。
缘由：DNS解析速度
DNS解析是从域名到IP的解析。DNS解析包括往复解析的次数及每次解析所花费的时间，它们二者的积便是DNS解析所耗费的总时间。许多人无视了DNS解析的因素，其实它对网站解析速度也是十分重要的。能够更换延迟比较低的DNS服务器。

参考连接

• 网页很卡的缘由

END