Chrome浏览器开发者工具Network窗口下,可以查看下载各组件所需的具体时间

根据上表进行简要分析——

Stalled(阻塞)

  浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接;此外脚本也会阻塞其他组件的下载;

  优化措施:

  1、将资源合理分布到多台主机上,可以提高并发数,但是增加并行下载数量也会增大开销,这取决于带宽和CPU速度,过多的并行下载会降低性能;

  2、脚本置于页面底部;

DNS Lookup(域名解析)

  请求某域名下的资源,浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前,浏览器不能从主机名那里下载到任何东西。

  优化措施:

  1、利用DNS缓存(设置TTL时间);

  2、利用Connection:keep-alive特性建立持久连接,可以在当前连接上进行多个请求,无需再进行域名解析;

Initial connection(初始化连接)

  TCP建立连接的三次握手时间

SSL(包含于HTTPS连接中)

  http是超文本传输协议,以明文方式发送内容,不提供任何方式的数据加密,如果被不法分子截取浏览器和服务器之间的传输报文,会获取其中的信息。

  https 是安全套接字层超文本传输协议,就是在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。

  因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。

Request sent(发送请求)

  发送HTTP请求的时间(从第一个bit到最后一个bit)

  优化措施:

  1、减少HTTP请求,可以使用CSS Sprites、内联图片、合并脚本和样式表等;

  2、对不常变化的组件添加长久的Expires头(相当于设置久远的过期时间),在后续的页面浏览中可以避免不必要的HTTP请求;

Waiting(等待响应)

  通常是耗费时间最长的。从发送请求到收到响应之间的空隙,会受到线路、服务器距离等因素的影响。

  优化措施:

  1、使用CDN,将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求,提高响应速度;

Content Download(下载)

  下载HTTP响应的时间(包含头部和响应体)

  优化措施:

  1、通过条件Get请求,对比If-Modified-Since和Last-Modified时间,确定是否使用缓存中的组件,服务器会返回“304 Not Modified”状态码,减小响应的大小;

  2、移除重复脚本,精简和压缩代码,如借助自动化构建工具grunt、gulp等;

  3、压缩响应内容,服务器端启用gzip压缩,可以减少下载时间;

Chrome浏览器优化技巧的更多相关文章

  1. Chrome浏览器调试技巧

    本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是 ...

  2. chrome浏览器使用技巧

    在学校的时候一直在用firefox火狐浏览器,听一个学长说使用chrome浏览器在面试的时候有加分,而且还跟我说了一些chrome浏览器的使用技巧,最后从火狐浏览器转到谷歌浏览器,就一直在使用谷歌浏览 ...

  3. 5个提升Google Chrome浏览器运行速度的技巧

    尽管有无数个喜欢Google Chrome  浏览器的理由,其中就包括,Chrome已经够快了,但Google Chrome的内存占用而导致的速度拖累还是广受诟病,这种弊端在windows下尤为明显, ...

  4. Chrome - JavaScript调试技巧总结(浏览器调试JS)

    Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...

  5. chrome 浏览器的使用技巧

    前端工程师大部分的工作成果都需要在浏览器中查看,使用 chrome 浏览器的频率非常高.更好更优雅地使用 chrome,将 chrome 配置成一款趁手的浏览器,将极大地提升编程效率.本文将详细介绍 ...

  6. 第一期chrome浏览器的小技巧------《提高搜索效率》

    !!! 这次的技巧是:利用chrome提供的设置 提高你的搜索效率 !!! 我们经常遇到问题,搜索的时候很不方便 比如你在百度上搜索一个东西的时候正好没有搜到,那么你想找到这个东西的话,很明显要到其他 ...

  7. 谷歌chrome浏览器network中Stalled分析和优化

    谷歌chrome浏览器network中Stalled分析和优化 问题由来 最近项目上要求首页的加载速度,查看浏览器的network发现接口加载速度非常慢. 问题解决思路 SSL 网上有人因为图片加载, ...

  8. Ubuntu小技巧——怎样安装谷歌Chrome浏览器

    对于刚刚开始使用Ubuntu并想安装谷歌Chrome浏览器的新用户来说,本文所介绍的方法是最快捷的.在Ubuntu上安装谷歌Chrome的方法有很多.一些用户喜欢直接在谷歌Chrome下载页面获得 d ...

  9. Win7系统Chrome浏览器缓存查看技巧介绍(转)

    1.Chrome下提供了一个命令chrome://cache,可以查看到保留下来的缓存; 2.但是,当你点击缓存文件,Chrome却并非打开缓存源文件,而是如图所示的二进制编码文件; 3.在Win7系 ...

随机推荐

  1. Spring Aop之Cglib实现原理详解

    Spring Aop实现对目标对象的代理,AOP的两种实现方式:Jdk代理和Cglib代理.这两种代理的区别在于,Jdk代理与目标类都会实现同一个接口,并且在代理类中会调用目标类中被代理的方法,调用者 ...

  2. HashMap,HashTable,ConcorrentHashMap的线程方式

    1.HashMap不是线程安全的,put,resize 2.HashTable是线程安全的,synchronized,但是效率较低 3.ConcorrentHashMap 对HashMap的一种加线程 ...

  3. 20145216史婧瑶《Java程序设计》第8周学习总结

    20145216 <Java程序设计>第8周学习总结 教材学习内容总结 第十五章 通用API 15.1 日志 java.util.logging 包提供了日志功能相关类与接口,不必额外配置 ...

  4. 原生的 promise 的局限性

    本文来自:https://ekyu.moe/article/limits-of-native-promise-and-async-await/ 众所周知,Nodejs 已原生支持 Promise 和 ...

  5. 编译binutil包报错 error: array type has incomplete element type extern const struct relax_type md_relax_table[];

    安装lfs时编译binutils出错: ../../sources/binutils-2.15.91.0.2/gas/config/tc-i386.h:457:32: error: array typ ...

  6. ”由于没有远程桌面授权服务器可以提供许可证,远程会话被中断“的解决方案

    由于windows server 2012 R2 Datacenter 安装了 远程桌面角色,但是这个角色是120天免费的,需要购买授权的. 解决方案: 删除这个角色,就可以正常进行远程桌面连接了.但 ...

  7. 分布式系统中的幂等性-zookeeper与dubbo

    现如今我们的系统大多拆分为分布式SOA,或者微服务,一套系统中包含了多个子系统服务,而一个子系统服务往往会去调用另一个服务,而服务调用服务无非就是使用RPC通信或者restful,既然是通信,那么就有 ...

  8. SQL Server 的索引结构实例

    目前SQL Server 的索引结构如下: 这个是聚集索引的存放形式: 非聚集索引的方式如下: 它们是以B+树的数据结构存放的. 相信大家都看过类似的图,但是没有直观的认识,下面举一个实际的例子来说明 ...

  9. Cookie和Session的工作原理及比较

    一.Cookie详解 (1)简介 因为HTTP协议是无状态的,即服务器不知道用户上一次做了什么,这严重阻碍了交互式Web应用程序的实现.在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两饮料 ...

  10. python中如何剔除字符串

    问题: 过滤用户输入中前后多余的空白字符 ‘    ++++abc123---    ‘ 过滤某windows下编辑文本中的’\r’: ‘hello world \r\n’ 去掉文本中unicode组 ...