关闭

WEB前端优化之内容篇

474人阅读 评论(0) 收藏 举报

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.《高性能网站建设指南》

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6890次
    • 积分:153
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:6篇
    • 译文:0篇
    • 评论:0条
    文章分类