码迷,mamicode.com
首页 > 其他好文 > 详细

前端优化

时间:2014-10-07 00:29:32      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:http   io   os   使用   ar   java   for   strong   文件   

1. 减少HTTP 请求

2. Avoid empty src or href

   编写HTML代码和JavaScript程序的时候不要使用空的src地址。当然,记得link标签的href属性也是一样,一定不要为空值!细心,应该是前端工程师需要具备的品质之一

   规则说明中介绍得很详细,有两种情况的空src值:

  1. HTML代码中的空src值:<img src="">
  2. JavaScript代码中创建的空src值的IMG标签:var img = new Image();img.src = "";

   这两种给IMG标签设置控制的做法都会造成浏览器向你的服务器不同发出请求:

  • Internet Explorer 会发出一个指向当前页面的所在目录的请求地址。
  • Safari and Chrome 会再次请求当前页面。
  • Firefox 3或者更早的版本会跟Safari and Chrome行为一样(再次(最危险的是有可能循环)请求当前页面),而 3.5则会出现这个[bug 444931]问题,之后就不再发出请求。
  • Opera 不会做任何处理,不会发出HTTP请求。  

3. CDN 加速 所在使用CDN时候,还是建议先把CDN布署给图片,CSSJS文件 
HTML页面放在主域名上

4. Add Expires headers

5. GZIP 压缩

6. put css at top

7. put javascript at bottom

8. avoid css expressions

9. make javascript and css external

10. reduce dns lookups

11. minify javascript and css

12. avoid url redirects 避免重定向

13. Remove duplicate JavaScript and CSS 删除重复脚本和CSS

14. Configure entity tags  

Tags(Entity tags)是服务器和浏览器的一个功能,它用来判断浏览器缓存里的元素是否和原来服务器上的一致。ETags 比 last-modified date 更具有弹性,它用一个独一无二的字符串来标识一个元素的版本。如果你不想发挥Etags提供的这个弹性验证模型的优势,你最好关掉它。我不是很懂这些,所索就把它关掉了事,方法很简单,就在 .htaccess 中加一句话:FileETag none

15. Make AJAX cacheable

16. Use GET for AJAX requests

17. Reduce the number of DOM elements

18. Avoid HTTP 404 (Not Found) error

19. Reduce cookie size

20. Use cookie-free domains

21. Avoid AlphaImageLoader filter

22. Do not scale images in HTML

23. Make favicon small and cacheable

24. Post-load Components延迟加载组件

  最先加载必须的组件进行页面初始化,然后再加载其他,YUI Image Loader是很好的例子。

25.  Split Components Across Domains 主要的目的是提高页面组件并行下载能力。但不要跨太多域名,否则就和第二条有些冲突了

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

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

前端优化

标签:http   io   os   使用   ar   java   for   strong   文件   

原文地址:http://www.cnblogs.com/terabithia/p/4001739.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!