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和ACCESS写聊天室(八)
    Oct 09 PHP
    实用函数7
    Nov 08 PHP
    让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
    Aug 08 PHP
    9个实用的PHP代码片段分享
    Jan 22 PHP
    PHP记录搜索引擎蜘蛛访问网站足迹的方法
    Apr 15 PHP
    PHP函数nl2br()与自定义函数nl2p()换行用法分析
    Apr 02 PHP
    Yii实现文章列表置顶功能示例
    Oct 18 PHP
    php array_values 返回数组的值实例详解
    Nov 17 PHP
    Zend Framework入门教程之Zend_Registry组件用法详解
    Dec 09 PHP
    YII框架模块化处理操作示例
    Apr 26 PHP
    php设计模式之原型模式分析【星际争霸游戏案例】
    Mar 23 PHP
    PHPExcel实现的读取多工作表操作示例
    Apr 14 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
    世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
    2021/03/06 咖啡文化
    一个MYSQL操作类
    2006/11/16 PHP
    关于PHP的相似度计算函数:levenshtein的使用介绍
    2013/04/15 PHP
    解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
    2013/07/03 PHP
    php实现微信企业转账功能
    2018/10/02 PHP
    PHP的介绍以及优势详细分析
    2019/09/05 PHP
    php查看一个变量的占用内存的实例代码
    2020/03/29 PHP
    JavaScript 组件之旅(一)分析和设计
    2009/10/28 Javascript
    jQuery EasyUI API 中文文档 - ComboGrid 组合表格
    2011/10/13 Javascript
    iframe调用父页面函数示例详解
    2014/07/17 Javascript
    node.js中的fs.open方法使用说明
    2014/12/17 Javascript
    Nodejs Express4.x开发框架随手笔记
    2015/11/23 NodeJs
    jQuery获取attr()与prop()属性值的方法及区别介绍
    2016/07/06 Javascript
    JS控件bootstrap suggest plugin使用方法详解
    2017/03/25 Javascript
    Js中async/await的执行顺序详解
    2017/09/22 Javascript
    Vue按需加载的具体实现
    2017/12/02 Javascript
    vue axios数据请求get、post方法及实例详解
    2018/09/11 Javascript
    nodejs实现日志读取、日志查找及日志刷新的方法分析
    2019/05/20 NodeJs
    2020京东618叠蛋糕js脚本(亲测好用)
    2020/06/02 Javascript
    js实现小球在页面规定的区域运动
    2020/06/16 Javascript
    [43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
    2019/09/05 DOTA
    编写简单的Python程序来判断文本的语种
    2015/04/07 Python
    redis之django-redis的简单缓存使用
    2018/06/07 Python
    Python中浅拷贝copy与深拷贝deepcopy的简单理解
    2018/10/26 Python
    Django认证系统实现的web页面实现代码
    2019/08/12 Python
    python生成任意频率正弦波方式
    2020/02/25 Python
    html5手机键盘弹出收起的处理
    2020/01/20 HTML / CSS
    美国杂志订阅折扣与优惠网站:Magazines.com
    2016/08/31 全球购物
    初始化了一个没有run()方法的线程类,是否会出错?
    2014/03/27 面试题
    Java面试题:Java类的Main方法如果是Private将会怎么样
    2016/08/18 面试题
    继电保护工岗位职责
    2014/01/05 职场文书
    银行柜员与客户起冲突检讨书
    2014/09/27 职场文书
    导师鉴定意见
    2015/06/05 职场文书
    班主任班级管理心得体会
    2016/01/07 职场文书
    python利用pandas分析学生期末成绩实例代码
    2021/07/09 Python
    Java中CyclicBarrier和CountDownLatch的用法与区别
    2021/08/23 Java/Android