实践一下前端性能分析

  

一、浏览器并行下载数量

浏览器的并发请求数目限制是针对同一域名的。

同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。

所以我们经常能看到不同静态资源会有不同域名,例如图片、JavaScript、CSS等。

HTTP1.1与HTTP1.0,限制的数量还不一样。

先来看看网上的数量限制的统计结果,比IE6、IE7那会儿进步了很多。

实践一下前端性能分析

接下来做一个对比,分别是和,分别加载图片。

实践一下前端性能分析

当一个域名的时候最多只能并发6个请求,而两个域名的时候能并发10个请求。

实践一下前端性能分析

 

由于长连接的关系,HTTP1.1建议每个服务器建立少量的连接。

如果浏览器支持 keep-alive(长连接),它会在请求的包头中添加:

实践一下前端性能分析

长连接的原理是使用同一个TCP连接来发送和接收多个HTTP请求/应答,而不是为每一个新的请求/应答打开新的连接的方法。

当客户端发送另一个请求时,它会使用同一个连接。这一直继续到客户端或服务器端认为会话已经结束,其中一方中断连接。

下图左边每次请求后都会断开,右边就是请求后不会马上断开。

实践一下前端性能分析

所以想要高并发量还可以降级到HTTP1.0,不过具体情况如何,我还没试验过。

 

在中有23条规则,第20条就是“”。

在请求下载静态小图片、静态小文件的时候,浏览器会把它当成普通请求一样,在request的header信息里附加cookie信息。

如果每个header都附加1kB的cookie,那么对于一个有50个小文件的复杂网页来讲,就白白增加了50kB的传输量。

网上有很多相关的解决方案,可以尝试一下。

 

二、行内脚本阻塞并行下载

览器会保持css和js的解析顺序,如果把行内脚本放在样式表之后,会明显地延迟资源的下载(结果是样式表下载完成并且行内脚本执行完毕时,后续资源才能开始下载)。

这是因为行内脚本可能含有依赖于样式表中样式的代码,比如。

行内脚本就是将脚本直接写在HTML页面中。


  & lt;才能link  rel=皊tylesheet" https://www.yisu.com/zixun/, href=" css/all-normal.css " type=" text/css "/>  <身体>
  
  <脚本>   var内容=";(i=1;我<1000000;我+ +)   内容+='写入页面”;   . getelementbyid(“内容”)。innerHTML=内容;>

下面通过铬的工具查看下:

再来看看ui。null   null   null   null   null

实践一下前端性能分析