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 第三节 变量介绍
    Apr 28 PHP
    PHP生成唯一的促销/优惠/折扣码(附源码)
    Dec 28 PHP
    php二维数组排序与默认自然排序的方法介绍
    Apr 27 PHP
    PHP基础之运算符的使用方法
    Apr 28 PHP
    探讨php中header的用法详解
    Jun 07 PHP
    php中常量DIRECTORY_SEPARATOR用法深入分析
    Nov 14 PHP
    Laravel 5框架学习之数据库迁移(Migrations)
    Apr 08 PHP
    优化WordPress的Google字体以加速国内服务器上的运行
    Nov 24 PHP
    Ubuntu中支持PHP5与PHP7双版本的简单实现
    Aug 19 PHP
    laravel 实现划分admin和home 模块分组
    Oct 15 PHP
    Laravel6.2中用于用户登录的新密码确认流程详解
    Oct 16 PHP
    Laravel修改验证提示信息为中文的示例
    Oct 23 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
    利用php+mcDropdown实现文件路径可在下拉框选择
    2013/08/07 PHP
    Yii中使用PHPExcel导出Excel的方法
    2014/12/26 PHP
    详解PHP序列化反序列化的方法
    2015/10/27 PHP
    Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
    2020/05/15 PHP
    ThinkPHP 5 AJAX跨域请求头设置实现过程解析
    2020/10/28 PHP
    网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
    2013/02/22 Javascript
    jquery mobile实现拨打电话功能的几种方法
    2013/08/05 Javascript
    Window.Open打开窗体和if嵌套代码
    2016/04/15 Javascript
    js动态添加的DIV中的onclick事件简单实例
    2016/07/25 Javascript
    JS身份证信息验证正则表达式
    2017/06/12 Javascript
    把JavaScript代码改成ES6语法不完全指南(分享)
    2017/09/10 Javascript
    解析Vue2 dist 目录下各个文件的区别
    2017/11/22 Javascript
    基于JavaScript中标识符的命名规则介绍
    2018/01/06 Javascript
    Vue.js进阶知识点总结
    2018/04/01 Javascript
    Node.js笔记之process模块解读
    2018/05/31 Javascript
    JavaScript设计模式之装饰者模式定义与应用示例
    2018/07/25 Javascript
    js监听html页面的上下滚动事件方法
    2018/09/11 Javascript
    微信小程序返回箭头跳转到指定页面实例解析
    2019/10/08 Javascript
    Node.js API详解之 tty功能与用法实例分析
    2020/04/27 Javascript
    vue 导出文件,携带请求头token操作
    2020/09/10 Javascript
    [12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
    2014/06/10 DOTA
    python登录QQ邮箱发信的实现代码
    2013/02/10 Python
    python3库numpy数组属性的查看方法
    2018/04/17 Python
    python中利用h5py模块读取h5文件中的主键方法
    2018/06/05 Python
    python中计算一个列表中连续相同的元素个数方法
    2018/06/29 Python
    python简单验证码识别的实现方法
    2019/05/10 Python
    Django单元测试中Fixtures用法详解
    2020/02/25 Python
    CSS3 网页下拉菜单代码解释 中文翻译
    2010/02/27 HTML / CSS
    Old Navy加拿大官网:美式休闲服饰品牌
    2017/09/26 全球购物
    No7 Beauty美国官网:英国国民护肤品牌
    2019/10/31 全球购物
    美国手机支架公司:PopSockets
    2019/11/27 全球购物
    如何做好总经理助理
    2013/11/12 职场文书
    机关门卫的岗位职责
    2014/04/29 职场文书
    我的大学四年规划书范文2014
    2014/09/26 职场文书
    思想政治表现评语
    2015/01/04 职场文书
    《槐乡的孩子》教学反思
    2016/02/20 职场文书