首屏用时优化-公开课件.pptVIP

*  博思网质 睿眼识真 网站性能优化 — 关于首屏用时 首屏用时：指网站在浏览器第一屏区域被充满所需时间，目前在Bonree系统里是指显示高度达到600像素高，反映了用户在打开网站第一时间的感觉性能。 通常一个网站，如果首屏时间在3秒以内是比较优秀的，8秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。 首屏用时的影响因素 页面落在首屏部分的页面结构，包括页面内容大小、图片大小、JS外链文件及CSS外链文件、调用第三方内容、层次结构等都会直接影响首屏时间。 b. 网络因素，评定的指标有：DNS解析用时，建立连接用时，SSL握手用时，发出请求用时，重定向用时，服务器响应用时，内容下载用时。 c. 其他因素，比如Javascript脚本运行时间。 我们优化的目标：减少首屏用时 那么，怎么分析造成首屏用时过长的具体原因呢？ 影响首屏用时的相关因素 HTTP数据包嗅探 记录HTTP请求形成的瀑布图 分析HTTP请求间的顺序 分析单个请求的内容和时间线 (域名解析，建立连接，发送请求，等待响应，接收数据) 单机工具： PageDigger HttpWatch 联网工具： 分析HTTP瀑布图 单个域名HTTP1.1请求并发数 IE6，7 为2个 ，IE8 为6个， Firefox 3+为6个 分析工具： PageDigger IE7 分析案例 1 IE7同一个域名最多2个并发请求 2 基础页面过大100KB且未作GZip压缩 3连续3个css文件 当我们无法改变用户的网络环境时 一、DNS lookup 域名解析耗时 加强DNS服务器的规划与部署 二、建立连接 WEB服务的规划与部署，使用CDN,开启keep-alive 三、等待响应 减小服务端执行耗时，使用chunked 四、发送请求和接收数据 这个和用户所在的网络环境极其相关，在HTTP响应头及内容中做优化工作 为了让浏览器尽早渲染的一些经验 减少head内的CSS的请求，1个最佳； 生产环境的CSS避免使用@import； 首屏的页面结构不要过于复杂，CSS不要使用expression，selector注意优化； 首屏中避免JS的请求； 延迟首屏交互代码的执行； 服务端进行请求可缓存的相关设置； 服务端启用GZIP压缩； 避免使用IFRAME 。 可进一步改进措施 静态文件放置在CDN； 静态文件采用独立域名，cookie-free Domain； 3.图像优化； 4.信息量的大页面使用 chunked； 5.公司级的缓存策略； 6.结构的表现采用平稳过渡，即使背景图片没有下载完成，依然可以有配色区分内容。 非 常 感 谢 * * * * * * * * * * *