`
- 浏览:
248708 次
- 性别:
- 来自:
北京
-
一、 前端性能黄金法则:
只有10%-20%的最终用户响应时间是花在了下载HTML源文件上。其他80%-90%是花在了下载页面中的所有组件上。 80%-90%用户的等待时间是来自于前端的页面加载
二、时间花在哪?
Blocked:包括所有预处理(查询本地Cache)时间和等待网络连接可用的时间
DNS Lookup:域名解析。查询过程:浏览器DNS缓存;操作系统DNS缓存;DNS服务器。
Connect:创建一个 TCP 连接到 web 服务器 (或代理) 所需的时间。如果正在使用安全的 HTTPS 连接这次包括 SSL 握手过程。
Send:HTTP 请求消息发送到服务器所需的时间,将取决于发送到服务器的数据量。
Wait:等待来自服务器的响应消息。此值包括由于采用网络延迟的延误和处理该请求的 web 服务器上所需的时间。
Receive:从服务器读取响应消息所需的时间。此值将取决于内容返回,网络带宽的大小和是否使用 HTTP 压缩了。
Cache Read:读取浏览器缓存中的内容或 304 响应所需的时间。
TTFB:(Time To First Byte)从初始的网络请求正在发起由浏览器从服务器接收的第一个字节的持续时间。它包括 TCP 连接时间、 将请求发送时间和获取响应消息的第一个字节的时间。
Network:所有的网络相关的 HTTP 请求的总持续时间。
三、优化方向
Blocked:增加expires头,配置Etag 参考:expires与etag控制页面缓存的优先级
DNS Lookup:减少DNS查询,2个域名要优于1个和4个域名(yahoo)参考: 网站加速最佳实践 –减少DNS查找
Connect:Connect:keep-alive ; CDN
Send:将图片,js,css独立服务器,避免每次请求中带Cookie;Cookie domain尽量使用子域名;尽量使用GET方式请求。
Wait:服务器缓存;生成静态页面;服务器负载均衡;重定向;SQL语句优化;SQL索引等服务器后端处理速度。
Receive:带宽;Gzip;Html/Js/Css压缩;Js混淆;Image Map;降低图片质量;精简HTMl等
如何减少Http请求次数:
合并js文件;合并css文件;css sprites;image地图;将图片编码成base64数据嵌入网页
如何减少阻塞次数、减少阻塞时间
将css放在顶部;将js放在底部;删除重复的脚本;延迟加载熏染页面不需要的脚本;按需异步下载脚本
四、相关工具——监控工具:
IE FireFox Chrome
IE Developer Tools Firebug Chrome Developer Tools
Httpwatch Speed Tracer
Fiddler - -
五、 相关工具——分析(提供优化)
YSlow;PageCheck性能检测工具;百度统计;page speed
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
前端性能优化与实践.zip
针对前端页面的一系列的优化, 前端性能优化原理与实践 · 小册
让你页面速度飞起来,Web前端性能优化。 让你页面速度飞起来,Web前端性能优化。百度云盘视频资料,下载直接看
前端性能优化探索.pdf
让你页面速度飞起来 Web前端性能优化 让你页面速度飞起来 Web前端性能优化
前端性能优化全面汇总图.zip
移动Web前端性能优化方案的应用,申冬,陈萍,随着信息化技术快速发展,移动互联网得到迅猛普及,但是移动设备性能参差不齐,移动互联网速度普遍低下,所以移动Web前端性能优化
Web前端性能优化全攻略
前端性能优化指南
代码级别的优化,例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等来讲述前端性能优化的多个方式。 目录结构如下: 一、WEB性能优化相关理论 ...三、前端性能优化的方式
前端性能优化 yahoo前端性能团队总结的35条黄金定律。
一本讲述web前端性能优化以及实践经验分享的书籍,非常不错,值得学习
让你页面速度飞起来 Web前端性能优化 从构建、浏览器渲染、缓存、PWA、服务端优化等多方面,梳理前端性能优化的技术点、综合分析技术的原理,根据不同的业务场景选择合适的性能优化点进行应用,最终为你的网站带来...
前端开发经验沉淀 前端性能优化及开发工具 共25页.ppt
optimus 是一个采用 Clojure 开发的前端性能优化环中间件。 为你的静态资源提供: 产品环境:优化绑定包 开发环境:不做任何改变 特性: 合并 JavaScript 和 CSS 文件到一个包中 使用 UglifyJS 2 来...
Web 前端性能优化思路与学习方法Web 前端性能优化思路与学习方法Web 前端性能优化思路与学习方法