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如何编写易读的代码
    Jul 10 PHP
    php的chr和ord函数实现字符加减乘除运算实现代码
    Dec 05 PHP
    三个类概括PHP的五种设计模式
    Sep 05 PHP
    解析php开发中的中文编码问题
    Aug 08 PHP
    php四种基础算法代码实例
    Oct 29 PHP
    PHP安全的URL字符串base64编码和解码
    Jun 19 PHP
    php常用的url处理函数总结
    Nov 19 PHP
    thinkPHP订单数字提醒功能的实现方法
    Dec 01 PHP
    PHP+mysql实现从数据库获取下拉树功能示例
    Jan 06 PHP
    php使用gd2绘制基本图形示例(直线、圆、正方形)
    Feb 15 PHP
    php面向对象之反射功能与用法分析
    Mar 29 PHP
    详解php命令注入攻击
    Apr 06 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
    Laravel路由研究之domain解决多域名问题的方法示例
    2019/04/04 PHP
    php+redis实现消息队列功能示例
    2019/09/19 PHP
    laravel框架查询数据集转为数组的两种方法
    2019/10/10 PHP
    用jscript启动sqlserver
    2007/06/21 Javascript
    纯JS代码实现一键分享功能
    2016/04/20 Javascript
    Angularjs使用ng-repeat中$even和$odd属性的注意事项
    2016/12/31 Javascript
    JavaScript编写九九乘法表(两种任选)
    2017/02/04 Javascript
    JavaScript的继承实现小结
    2017/05/07 Javascript
    jQuery中的deferred对象和extend方法详解
    2017/05/08 jQuery
    详解Vue 多级组件透传新方法provide/inject
    2018/05/09 Javascript
    详解微信JS-SDK选择图片遇到的坑
    2018/08/15 Javascript
    完美解决vue 中多个echarts图表自适应的问题
    2020/07/19 Javascript
    在Python的Django框架中包装视图函数
    2015/07/20 Python
    用Python的Flask框架结合MySQL写一个内存监控程序
    2015/11/07 Python
    Python编程中的文件读写及相关的文件对象方法讲解
    2016/01/19 Python
    Python 常用的安装Module方式汇总
    2017/05/06 Python
    django输出html内容的实例
    2018/05/27 Python
    详解python 注释、变量、类型
    2018/08/10 Python
    Python-copy()与deepcopy()区别详解
    2019/07/12 Python
    python3 求约数的实例
    2019/12/05 Python
    Python实现隐马尔可夫模型的前向后向算法的示例代码
    2019/12/31 Python
    python实现斗地主分牌洗牌
    2020/06/22 Python
    python使用QQ邮箱实现自动发送邮件
    2020/06/22 Python
    小结Python的反射机制
    2020/09/28 Python
    scrapy-redis分布式爬虫的搭建过程(理论篇)
    2020/09/29 Python
    英国最大的女士服装零售商:Bonmarché
    2017/08/17 全球购物
    英国最大的海报商店:GB Posters
    2018/03/20 全球购物
    乐高瑞士官方商店:LEGO CH
    2020/08/16 全球购物
    应聘护理专业毕业自荐书范文
    2014/02/12 职场文书
    个人查摆问题自查报告
    2014/10/16 职场文书
    医院领导班子四风问题对照检查材料
    2014/10/26 职场文书
    《折线统计图》教学反思
    2016/02/22 职场文书
    如何用Laravel包含你自己的帮助函数
    2021/05/27 PHP
    8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
    2021/05/28 Python
    使用python绘制分组对比柱状图
    2022/04/21 Python
    MySQL 条件查询的常用操作
    2022/04/28 MySQL