Web 前端优化最佳实践之 JavaScript 篇

原创 2008年07月01日 10:35:00

Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条。前端优化最佳实践,最重要的还是"实践",要理解这东西容易得很,关键是要去"实践",去"执行",去"反馈",去获取受益。

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了)。所以,把它扔到最后面去处理。对于一些功能性的脚本,可能实现起来有些两难。不过对于国内网站来说,有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说,绝对可行的建议,放到页面最底下。

2. Make JavaScript and CSS External

参见 CSS 篇的描述

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

参见 CSS 篇的描述

4. 移除重复脚本 (Remove Duplicate Scripts)

对于一些历史遗留站点或是论坛类的网站来说,这倒是比较常见的。接手维护人前后变化过多,每个人都有自己的一套。这就会带来一些潜在的麻烦。

5. 减少 DOM 访问 (Minimize DOM Access)

有三条指导建议:
  • 缓存已经访问过的元素 (Cache references to accessed elements)
  • "离线"更新节点, 再将它们添加到树中 (Update nodes "offline" and then add them to the tree)
  • 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿 (Avoid fixing layout with JavaScript)

6. Develop Smart Event Handlers

除了英文解释外,这里也提醒一下注意关于 Java Script 内存泄漏的问题。

另外推荐一篇《如何优化 JavaScript 脚本的性能》.

后记1) :整理得差不多之后,发现网络上已经有一篇 《Yahoo!网站性能最佳体验的34条黄金守则》,是翻译稿。看来我做了一部分重复劳动。

后记 2):CSS / JavaScript 都有优化规则。但似乎缺少了对 Flash 的优化实践。

Web 前端优化最佳实践之 CSS 篇

原贴:http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_css.html Web 前端优化最佳实践之 C...
  • chinalinuxzend
  • chinalinuxzend
  • 2008年06月29日 15:55
  • 516

Web 前端优化最佳实践之Content篇

1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests)   作为第一条,可能也是最重要的一条。根据 Yahoo!研究团队的数据分析,有很大一部分用户访问会因为这一条而取...
  • looksun
  • looksun
  • 2013年01月15日 13:11
  • 699

Web 前端优化最佳实践之图象篇

作者: Fenng | 可以转载, 转载时务必以超链接形式标明文章原始出处和作者信息及版权声明网址: http://www.dbanotes.net/web/best_practices_for_sp...
  • Fenng
  • Fenng
  • 2008年07月01日 17:29
  • 4265

Web 前端优化最佳实践之 内容篇

http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_content.html Web 前...
  • huaweitman
  • huaweitman
  • 2016年09月24日 21:08
  • 158

Web前端优化最佳实践之Content篇

原文:http://www.bopor.com/?p=1073 1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条。根据 Yaho...
  • dknypxt
  • dknypxt
  • 2010年08月11日 09:43
  • 772

Web 前端优化最佳实践之 Server 篇

原贴:http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server.html Web 前端优化最佳实践...
  • chinalinuxzend
  • chinalinuxzend
  • 2008年06月24日 20:57
  • 676

Web 前端优化最佳实践之 Cookie 篇

作者: Fenng | 可以转载, 转载时务必以超链接形式标明文章原始出处和作者信息及版权声明网址: http://www.dbanotes.net/web/best_practices_for_sp...
  • Fenng
  • Fenng
  • 2008年06月25日 10:26
  • 1840

Web 前端优化最佳实践之 Mobile(iPhone) 篇

作者: Fenng | 可以转载, 转载时务必以超链接形式标明文章原始出处和作者信息及版权声明网址: http://www.dbanotes.net/web/best_practices_for_sp...
  • Fenng
  • Fenng
  • 2008年07月02日 13:35
  • 2396

Web 前端优化最佳实践之内容篇

原贴:http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_content.html Web 前端优化最佳实...
  • chinalinuxzend
  • chinalinuxzend
  • 2008年06月24日 20:56
  • 794

WEB前端开发最佳实践(1)

前端代码重构 删除无用代码,精简代码(不起作用的CSS样式和废弃的JavaScript函数) 前端代码规范化,把CSS代码放到独立的文件中,在JS定义局部变量,把部分全局变量改变成局部变量 整理基础类...
  • qq_17358905
  • qq_17358905
  • 2016年05月08日 10:17
  • 1506
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web 前端优化最佳实践之 JavaScript 篇
举报原因:
原因补充:

(最多只允许输入30个字)