主页 >> 建站优化 > 减少HTTP请求-前端优化一

2014/09/10 | 星期三 分类:建站优化 | 没有评论 标签: , | 作者: | 1,023 views

减少HTTP请求-前端优化一

关于前端性能优化的问题,分几篇讲解,对于难理解将另写Blog,后续不断加链接更新

前端优化军规,罗列如下:
1.减少HTTP请求
2.正确理解重绘Repaint 和 重排Reflow
3.减少对DOM的操作
4.使用JSON格式来进行数据交换
5.高效使用HTML标签和CSS样式 
6.使用CDN加速(算是前端一种).
7.将CSS和JS放到外部文件中引用,CSS放头,JS放尾;
8.精简CSS和JS文件(文件压缩)
9.图片优化,压缩图片和使用图片Sprite技术
10.注意控制Cookie大小和污染
11.使得 Ajax 可缓存 (Make Ajax Cacheable)
12.延迟载入组件 (Post-load Components)
13.预载入组件 (Preload Components)
14.避免重定向 (Avoid Redirects)
15.杜绝 http 404 错误
16.最小化 iframe 的数量 (Minimize the Number of iframes)

标注:
11.响应时间对 Ajax 来说至关重要,否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。
12.13 这两条属于异步这个思想灵活运用。
14.不是绝对的避免,尽量减少。另外,应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ,就能有效避免一次重定向。http://www.seedpaddy.com/blog 与 http://www.dbanotes.net/blog/ 二者之间是有差异的。如果是 Apache 服务器,通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。
15.对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误,亦能提升用户体验。值得一提的是,CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。
16.熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处,也有其弊端,请一分为二看此问题。.

前端优化之一 减少HTTP请求:

在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。

一个正常HTTP请求的流程简述:如在浏览器中输入”www.seedpaddy.com”并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。

当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。

另外:网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快;所以,请减少HTTP请求。

解决方法:合并图片(css sprites),图像地图,合并CSS和JS文件;图片较多的页面也可以使用 延时加载(lazy Load) 等技术进行优化。

参考:http://www.cnblogs.com/Darren_code/archive/2011/12/31/property.html

  • 本文目前尚无任何评论.
    1. 本文目前尚无任何 trackbacks 和 pingbacks.