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抓取https的内容的代码
    Apr 06 PHP
    初学PHP的朋友 经常问的一些问题。不断更新
    Aug 11 PHP
    PHP反转字符串函数strrev()函数的用法
    Feb 04 PHP
    php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
    Jul 18 PHP
    PHP访问数据库集群的方法小结
    Mar 14 PHP
    php抽奖概率算法(刮刮卡,大转盘)
    Apr 17 PHP
    PHP基于接口技术实现简单的多态应用完整实例
    Apr 26 PHP
    php将html转为图片的实现方法
    May 19 PHP
    PHP实现将多个文件中的内容合并为新文件的方法示例
    Jun 10 PHP
    thinkPHP多表查询及分页功能实现方法示例
    Jul 03 PHP
    php设计模式之职责链模式定义与用法经典示例
    Sep 19 PHP
    php的RSA加密解密算法原理与用法分析
    Jan 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 日期时间函数的高级应用技巧
    2009/10/10 PHP
    深入php socket的讲解与实例分析
    2013/06/13 PHP
    使用gd库实现php服务端图片裁剪和生成缩略图功能分享
    2013/12/25 PHP
    PHP设计模式之单例模式原理与实现方法分析
    2018/04/25 PHP
    Thinkphp集成抖音SDK的实现方法
    2020/04/28 PHP
    thinkphp5.1框架模板赋值与变量输出示例
    2020/05/25 PHP
    从Ajax到JQuery Ajax学习
    2007/02/14 Javascript
    jQuery Ajax 全解析
    2009/02/08 Javascript
    javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
    2010/01/15 Javascript
    jQuery库与其他JS库冲突的解决办法
    2010/02/07 Javascript
    Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
    2013/12/30 Javascript
    js中substring和substr的定义和用法
    2014/05/05 Javascript
    浅谈javascript中自定义模版
    2015/01/29 Javascript
    浅谈javascript语法和定时函数
    2015/05/03 Javascript
    js如何打印object对象
    2015/10/16 Javascript
    Bootstrap实现圆角、圆形头像和响应式图片
    2016/12/14 Javascript
    老生常谈jquery id选择器和class选择器的区别
    2017/02/12 Javascript
    AngularJs+Bootstrap实现漂亮的计算器
    2017/08/10 Javascript
    Python实现各种排序算法的代码示例总结
    2015/12/11 Python
    Python numpy 常用函数总结
    2017/12/07 Python
    selenium+python实现自动登录脚本
    2018/04/22 Python
    python 对txt中每行内容进行批量替换的方法
    2018/07/11 Python
    Django Rest framework之权限的实现示例
    2018/12/17 Python
    Python获取数据库数据并保存在excel表格中的方法
    2019/06/12 Python
    python3.4+pycharm 环境安装及使用方法
    2019/06/13 Python
    浅析PEP570新语法: 只接受位置参数
    2019/10/15 Python
    python内打印变量之%和f的实例
    2020/02/19 Python
    如何基于python把文字图片写入word文档
    2020/07/31 Python
    Html5原创俄罗斯方块(基于canvas)
    2019/01/07 HTML / CSS
    HTML5实现移动端弹幕动画效果
    2019/08/01 HTML / CSS
    从当地商店送来的杂货:Instacart
    2018/08/19 全球购物
    碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
    2019/10/18 全球购物
    工作评语大全
    2014/04/26 职场文书
    商务司机岗位职责
    2015/04/10 职场文书
    小学教师师德培训心得体会
    2016/01/09 职场文书
    如何用RabbitMQ和Swoole实现一个异步任务系统
    2021/05/29 PHP