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.ini中文版(2)
    Oct 09 PHP
    社区(php&amp;&amp;mysql)五
    Oct 09 PHP
    Windows7下PHP开发环境安装配置图文方法
    May 20 PHP
    PHP常用技巧总结(附函数代码)
    Feb 04 PHP
    PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
    Apr 08 PHP
    谈谈关于php的优点与缺点
    Apr 11 PHP
    解析php session_set_save_handler 函数的用法(mysql)
    Jun 29 PHP
    php下拉选项的批量操作的实现代码
    Oct 14 PHP
    PHP中使用glob函数实现一句话删除某个目录下的所有文件
    Jul 22 PHP
    PHP之密码加密的几种方式
    Jul 29 PHP
    PHP使用trim函数去除字符串左右空格及特殊字符实例
    Jan 07 PHP
    Smarty模板常见的简单应用分析
    Nov 15 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生成RSS订阅的方法
    2015/02/13 PHP
    PHP使用curl模拟post上传及接收文件的方法
    2016/03/04 PHP
    linux mint下安装phpstorm2020包括JDK部分的教程详解
    2020/09/17 PHP
    JS的递增/递减运算符和带操作的赋值运算符的等价式
    2007/12/08 Javascript
    onkeypress字符按键兼容所有浏览器使用介绍
    2013/04/24 Javascript
    页面元素绑定jquery toggle后元素隐藏的解决方法
    2014/03/27 Javascript
    技术男用来对妹子表白的百度首页
    2014/07/23 Javascript
    实现js保留小数点后N位的代码
    2014/11/13 Javascript
    浅谈js中变量初始化
    2015/02/03 Javascript
    javaScript实现可缩放的显示区效果代码
    2015/10/26 Javascript
    基于Node.js的强大爬虫 能直接发布抓取的文章哦
    2016/01/10 Javascript
    Js类的静态方法与实例方法区分及jQuery拓展的两种方法
    2016/06/03 Javascript
    JS刷新父窗口的几种方式小结(推荐)
    2016/11/09 Javascript
    nodejs入门教程六:express模块用法示例
    2017/04/24 NodeJs
    jquery网页加载进度条的实现
    2017/06/01 jQuery
    laravel5.3 vue 实现收藏夹功能实例详解
    2018/01/21 Javascript
    vue使用vue-i18n实现国际化的实现代码
    2018/04/08 Javascript
    React 源码中的依赖注入方法
    2018/11/07 Javascript
    JS实现页面跳转与刷新的方法汇总
    2019/08/30 Javascript
    解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
    2019/10/11 Javascript
    解决vue项目运行提示Warnings while compiling.警告的问题
    2020/09/18 Javascript
    Python实现程序的单一实例用法分析
    2015/06/03 Python
    Django shell调试models输出的SQL语句方法
    2019/08/29 Python
    python装饰器代替set get方法实例
    2019/12/19 Python
    HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
    2018/01/03 HTML / CSS
    爱尔兰最大的体育零售商:Life Style Sports
    2019/06/12 全球购物
    请说出几个常用的异常类
    2013/01/08 面试题
    应用英语专业自荐信
    2014/01/26 职场文书
    剪枝的学问教学反思
    2014/02/07 职场文书
    演讲主持词
    2014/03/18 职场文书
    股指期货心得体会
    2014/09/10 职场文书
    学生个人总结范文
    2015/02/15 职场文书
    财政局个人年终总结
    2015/03/03 职场文书
    指导老师鉴定意见
    2015/06/05 职场文书
    CSS几步实现赛博朋克2077风格视觉效果
    2021/06/16 HTML / CSS
    《勇者辞职不干了》ED主题曲无字幕动画MV公开
    2022/04/13 日漫