页面有点卡，你知道原因和解决方案吗？

VOL 415

08

2022-08

今天距2023年146天

ITester软件测试小栈第415次推文

点击上方蓝字“ITester软件测试小栈“关注我，每周一、三、五早上 09:00准时推送，每月不定期赠送技术书籍。

微信公众号后台回复“资源”、“测试工具包”领取测试资源，回复“微信交流群”、“内推群”一起进群打怪。

本文1867字，阅读约需5分钟

Hi，大家好，我是CoCo。马上进入金九银十，很多小伙伴有被动跳槽的打算，所以更新一些相关的面试题，希望能帮到大家。今天分享的是关于页面很卡的原因分析及解决方案，你认为有哪些原因呢？具体来说有如下原因：

一

原因一

1

原因

http请求次数太多。

2

解决方案

①减少http请求次数，可以通过如下方式：

②图片地图：把多张图片整合到一张图片中，以位置定位超链接。CSS Sprites合并图片，通过指定CSS的backgroud-image和backgroud-position来显示元素。 ③合并JS脚本和CSS样式表。 ④使用外部JS和CSS文件。

二

原因二

1

原因

接收数据时间过长，如下载资源过大。

2

解决方案

对HTTP传输进行压缩，主要通过以下方式：

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

三

原因三

1

原因

JavaScript脚本过大，阻塞了页面的加载。

2

解决方案

将JavaScript脚本放在标签前，script没有async和defer时，JS文件将在下载后立即执行。这种情况下，script放在顶部会阻塞页面呈现，在网速慢的情况下会导致“白屏”，直到脚本下载完毕才继续呈现页面。因此，script放在底部可以让页面尽快呈现。

四

原因四

1

原因

CSS、JavaScript、图片等需要重复加载。

2

解决方案

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

五

原因五

1

原因

cookie影响。

2

解决方案

减小cookie的影响，主要可以通过以下方式：

①去除没有必要的cookie，如果网页不需要cookie就完全禁掉。

②将cookie的大小减到最小：减小HTTP请求报文的大小，提高响应速度。 ③设置合适的过期时间：cookie信息将存储到硬盘上，即使浏览器退出cookie还会存在，只要cookie未被清除且还在过期时间内，该cookie就会在访问对应域名时发送给服务器。 ④通过使用不同的domain减少cookie的使用：cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器，但在访问一些资源，如js，css和图片时，大多数情况下cookie是多余的，可以使用不同的domain来存储这些静态资源，这样访问这些资源时就不会发送多余的cookie，从而提高响应速度。

六

原因六

1

原因

网页资源过多。

2

解决方案

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

以上就是今天的全部内容，希望对大家有所帮助，也希望大家多多留言、点赞、在看、转发四连爱❤️ 支持。 咱们下篇文章见，Bye~👋

以上

That‘s all

更多系列文章

敬请期待

ITester软件测试小栈（ID：ITestingA），专注于软件测试技术和宝藏干货分享，每周准时更新原创技术文章，每月不定期赠送技术书籍，愿我们在更高处相逢。喜欢记得星标⭐我，每周及时获得最新推送，第三方转载请注明出处。