主页 >> 建站优化 > WEB前端优化之JavaScript篇

2014/09/17 | 星期三 分类:建站优化 | 没有评论 标签: | 作者: | 962 views

WEB前端优化之JavaScript篇

WEB前端优化之JavaScript,先来两个问题:什么是JavaScript?JavaScript有什么用?

JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持.

JavaScript用途:
a.嵌入动态文本于HTML页面;
b.对浏览器事件做出响应;.
c.读写HTML元素;
d.在数据被提交到服务器之前验证数据;
e.检测访客的浏览器信息;
f.控制cookies,包括创建和修改等。

WEB前端优化之JavaScript:

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

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

2. Make JavaScript and CSS External.

剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。

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

如果没有 JavaScript 与 CSS 可能更好。但,这是不可能的,SO,尽量小点吧。语法能简写的简写。

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 脚本的性能》http://shiningray.cn/improve-javascript-performance.html ,关于 Ajax 优化指导原则,可以参见 提高 Ajax 应用程序性能,避开 Web 服务漏洞。

另外:《如何优化 JavaScript 脚本的性能》
http://shiningray.cn/improve-javascript-performance.html

参考:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_javascript.html

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