摘要 : network性能分析1.1 区域1size对应每个文件传输时的大小，其中有时会出现content,content表示文件实际大小，两个不同的原因是传输的时候会进行文件压缩导致，尽可能让文件小，保持单个内容小于25K；network分析区域1 ...
- network性能分析
1.1 区域1size对应每个文件传输时的大小，其中有时会出现content,content表示文件实际大小，两个不同的原因是传输的时候会进行文件压缩导致，尽可能让文件小，
保持单个内容小于25K；
network分析区域
1.2 区域2对应的Timing，其实和waterfall下hover后出来弹框效果一致
timing & waterfall
1.3 区域3中的参数含义
Queueing: 排队的时间，由于被渲染的引擎认为优先级比较低的资源(图片)、服务器不可用、超过浏览器最大请求数(chrome最大并发是6)，同一个域下最好不要超过5个
stalled：浏览器对同一主机域名的并发连接数有限制，如果当前连接数超过上限，其请求会被阻塞，等待新的可用链接；此外脚本也会阻塞其它组件下载
stalled优化措施：
a. 将资源合理分布到多台主机，提高并发数，但增加并行下载数量也会增大开销，取决带宽和CPU速度，过多的并行下载会降低性能；
b.脚本置于页面底部
Proxy negotiation：与代理服务器连接的时间花费
DNS Lookup：请求某域名下的资源，浏览器需要先通过DNS解析器得到该域名服务器的ip地址
DNS lookup优化措施：
a.利用DNS缓存(设置TTL时间)
b.利用connection:keep-alive建立持久连接，可在当前连接上进行多个请求，无需再次进行域名解析
Initial connection：初始化连接，TCP建立连接的三次握手时间
SSL:如果你的页面是通过SSL / TLS这类安全协议加载资源，这段时间就是浏览器建立安全连接的过程。目前谷歌将HTTPS作为其搜索排名因素之一，SSL / TLS协商的使用变得越来越普遍了
Request sent：发送http请求的时间，从第一个bit到最后一个bit
request sent优化措施：
a.减少http请求，可以使用css sprites，内联图片，合并脚本和样式表等
b.对于不长变化组件添加长久的Expires头，在后续的页面浏览中可以避免不必要的http请求
Waiting (TTFB): 通常是耗费时间最长的，从发送请求到收到服务器响应的第一个字节之间的时间，收到线路、服务器距离等因素影响
TTFB优化措施：
a.使用CDN，将用户的访问指向距离最近的缓存服务器上，由缓存服务器直接响应请求，提高响应速度；
Content Download：收到响应的第一个字节到接受完最后一个字节，下载时间（包含头部和响应体）
Content Download优化措施：
a.通过缓存，服务器返回“304 Not Modified”，减少响应大小
b.移除重复脚本，精简和压缩代码，如自动化构建工具gulp、webpack等
C.压缩响应内容，服务器启用gzip压缩方式
2. webpack优化
2.1 happypack，并发处理子进程
2.2 uglifyjs-webpack-plugin， 多进程并行压缩js
2.3 DllPlugin 把以来的第三方库单独打包，只需要首次打包，以后就不用再次打包
2.4 可以利用缓存提高打包速度的组件：babel-loader、cache-loader、hard-source-webpack-plugin
2.5 通过include和exclude缩小文件范围
3. lodash引入，细化到具体的，譬如import debounce form 'lodash/debounce', 而不是import {debounce} form 'lodash',前者打包只引入debounce，后者打包是lodash
4. async await 异步问题，当多个接口没有顺序关系，需要同步执行
5. json.parse放在node端解析会吃内存
6. chrome扩展应用“profile”, 同chrome 自带的performance，着重分析红色区域内容
参考内容：
1. https://mp.weixin.qq.com/s/nSWlqeVDGVSkzc7fuzXlfg
2. https://mp.weixin.qq.com/s/xFOPrntp0JHrSPdTKuNDIw
|
|
|
最新评论