前端性能优化（yahoo前端性能团队总结的35条黄金定律）.doc-资料库

weixin_29344615-10646894-4744300845229384974.doc.pdf-第1页.png

第1页 / 共14页

weixin_29344615-10646894-4744300845229384974.doc.pdf-第2页.png

第2页 / 共14页

weixin_29344615-10646894-4744300845229384974.doc.pdf-第3页.png

第3页 / 共14页

weixin_29344615-10646894-4744300845229384974.doc.pdf-第4页.png

第4页 / 共14页

weixin_29344615-10646894-4744300845229384974.doc.pdf-第5页.png

第5页 / 共14页

weixin_29344615-10646894-4744300845229384974.doc.pdf-第6页.png

第6页 / 共14页

weixin_29344615-10646894-4744300845229384974.doc.pdf-第7页.png

第7页 / 共14页

weixin_29344615-10646894-4744300845229384974.doc.pdf-第8页.png

第8页 / 共14页

前端性能优化 yahoo 前端性能团队总结的 35 条黄金定律

网页内容减少 http 请求次数 80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash 等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。 1. 捆绑文件: 现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。例如在 asp.net 中可以使用 ScriptManager，asp.net MVC 中的 Bundling。 2. CSS Sprites: 就是把多个图片拼成一副图片，然后通过 CSS 来控制在什么地方具体显示这整张图片的什么位置。给大家看个熟悉的 Sprites 实例。豆瓣把他的图标集中在一起，然后我们看他如何控制只显示第一个图标的 .app-icon-read { background-position: 0 0;

} .app-icon { background : url("/pics/app/app_icons_50_5.jpg") no-repeat scroll 0 0 transparent; border-radius: 10px 10px 10px 10px; box-shadow: 1px 1px 2px #999999; display: inline-block; height : 50px; width : 50px; } 3. Image Maps：也是将多幅图拼在一起，然后通过坐标来控制显示导航。这里有个经典的例子，选中图片中的某个人就会将你带到不同的链接。 4. Inline images: 通过编码的字符串将图片内嵌到网页文本中 .sample-inline-png { padding-left: 20px; background: white url('data:image/png;base64,iVBORw0KGgoAA AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6 P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top; 减少 DNS 查询次数 DNS 查询也消耗响应时间，如果我们的网页内容来自各个不同的 domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些 domain 也需要消耗一定的时间。DNS 查询结果缓存在本地系统和浏览器中一段时间，所以 DNS 查询一般是对首次访问响应速度有所影响。下面是我清空本地 dns 后访问博客园主页 dns 的查询请求。看少去还不少哦。

避免页面跳转当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的 location 指定的地址再次发送请求，例如以下跳转回复。 HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html 当客户端遇到这种回复的时候，用户只能等待客户端再次发送请求，有的网站甚至会一直跳 n 次，跳到他想带你去的地方…当然在这个时候用户看不到任何页面内容，只有浏览器的进度条一直在刷新。缓存 Ajax Ajax 可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如 ajax 的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高 ajax 的响应速度。  添加 Expires 或 Cache-Control 报文头使回复可以被客户端缓存  压缩回复内容  减少 dns 查询  精简 javascript  避免跳转  配置 Etags

延迟加载这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。 Javascript 是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有 Javascript 的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。提前加载与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容。例如 google 会在页面加载成功之后马上去下载一个所有结果中会用到的 image sprite。有条件加载：根据用户的输入推断需要加载的内容，雅虎的示例是 search.yahoo.com，有预期的的加载：这种情况一般发生在网页重新设计时，由于用户经常访问旧网页，本地对旧的网页内容缓存充分从而显得旧网页速度很快，而新的网页内容却没有缓存，设计者可以在旧网页的内容中预先加载一些新网页中可能用到的内容，这样新的网页就会生下来一些需要下载的资源。

减少 DOM 元素数量网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500 个元素和 5000 个元素在加载速度上会有很大差别。想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出， document.getElementsByTagName('*').length 多少算是多了呢？雅虎在写这篇文章的时候号称主页只有 700 多元素，但现在接近多了一倍。我们的网页至少别比雅虎还多吧。。。根据域名划分内容浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以浏览器增大并行下载连接，但是注意控制域名使用在 2-4 个之间，不然 dns 查询也是个问题。一般网站规划会将静态资源放在类似于 static.example.com，动态内容放在 www.example.com 上。这样做还有一个好处是可以在静态的域名上避免使用 cookie。后面我们会在 cookie 的规则中提到。减少 iframe 数量使用 iframe 要注意理解 iframe 的优缺点优点  可以用来加载速度较慢的内容，例如广告。  安全沙箱保护。浏览器会对 iframe 中的内容进行安全控制。  脚本可以并行下载缺点  即使 iframe 内容为空也消耗加载时间  会阻止页面加载

 没有语义避免 404 404 我们都不陌生，代表服务器没有找到资源，我们要特别要注意 404 的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个 404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成 Javascript 去解析。服务器使用 CDN 再次强调第一条黄金定律，减少网页内容的下载时间。提高下载速度还可以通过 CDN(内容分发网络)来提升。CDN 通过部署在不同地区的服务器来提高客户的下载速度。如果你的网站上有大量的静态内容，世界各地的用户都在访问，我说的是 youtube 么？那 CDN 是必不可少的。事实上大多数互联网中的巨头们都有自己的 CDN。我们自己的网站可以先通过免费的 CDN 供应商来分发网页资源。添加 Expires 或 Cache-Control 报文头这条规则分为两个方面，  对于静态内容添加 Expires，将静态内容设为永不过期，或者很长时间以后。在 II S 中设置 Expires 可以看 Configure the HTTP Expires Response Header (I IS 7)。  对于动态内容应用合适的 Cache-Control，让浏览器根据条件来发送请求。关于 a sp.net 的 caching，可以看 asp.net cache feature 和 asp.net caching best practices。 Gzip 压缩传输文件 Gzip 通常可以减少 70%网页内容的大小，包括脚本、样式表、图片等文件。Gzip 比 deflate 更高效，主流服务器都有相应的压缩支持模块。 IIS 中内建了静态压缩和动态压缩模块，如何配制可以参考 Enable HTTP Compression of Static Content (IIS 7)和 Enable HTTP Compression of Dynamic Content (IIS 7)。值得注意的是 pdf 文件可以从需要被压缩的类型中剔除，因为 pdf 文件本身已经压缩，gzip 对其效果不大，而且会浪费 CPU。配置 ETags 虽然标题叫配制 ETags，但是这里你要根据具体情况进行一些判断。首先 Etag 简单来说是通过一个文件版本标识使得服务器可以轻松判断该请求的内容是否有所更新，如果没有就回复 304 (not modified)，从而避免下载整个文件。

但是 Etags 的版本信息即使主流服务器未能很好地支持跨服务器的判断，比如你从一个服务器集群中一台得到 Etags，然后发送到了另一台那么校验很有可能会失败。如果你遇到这样的问题，IIS 7 中可以通过如下方法将 Etag 去掉，使用 URL Rewrite，然后在 web.config 中添加如下配制 IIS8 里提供了一个简单配制来直接关闭 Etag，尽早 flush 输出网页后台程序中我们知道有个方法叫 Response.Flush()，一般我们调用它都是在程序末尾，但注意这个方法可以被调用多次。目的是可以将现有的缓存中的回复内容先发给客户端，让客户端“有活干”。那在什么时候调用这个方法比较好呢？一般情况下我们可以在对于需要加载比较多外部脚本或者样式表时可以提前调用一次，客户端收到了关于脚本或其他外部资源的链接可以并行的先发请求去下载，服务器接下来把后续的处理结果发给客户端。使用 GET Ajax 请求浏览器在实现 XMLHttpRequest POST 的时候分成两步，先发 header，然后发送数据。而 GET 却可以用一个 TCP 报文完成请求。另外 GET 从语义上来讲是去服务器取数据，而 POST 则是向服务器发送数据，所以我们使用 Ajax 请求数据的时候尽量通过 GET 来完成。

资料库

前端性能优化（yahoo前端性能团队总结的35条黄金定律）.doc

相关推荐

移动开发

热门标签

最新资料