网站前端优化与调优 - 优化.pptVIP

Web优化 一、为什么 时间花在哪了？ （1）大量的HTTP请求产生 （2）在请求脚本时不发生并行请求 注：大多情况下，浏览器在下载脚本时会阻塞额外的HTTP请求 二、怎么想 1、减少HTTP请求 2、缓存 3、减少文件大小 三、怎么做 （1）减少HTTP请求 1、图片地图 2、CSS Sprites 3、内联图片 4、合并JS和CSS 注（1）一般来说，使用外部脚本和样式表对性能更有利 （2）一般来说，一个页面应该不多于一个脚本和样式表文件 （3）脚本模块化 （2）CDN CDN即内容分发网络。CDN是构筑在现有Internet上的一种先进的流量分配网络,能够提高访问的响应速度和服务的可用性 。CDN是一个经策略性部署的整体系统，能够帮助用户解决分布式存储、负载均衡、网络请求的重定向和内容管理等问题。 CDN的优点 维护简单，网站数据自动同步解决所有ISP互通问题，和网络链路问题减轻了源服务器的压力有效抗DDOS攻击节约骨干网资源 CDN的缺点 实施复杂投资大 （3）将样式表放在顶部 为什么要这样做？ HTML页面是逐步呈现的，在用户打开页面的同时，我们需要考虑到用户的体现—打开网页的速度。而显示页面第一需求是HTML，而HTML是由一个一个的DIV组成，CSS是一切的基础。 怎么放？ 使用LINK标签将样式表放在文档的HEAD中 （4）将脚本放在底部 脚本带来的问题 因为页面是逐步呈现的， 对于脚本以下的内容，会被阻塞。直到脚本加载完毕才会继续呈现页面。 正确的放位置 （1）最差的情况：将脚本放在顶部。会阻塞其后内容呈现、会阻塞其后组件下载。 （2）最佳的情况：将脚本放在底部。不会阻止页面的呈现。 （5）避免CSS表达式 CSS表达式有时会影响到页面的加载时间 举例： background-color: expression( (new Date()).getHours()%2?”#B8D4EF”:”#F08A00”) 作用：用CSS设置背景色每小时变化一次。 说明：expression方法接受一个JS表达式，CSS属性将被设置为对JS表达式进行求值的结果。 CSS表达式有可能在用户打开页面、滚动页面、改变大小、鼠标移动。可想而知… （6）使用外部JavaScript和CSS 内联VS外置 纯粹而言，内联快一些 说明：只一个页面，文件大小几乎相同，主要是因为外置需要承担多个HTTP请求带来开销 为什么还要外置 内联的将不会被缓存，重新加载时将重新下载； 外置的JS或CSS文件会被浏览器缓存起来，同时减少了HTML页大小，还减少了HTTP请求。 组件重用 JS和CSS的公用性 建议：像网站首页这样的页面使用内联的。 像云世界中适合用外置，因为公用性很强 （7）减少DNS查找 DNS、IP、Domain解释及关系 减少DNS查找 当用户在打开一个网页时，需要对打开的域名进行解析（即DNS查找）。 如 在此页面还有另一个域名http://img. 此时将会进行两次DNS查找，完后DSN查找后开始加载页面。 如果DNS查找次数过多，会造成页面加载缓慢。 建议：将组件分别放到2个以上，但不要超过4个域名下。 并行下载： 由于浏览器本身的特性，在访问一个页面，一个域名同时加载连接数会有一定的限制。 （8）精简JavaScript与CSS 精简是从代码中移除不必要的字符以减少其大小，以改善加载时间。 代码可以精简的部分： 不必要的空白字符（空格、换行和制作符） 精简后文件的大小会发生明显的变化。 精简工具：JSMin 精简CSS 思路：合并相同的类、移除不用的类、移除注释和空白、使用缩写（用“#606”代替“#660066”）、移除不必要的字符串（用“0”代替“0px”）等。 结束语 人在做事天在看！只要我们付出了努力，肯定会得到相应的回报！ 记：今天北京下雪了 2009.2.17 * * 性能黄金法则 只有10%-20%的最终用户响应时间花在了下载HTML文档上，其余的80%-90%时间花在了下载页面中的所有组件上。 如：图片、FLASH *