Web前端优化已读

1、WEB前端优化2010-12-25目录关于Web01优化对比分析03怎么优化04为什么需要优化02目录关于Web01优化对比分析03怎么优化04为什么需要优化02关于WebWeb 是新媒体，它来自印刷，印刷的技巧，设计及惯例对 Web 影响巨大。那些“杀手级网站”常常是那些对 Web 的野性加以驯服，让页面中规中矩就象它们也是纸张一样的网站，也就是桌面印刷版的 Web。这种风尚很自然，但我们需要前进，让 Web 成为它自己的媒体，拥有自己的天性。关于Web核心价值互联网用户及市场信息服务商Internet User&Marketing Information Provider市场信息互联网用户

2、监测分析发现监测终端用户访问体验分析运维及服务的表现发现运营者的优化策略监测截获的访问流量分析市场表现及发展动态发现市场商机目录关于Web01优化分析03怎么优化04为什么需要优化02为什么需要优化决策层市场部门客户服务技术部门: 我在外地出差，为什么无法访问网站？技术部门: 为什么我们网站速度比竞争对手差？技术部门: 用户投诉网站页面打开太慢所有问题归结于技术部门为什么需要优化时间花哪里去了？13.7/729.4 = 1.88%为什么需要优化时间花哪里去了？26.5/543.1 = 4.88%为什么需要优化时间花哪里去了？只有10%-20%的最终用户响应时间花在了下载html文档上,其余80

3、%-90%时间花在了下载页面的相关组件上。如：图片、Flash为什么需要优化时间花哪里去了？为什么需要优化时间花哪里去了？脚本的加载是按顺序串行加载的浏览器在下载脚本时会阻塞额外的http请求目录关于Web01优化对比分析03怎么优化04为什么需要优化02优化对比分析设备优化优化对比分析内容优化在不减少内容的情况下，优化结构代码优化首屏时间内的对象数控制页面每个元素（图片，Javascript，CSS等）其他内容优化手段可以提高用户体验：40 50目录关于Web01优化对比分析03怎么优化04为什么需要优化02怎么优化只有10%-20%的最终用户响应时间花在了下载html文档上, 其余80%-

4、90%时间花在了下载页面的相关组件上。怎么优化(1) 减少HTTP请求合并文件将多个CSS文件或Javascript文件合并成一个图片地图在一个图像上划分不同区域映射不同的链接内联图像让图像与文本一起下载和显示CSS Sprites利用 CSS background 相关元素进行背景图绝对定位怎么优化(2) 缓存怎么优化(3) 减少文件大小 压缩Javascript和CSS文件1 优化代码2怎么优化(3) 减少文件大小优化代码去除不必要的html标签：a. b. margin 或者 padding、letter-spacing避免内联式样式： css styleCSS代码优化：a. .colo

5、r1 color:Red; .color2 color:Red; .color1,.color2color:Red;b. .style1border-left:solid 1px #112233;border-right:solid 1px #112233 ;border-top:solid 1px #112233 ;border-bottom:solid 1px #112233 ; .style1border:solid 1px #112233;c. #ffffff #fff ; #66aa00 #6a0d. 0px ; 0pt 0怎么优化(4) 将样式表放在顶部css，全称Cascadin

6、g Style Sheets(层叠样式表单)。层叠即意味这后面的css可以覆盖前面的css，级别高的css可以覆盖级别低的css。既然前面的可以被覆盖，浏览器在他完全加载完毕之后再去渲染无疑也是合情合理的很多浏览器下，所以我们应该尽快让css加载完毕.怎么优化(4) 将script放在底部1、因为防止script脚本的执行阻塞页面的下载。2、脚本引起的第二个问题是它阻塞并行下载数量。怎么优化(5)减少DNS查询 在 Internet上域名与IP地址之间是一一对应的，域名（）很好记，但计算机不认识，计算机之间的“相认”还要转成ip地址。在网络上每台计算机都对应有一个独立的ip地址。在域名和ip地

7、址之间的转换工作称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。怎么优化(6) 避免重定向页面的重定向会消耗一定的时间。例： 当输入的时候服务器会自动产生一个301服务器转向 发生重定向的原因有很多，但是不变的是每增加一次重定向就会增加一次web请求，所以因该尽量减少怎么优化(7)杜绝 http 404 错误404错误是由于未找到文件引起的。HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。 有些站点把404错误响应页面改为“你是不是要找*”，这虽然改进了用户体验但是同样也会浪费服