首页 > HTML > [转] 网页浏览毫秒必争，超强前端网页性能总结二
2014
11-05

[转] 网页浏览毫秒必争，超强前端网页性能总结二

避免404
404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。

更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。

服务器

使用CDN
再次强调第一条黄金定律，减少网页内容的下载时间。提高下载速度还可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的 下载速度。如果你的网站上有大量的静态内容，世界各地的用户都在访问，我说的是youtube么？那CDN是必不可少的。事实上大多数互联网中的巨头们都 有自己的CDN。我们自己的网站可以先通过免费的CDN供应商来分发网页资源。

添加Expires 或Cache-Control报文头
这条规则分为两个方面，

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中添加如下配制

  1. <rewrite>
  2.    <outboundRules>
  3.       <rule name=”Remove ETag”>
  4.          <match serverVariable=”RESPONSE_ETag” pattern=”.+” />
  5.          <action type=”Rewrite” value=”" />
  6.       </rule>
  7.    </outboundRules>
  8. </rewrite>

复制代码

IIS8里提供了一个简单配制来直接关闭Etag，

  1. <element name=”clientCache”>
  2.    <attribute name=”cacheControlMode” type=”enum” defaultValue=”NoControl”>
  3.           <enum name=”NoControl” value=”0″ />
  4.           <enum name=”DisableCache” value=”1″ />
  5.           <enum name=”UseMaxAge” value=”2″ />
  6.           <enum name=”UseExpires” value=”3″ />
  7.   </attribute>
  8.   <attribute name=”cacheControlMaxAge” type=”timeSpan” defaultValue=”1.00:00:00″ />
  9.   <attribute name=”httpExpires” type=”string” />
  10.   <attribute name=”cacheControlCustom” type=”string” />
  12. <attribute name=”setEtag” type=”bool” defaultValue=”false” />
  13. </element>

复制代码


尽早flush输出
网页后台程序中我们知道有个方法叫Response.Flush()，一般我们调用它都是在程序末尾，但注意这个方法可以被调用多次。目的是可以将现有的缓存中的回复内容先发给客户端，让客户端“有活干”。

那在什么时候调用这个方法比较好呢？一般情况下我们可以在对于需要加载比较多外部脚本或者样式表时可以提前调用一次，客户端收到了关于脚本或其他外部资源的链接可以并行的先发请求去下载，服务器接下来把后续的处理结果发给客户端。

使用GET Ajax请求
浏览器在实现XMLHttpRequest POST的时候分成两步，先发header，然后发送数据。而GET却可以用一个TCP报文完成请求。另外GET从语义上来讲是去服务器取数据，而 POST则是向服务器发送数据，所以我们使用Ajax请求数据的时候尽量通过GET来完成。

关于GET和POST的详细对比可以查看这里。

避免空的图片src
空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略。

浏览器如此实现也是根据RFC 3986 – Uniform Resource Identifiers标准，空的src被定义为当前页面。所以注意我们的网页中是否存在这样的代码

straight HTML

  1. <img src=””>

复制代码

JavaScript

  1. var img = new Image();
  3. 　　img.src = “”;

复制代码


Cookie

减少Cookie大小
Cookie被用来做认证或个性化设置，其信息被包含在http报文头中，对于cookie我们要注意以下几点，来提高请求的响应速度，

  • 去除没有必要的cookie，如果网页不需要cookie就完全禁掉
  • 将cookie的大小减到最小
  • 注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
  • 设置合适的过期时间，比较长的过期时间可以提高响应速度。

关于asp.net中的cookie可以参考ASP.NET Cookies Overview和Configure Use Cookies Mode for Session State (IIS 7)

页面内容使用无cookie域名
大多数网站的静态资源都没必要cookie，我们可以采用不同的domain来单独存放这些静态文件，这样做不仅可以减少cookie大小从而提高响应速 度，还有一个好处是有些proxy拒绝缓存带有cookie的内容，如果能将这些静态资源cookie去除，那就可以得到这些proxy的缓存支持。

常见的划分domain的方式是将静态文件放在static.example.com，动态内容放在www.example.com。

也有一些网站需要在二级域名上应用cookie，所有的子域都会继承，这种情况下一般会再购买一个专门的域名来存放cookie-free的静态资源。例如Yahoo!的yimg.com，YouTube的ytimg.com等。

CSS

将样式表置顶
经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。

如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来之前只好对不起观众了。

避免CSS表达式
CSS表达式可以动态的设置CSS属性，在IE5-IE8中支持，其他浏览器中表达式会被忽略。例如下面表达式在不同时间设置不同的背景颜色。

  1. background-color: expression( (new Date()).getHours()%2  ”#B8D4FF” : “#F08A00″ );

复制代码

CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。

如果想达到类似的效果我们可以通过简单的脚本做到。

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <script type=”text/javascript”>
  6. var currentTime = new Date().getHours();
  7. if (currentTime%2) {
  8.     if (document.body) {
  9.         document.body.style.background = “#B8D4FF”;
  10.     }
  11. }
  12. else {
  13.     if (document.body) {
  14.         document.body.style.background = “#F08A00″;
  15.     }
  16. }
  17. </script>
  18. </body>
  19. </html>

复制代码

最后编辑：
作者：管理员
这个作者貌似有点懒，什么都没有留下。
站内专栏

您可能还会对这些文章感兴趣！