WEB前端优化之内容篇

WEB前端优化之内容篇

Web前端优化过程中难免对相关的前台内容进行重新安排。其中主要的一些点如下：

1尽量减少 HTTP 请求 (Make Fewer HTTP Requests)

作为第一条，可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析，有很大一部分用户访问会因为这一条而取得最大受益。默认情况下，一个浏览器（以IE为例）只能同时有两个请求，即存在两个下载。有几种常见的方法能切实减少 HTTP 请求：

1.1合并文件

比如把多个 CSS 文件合成一个，把多个JavaScript合并成一个等。 将多个组件合并后可以减少请求数。

1.2 图片地图

即使用图片地图的方式，将同一个张图片上放置不同的URL，这种方式就可以减少对于图片的请求。经测试，获取图片地图的时间比获取每个单独的图片时间上要快56%。图片地图有两种方式，一是服务器端图片地图，一是客户端图片地图。服务器端实现方式即将用户点击的XY坐标传入服务器，然后由服务器端映射相应的操作。客户端的方式即在前台用MAP标签来实现。图片地图的方式，使编程维护变得困难了许多。

1.3 CSS Sprites

和图片地图一样，它也可以实现合并图片，而且在方式上更加灵活，利用 CSS background 相关元素进行背景图绝对定位；参见：《CSS Sprites: Image Slicing's Kiss of Death》。如果需要在页面中为背景、按钮、导航栏、链接等提供大量图片，CSS Sprites绝对是一种优秀的解决方案。

1.4 内联图象

使用“data: URL scheme”在实际的页面嵌入图像数据。平时我们常见的是：http:,ftp:,mailto:等几种模式，实际上data:URL模式早在1995年已经提出，它表示将小块数据直接融入到链接URL中。其模式如下：

    data:[<mediatype>][;base64],<data>

第一个参数表示文件格式，如：image/gif。

可惜的是，目前IE并不支持该模式。另外数据大小也受到限制。

2减少 DNS 查找 (Reduce DNS Lookups)

Internet是通过IP地址来查找服务器的，在实际的工作过程中在网站域名和IP之间建立了一个DNS服务器来将域名解析为IP地址。DNS也是有开销的。一般情况下浏览器查找一个给定的主机IP地址的时间是20~120ms。为了养活DNS查找过程中所花费的时间，需要采取以下一些技术：

2.1DNS缓存

DNS查找可以缓存起来提高性能，在用户计算机上，一个主机名被解析后相应的DNS信息会被存储在操作系统的DNS缓存中，之后使用时就可以减少所需要的时间了。另外一些浏览器也有相应的DNS缓存功能。但是缓存的DNS数量是有限的。一般情况下操作系统在考虑TTL值，而浏览器会忽略该值而设置自己的时间。

2.2TTL

DNS缓存对带来一些系统消耗，同时服务器的IP地址并不一定是一尘不变的。服务器可以表明记录可以被缓存多久，查找返回的DNS记录包含了一个存活时间（Time-to-live，TTL）值，它表明了客户端可以对该记录缓存多久。一般情况下可以设置为1天。

3避免重定向 (Avoid Redirects)

不是绝对的避免，尽量减少。重定向会减慢页面的显示速度。另外，应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ，就能有效避免一次重定向。http://www.dbanotes.net/arch 与 http://www.dbanotes.net/arch/ 二者之间是有差异的。前者包括了个指向后者的重定向。如果是 Apache 服务器，通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。

重定向的用处有：1）连接不同的网站；2)跟踪网站访问量，通过重定向的方式跟踪很灵活。3）统计网站出口流量。这在搜索引擎中使用较多。4）美化URL。使用重定向后URL地址可以看起来更加美观，便于记忆。

4使得 Ajax 可缓存 (Make Ajax Cacheable)

响应时间对 Ajax 来说至关重要，否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。在实际中，对一些变化较少的AJAX请求优化，另外个性化和动态的本质因当反应在优化的本质中。实现方式之一是将查询字符串中带入适当的参数。一般情况下实现该缓存的一个方式是使用一个长久的Expire头。

5延迟载入组件 (Post-load Components)

       对于某些组件，在页面一开始出现的时候并没有被使用到，对于这部分组件可以采用延迟载入的方式。具体实现方式可以采用隐藏IFRAME或者用JAVASCRIPT实现。

6预载入组件 (Preload Components)

对即将使用的组件，可以预先载入。上面两条严格说来，都是属于异步这个思想灵活运用的事儿。

7减少 DOM 元素数量 (Reduce the Number of DOM Elements)

       DOM元素太多全导致IE渲染的较慢，给用户的体验不好。在前面尽面中尽量减少DOM元素数量。

8切分组件到多个域 (Split Components Across Domains)

主要的目的是提高页面组件并行下载能力。但不要跨太多域名，否则就和第二条有些冲突了。这一点来源于IE对同一个域的请求，同时只能有两个。可以利用CDN网络或者其他分布式计算网络来实现。

9最小化 iframe 的数量 (Minimize the Number of iframes)

熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处，也有其弊端，一分为二看问题吧。

10杜绝 http 404 错误 (No 404s)

对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误，亦能提升用户体验。值得一提的是，CSS 与 Java Script 引起的 404 错误因为定位稍稍"难"一点而往往容易被忽略。

11移出重复的组件

       由于网站开发一般情况下都不是一个人完成的，因此在网页中往往出现了重复脚本，从HTML代码，到图片、CSS、JavaScript等，都有可能出现重复。重复的组件不仅浪费了带宽，重复提交了HTTP请求，同时JavaScript脚本还有可能被重复执行了。因此，为了给来一个比较好的前台浏览器显示，应当使页面只包含必要的组件且只包含一次。

1．http://www.dbanotes.net.

2．Steve Souders．《高性能网站建设指南》