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 相关文章推荐
    PHP5 面向对象(学习记录)
    Dec 02 PHP
    php in_array 函数使用说明与in_array需要注意的地方说明
    Apr 13 PHP
    php 无法加载mysql的module的时候的配置的解决方案引发的思考
    Jan 27 PHP
    codeigniter显示所有脚本执行时间的方法
    Mar 21 PHP
    PHP简单生成缩略图相册的方法
    Jul 29 PHP
    php自定义类fsocket模拟post或get请求的方法
    Jul 31 PHP
    PHP简单判断字符串是否包含另一个字符串的方法
    Mar 25 PHP
    php自动载入类用法实例分析
    Jun 24 PHP
    php each 返回数组中当前的键值对并将数组指针向前移动一步实例
    Nov 22 PHP
    在Laravel中使用DataTables插件的方法
    May 29 PHP
    PHP PDOStatement::fetchColumn讲解
    Jan 31 PHP
    PHP使用HTML5 FileApi实现Ajax上传文件功能示例
    Jul 01 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 define函数的使用说明
    2008/08/27 PHP
    Linux Apache PHP Oracle 安装配置(具体操作步骤)
    2013/06/17 PHP
    获取URL文件名后缀
    2013/10/24 PHP
    WordPress中登陆后关闭登陆页面及设置用户不可见栏目
    2015/12/31 PHP
    PHP中header用法小结
    2016/05/23 PHP
    postfixadmin忘记密码后的修改密码方法详解
    2016/07/20 PHP
    thinkphp隐藏index.php/home并允许访问其他模块的实现方法
    2016/10/13 PHP
    laravel使用数据库测试注意事项
    2020/04/10 PHP
    JS小框架 fly javascript framework
    2009/11/26 Javascript
    利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
    2011/10/22 Javascript
    再说AutoComplete自动补全之实现原理
    2011/11/05 Javascript
    ToolTips JQEURY插件之简洁小提示框效果
    2011/11/19 Javascript
    javascript加号&quot;+&quot;的二义性说明
    2013/03/04 Javascript
    showModelDialog弹出文件下载窗口的使用示例
    2013/11/19 Javascript
    巧用局部变量提升javascript性能
    2014/02/24 Javascript
    javascript实现完美拖拽效果
    2015/05/06 Javascript
    jquery简单实现外部链接用新窗口打开的方法
    2015/05/30 Javascript
    jQuery实现类似淘宝网图片放大效果的方法
    2015/07/08 Javascript
    Seajs 简易文档 提供简单、极致的模块化开发体验
    2016/04/13 Javascript
    PHP捕捉异常中断的方法
    2016/10/24 Javascript
    Vue的移动端多图上传插件vue-easy-uploader的示例代码
    2017/11/27 Javascript
    微信小程序HTTP接口请求封装的实现
    2019/02/21 Javascript
    浅入深出Vue之自动化路由
    2019/08/06 Javascript
    JavaScript经典案例之简易计算器
    2020/08/24 Javascript
    Vue页面渲染中key的应用实例教程
    2021/01/12 Vue.js
    在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
    2015/04/09 Python
    Python基于列表list实现的CRUD操作功能示例
    2018/01/05 Python
    python爬虫爬取淘宝商品信息(selenum+phontomjs)
    2018/02/24 Python
    Python post请求实现代码实例
    2020/02/28 Python
    Python run()函数和start()函数的比较和差别介绍
    2020/05/03 Python
    html5小技巧之通过document.head获取head元素
    2014/06/04 HTML / CSS
    html5 移动端视频video的android兼容(去除播放控件、全屏)
    2020/03/26 HTML / CSS
    法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
    2018/07/05 全球购物
    什么时候用assert
    2015/05/08 面试题
    国际贸易毕业生求职信范文
    2014/02/21 职场文书
    电钳工人个人求职信
    2014/05/10 职场文书