JS 网站性能优化笔记


Posted in PHP onMay 24, 2011

1. 除去JavaScript注释

除了注释,其他所有的 // or /* */ 注释都可以安全删除,因为它们对于最终使用者来说没有任何意义。

2. 除去JavaScript中的空白区域

如:x = x + 1;  可以简短得写成:x=x+1;  。

3. 进行代码优化

简单的方法如除去暗示的(implied)分号,某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码。一些简略的表达方式也会产生很好的优化,例如:

x=x+1;

可以写成:

x++;

不过得小心谨慎,不然代码很容易出错。

4. 重命名用户自定义的变量和函数

为了阅读方便,我们都知道在脚本中应该使用象sumTotal这样的变量而不是s。不过,考虑到下载的速度,sumTotal这个变量就显得冗长了。这个长度对于最终使用者来说没有意义,但对浏览器下载则是个负担。这个时候s就成为较好的选择了。先写好方便阅读的代码,然后再使用一些工具来处理以供交付。这种处理方式在这里再一次展示了其价值所在。将所有的名称都重新用一个或两个字母来命名将带来显著的改善。

5. 改写内建(built-in)对象

长长用户变量名会造成JavaScript代码过长,除此之外,内建(built-in)对象(比如Window、Document、Navigator等)也是原因之一。例如:

alert(window.navigator.appName);
alert(window.navigator.appVersion);
alert(window.navigator.userAgent);

可以改写成如下简短的代码:

w=window;n=w.navigator;a=alert;
a(n.appName);
a(n.appVersion);
a(n.userAgent);

如果这几个对象使用频繁的话,这样改写带来的好处就不言而喻了。事实上这些对象也的确经常被调用。然而我要提醒的是,如果Window或 Navigator对象仅仅被使用了一次的话,这样的替换反而使代码变得更长。这个技巧带来一个对象更名后脚本执行效率的问题:除了代码长短上带来的好处,这种改写更名实际上还会稍微的提高一点脚本执行的速度,因为这些对象将会被放在所有被调用对象中比较靠前的位置。JavaScript游戏开发程序员使用这个技巧已经有多年了,下载和执行速度都会有所提高,并且对本地浏览器的内存花销也会降低,可谓一石三鸟。

6. 重构<script>和<style> 调用方式来优化请求次数

我们常常在一个HTML文件头中看到这样标记代码:

<script src="/scripts/rollovers.js"></script>
<script src="/scripts/validation.js"></script>
<script src="/scripts/tracking.js"></script>

大多数情况下,上述代码应该被简化成:

<script src="/0/g.js"></script>

其中g.js包含了所有供全局使用的函数。虽然把脚本文件分成三份对于维护来说是有道理的,但对于代码的传输则没有意义。单个的脚本下载要比三个分离的请求高效的多,并且这也同时简化了markup代码的长度。

7. 合并你的javascript文件

尽可能的减少HTTP的Request请求数。

8. 将脚本放到网页底部

    脚本一般是用来于用户交互的。所以如果页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和CSS正好相反,脚本应该放在页面的底部。

    PHP 相关文章推荐
    php 生成随机验证码图片代码
    Feb 08 PHP
    php select,radio和checkbox默认选择的实现方法
    May 15 PHP
    php自定义函数之递归删除文件及目录
    Aug 08 PHP
    PHP字符编码问题之GB2312 VS UTF-8解决方法
    Jun 23 PHP
    PHP数组实例总结与说明
    Aug 23 PHP
    php安全配置 如何配置使其更安全
    Dec 16 PHP
    php实现简单洗牌算法
    Jun 18 PHP
    php foreach正序倒序输出示例代码
    Jul 01 PHP
    php返回字符串中所有单词的方法
    Mar 09 PHP
    如何用PHP做到页面注册审核
    Mar 02 PHP
    php在windows环境下获得cpu内存实时使用率(推荐)
    Feb 08 PHP
    PHP观察者模式实例分析【对比JS观察者模式】
    May 22 PHP
    PHP文件打开、关闭、写入的判断与执行代码
    May 24 #PHP
    php Rename 更改文件、文件夹名称
    May 24 #PHP
    php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
    May 24 #PHP
    php 定界符格式引起的错误
    May 24 #PHP
    php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
    May 24 #PHP
    mac下使用brew配置环境的步骤分享
    May 23 #PHP
    PHP取得一个类的属性和方法的实现代码
    May 22 #PHP
    You might like
    纯真IP数据库的应用 IP地址转化成十进制
    2009/06/14 PHP
    使用PHP备份MySQL和网站发送到邮箱实例代码
    2013/11/28 PHP
    Javascript常用运算符(Operators)-javascript基础教程
    2007/12/14 Javascript
    File文件控件,选中文件(图片,flash,视频)即立即预览显示
    2009/04/09 Javascript
    JavaScript 设计模式学习 Factory
    2009/07/29 Javascript
    一些实用的jQuery代码片段收集
    2011/07/12 Javascript
    jQuery 开发者应该注意的9个错误
    2012/05/03 Javascript
    jQuery入门基础知识学习指南
    2015/08/14 Javascript
    浅析JavaScript作用域链、执行上下文与闭包
    2016/02/01 Javascript
    jquery+ajax+text文本框实现智能提示完整实例
    2016/07/09 Javascript
    javascript加减乘除的简单实例
    2016/07/12 Javascript
    图文详解Javascript中的上下文和作用域
    2017/02/15 Javascript
    详解微信小程序 template添加绑定事件
    2017/06/23 Javascript
    微信小程序wx:for和wx:for-item的用法详解
    2018/04/01 Javascript
    js中时间格式化的几种方法
    2018/07/22 Javascript
    vue 弹出遮罩层样式实例
    2020/07/22 Javascript
    Python实现端口复用实例代码
    2014/07/03 Python
    Swift中的协议(protocol)学习教程
    2016/07/08 Python
    Python中的异常处理相关语句基础学习笔记
    2016/07/11 Python
    Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
    2018/02/23 Python
    利用Python如何实现数据驱动的接口自动化测试
    2018/05/11 Python
    解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
    2018/06/13 Python
    修复 Django migration 时遇到的问题解决
    2018/06/14 Python
    python关闭占用端口方式
    2019/12/17 Python
    python中selenium库的基本使用详解
    2020/07/31 Python
    python中@contextmanager实例用法
    2021/02/07 Python
    html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
    2013/11/07 HTML / CSS
    英国领先的汽车轮胎和快速健康中心:Kwik Fit
    2017/10/29 全球购物
    英国电子专家:maplin
    2019/09/04 全球购物
    MYSQL基础面试题
    2012/05/13 面试题
    致跳远运动员加油稿
    2014/02/11 职场文书
    学校机关党总支领导班子整改工作方案
    2014/10/26 职场文书
    风之谷观后感
    2015/06/11 职场文书
    2016年教育局“我们的节日——端午节”主题活动总结
    2016/04/01 职场文书
    高效笔记技巧分享:学会这些让你不再困扰
    2019/09/04 职场文书
    redis cluster支持pipeline的实现思路
    2021/06/23 Redis