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 类型转换函数intval
    Jun 20 PHP
    php 将bmp图片转为jpg等其他任意格式的图片
    Jun 29 PHP
    php 服务器调试 Zend Debugger 的安装教程
    Sep 25 PHP
    20个PHP常用类库小结
    Sep 11 PHP
    php中单个数据库字段多列显示(单字段分页、横向输出)
    Jul 28 PHP
    phpQuery让php处理html代码像jQuery一样方便
    Jan 06 PHP
    PHP中使用imagick实现把PDF转成图片
    Jan 26 PHP
    Laravel日志用法详解
    Oct 09 PHP
    详谈php中 strtr 和 str_replace 的效率问题
    May 14 PHP
    PHP基于socket实现客户端和服务端通讯功能
    Jul 13 PHP
    详细对比php中类继承和接口继承
    Oct 11 PHP
    one.php 多项目、函数库、类库 统一为一个版本的方法
    Aug 24 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
    Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
    2013/06/19 PHP
    Laravel 5框架学习之环境与配置
    2015/04/08 PHP
    PHP实现链式操作的三种方法详解
    2017/11/16 PHP
    一个简单的js动画效果代码
    2010/07/20 Javascript
    javascript针对DOM的应用实例(一)
    2012/04/15 Javascript
    jquery和雅虎的yql服务实现天气预报服务示例
    2014/02/08 Javascript
    字段太多jquey快速清空表单内容方法
    2014/08/21 Javascript
    创建你的第一个AngularJS应用的方法
    2015/06/16 Javascript
    利用jQuery及AJAX技术定时更新GridView的某一列数据
    2015/12/04 Javascript
    JS实现设置ff与ie元素绝对位置的方法
    2016/03/08 Javascript
    用AngularJS的指令实现tabs切换效果
    2016/08/31 Javascript
    你真的了解BOM中的history对象吗
    2017/02/13 Javascript
    Vue自定义弹窗指令的实现代码
    2018/08/13 Javascript
    Vue实现滑动拼图验证码功能
    2019/09/15 Javascript
    浅谈webpack和webpack-cli模块源码分析
    2020/01/19 Javascript
    2019最新21个MySQL高频面试题介绍
    2020/02/06 Javascript
    Vue循环遍历选项赋值到对应控件的实现方法
    2020/06/22 Javascript
    JS JQuery获取data-*属性值方法解析
    2020/09/01 jQuery
    JS highcharts动态柱状图原理及实现
    2020/10/16 Javascript
    Java 生成随机字符的示例代码
    2021/01/13 Javascript
    原生js拖拽功能制作滑动条实例代码
    2021/02/05 Javascript
    [52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
    2018/08/20 DOTA
    [01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
    2021/03/11 DOTA
    python获取指定网页上所有超链接的方法
    2015/04/04 Python
    python docx 中文字体设置的操作方法
    2018/05/08 Python
    Python3.6使用tesseract-ocr的正确方法
    2018/10/17 Python
    Python hashlib模块实例使用详解
    2019/12/24 Python
    python绘制封闭多边形教程
    2020/02/18 Python
    Python将二维列表list的数据输出(TXT,Excel)
    2020/04/23 Python
    加拿大大码女装购物网站:Penningtons
    2020/12/26 全球购物
    植树节标语
    2014/06/27 职场文书
    乡镇消防安全责任书
    2014/07/23 职场文书
    竞选大学学委演讲稿
    2014/09/13 职场文书
    大学生创业事迹材料
    2014/12/30 职场文书
    工作违纪检讨书范文
    2015/01/26 职场文书
    Windows server 2022创建创建林、域树、子域的步骤
    2022/06/25 Servers