如何提高第一次的加载速度

html jingsiyu 108℃ 0评论
第一次加载速度是用“首字节的时间”测量的,即从用户请求该 页面到第一个字节从服务器下载下来的这段时间。尽管了解、测量和优化第一次加载速度很重要,但在绝大多数情况下,这不是第一次加载缓慢的真正原因。真正的原因通常在于前端。PageSpeed、YSlow和其他无数的工具和服务可以用来解决这些问题。
1、浏览器是如何加载页面的
解析域名—发起请求—下载响应—渲染页面
解析域名:浏览器响应知道网站的IP地址,就会向DNS服务器发送一个包含域名的请求,然后DNS服务器返回对应的IP地址。为了减少DNS服务器上的负载,并提供性能,DNS查找机智会被浏览器、设备或设备和服务器之间的路由器和代理服务缓存。这就是为什么更贵DNS记录坑你需要几天才能生效的原因。
发起请求:浏览器会向由DNS查找得到的IP地址的主机发起TCP链接。然后发送请求。请求中包含网址、浏览器信息、浏览器能接受的数据类型(编码和语言),以及所有相关的cookie,包括域和路径的cookie。
下载响应:浏览器开始下载响应。随着响应流到达,浏览器解析html并识别出更多的资源。然后浏览器开始获取这些资源。
渲染页面:如果页面中外链了CSS或脚本文件时,浏览器会等到这些文件加载和解析(如果是javascript代码,则还响应执行)完再渲染页面。
2、为什么页面加载缓慢?
HTTP连接数
在网页上每一个外链的资源需要一次单独的HTTP请请求。一次HTTP请求不只是下载数据那么简单,每一次请求都包含一定量的额外开销。所以不断的请求许多小文件比一次请求一个大文件慢很多。当然,浏览器是可以同时下载多个文件。虽然可以通过添加额外的域名(也许是通过设置别名或子域名)的方式来并行下载更多的文件,但每次请求还是需要承担HTTP层面的开销。这可能显得有些奇怪,并行下载并没有起到太多作用。它终究没有客服成本的开销,因为两个文件并行下载的速度并不等于穿行串行速度的两倍。创建新请求不仅产生新的开销,而且还需要小号CPU和内存。对于较大的文件,比如较大的图片说法有所改变。因为下载站到了请求时间的绝大部分,所以并行下载更好。出于这个原因(以及一些其他原因),在网站上将图片与其他资源置于不同的域下是合理的。
总的字节数
被下载资源的大小
等待时的渲染阻塞
网络延迟
网络链接可以通过带宽(比特)和延迟(毫秒)来测量。网络延迟的时间会被加到链接的请求时间内。
缓存能力差
null

转载请注明:前端随笔 » 如何提高第一次的加载速度

喜欢 (0)

Warning: copy(/www/users/HA289308/WEB/avatar/.png) [function.copy]: failed to open stream: No such file or directory in /www/users/HA289308/WEB/wp-content/themes/yusi1.0/functions.php on line 234

Warning: filesize() [function.filesize]: stat failed for /www/users/HA289308/WEB/avatar/.png in /www/users/HA289308/WEB/wp-content/themes/yusi1.0/functions.php on line 237

Warning: copy(/www/users/HA289308/WEB/avatar/.png) [function.copy]: failed to open stream: No such file or directory in /www/users/HA289308/WEB/wp-content/themes/yusi1.0/functions.php on line 238
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址