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读MYSQL中文乱码的解决方法
    Dec 17 PHP
    dedecms 制作模板中使用的全局标记图文教程
    Mar 11 PHP
    PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
    Oct 11 PHP
    用PHP实现递归循环每一个目录
    Aug 08 PHP
    PHP删除数组中的特定元素的代码
    Jun 28 PHP
    php去除换行符的方法小结(PHP_EOL变量的使用)
    Feb 16 PHP
    php页面防重复提交方法总结
    Nov 25 PHP
    destoon在360浏览器下出现用户被强行注销的解决方法
    Jun 26 PHP
    php 模拟 asp.net webFrom 按钮提交事件实例
    Oct 13 PHP
    PHP+Javascript实现在线拍照功能实例
    Jul 18 PHP
    PHP全局变量与超级全局变量区别分析
    Apr 01 PHP
    php+ajax实现仿百度查询下拉内容功能示例
    Oct 20 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
    joomla jce editor 解决上传中文名文件失败问题
    2013/06/09 PHP
    PHP中$GLOBALS与global的区别详解
    2019/03/21 PHP
    PHP面向对象程序设计之构造方法和析构方法详解
    2019/06/13 PHP
    JavaScript DOM 学习第二章 编辑文本
    2010/02/19 Javascript
    JS简单的图片放大缩小的两种方法
    2013/11/11 Javascript
    js中reverse函数的用法详解
    2013/12/26 Javascript
    Jquery简单分页实现方法
    2015/07/24 Javascript
    js获取及修改网页背景色和字体色的方法
    2015/12/29 Javascript
    javascript实现可键盘控制的抽奖系统
    2016/03/10 Javascript
    浅谈jQuery中的eq()与DOM中element.[]的区别
    2016/10/28 Javascript
    jQuery Ajax File Upload实例源码
    2016/12/12 Javascript
    JS调用Android、Ios原生控件
    2017/01/06 Javascript
    详解Vue 动态添加模板的几种方法
    2017/04/25 Javascript
    js+html5实现复制文字按钮
    2017/07/15 Javascript
    JS实现的缓冲运动效果示例
    2018/04/30 Javascript
    微信小程序实现弹出菜单功能
    2018/06/12 Javascript
    微信小程序bindinput与bindsubmit的区别实例分析
    2019/04/17 Javascript
    JS检索下拉列表框中被选项目的索引号(selectedIndex)
    2019/12/17 Javascript
    详解搭建一个vue-cli的移动端H5开发模板
    2020/01/17 Javascript
    [46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
    2016/03/02 DOTA
    使用PDB简单调试Python程序简明指南
    2015/04/25 Python
    Python删除windows垃圾文件的方法
    2015/07/14 Python
    python调试神器PySnooper的使用
    2019/07/03 Python
    关于PyTorch 自动求导机制详解
    2019/08/18 Python
    Python数组并集交集补集代码实例
    2020/02/18 Python
    pandas dataframe 中的explode函数用法详解
    2020/05/18 Python
    html5 冒号分隔符对齐的实现
    2019/07/31 HTML / CSS
    使用Html5中的cavas画一面国旗
    2019/09/25 HTML / CSS
    美国时尚配饰品牌:Dooney & Bourke
    2017/11/14 全球购物
    财会自我鉴定范文
    2013/12/27 职场文书
    党性心得体会
    2014/09/03 职场文书
    辞职书格式样本
    2015/02/26 职场文书
    2015年治庸问责工作总结
    2015/07/27 职场文书
    新党员入党决心书
    2015/09/22 职场文书
    《普罗米修斯》教学反思
    2016/02/22 职场文书
    Springboot集成阿里云OSS上传文件系统教程
    2021/06/28 Java/Android