ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【刷题】面筋-页面很卡的原因分析

2020-05-19 17:57:16  阅读:354  来源: 互联网

标签:解析 压缩 面筋 cookie 资源 DNS 很卡 CSS 刷题


打开开发者工具看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

标签:解析,压缩,面筋,cookie,资源,DNS,很卡,CSS,刷题
来源: https://www.cnblogs.com/anliux/p/12918396.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有