JavaScript 代码优化和部署——“性能和部署”的注意要点

Baaaan 发布于2019-08-19 17:54 / 3089人阅读

摘要：注意作用域避免全局查找以上代码应该修改如下避免语句必须使用语句的情况很少，因为它主要用于消除额外的字符。将代码分离称多个文件只是为了提高可维护性，并非为了部署。要进行部署的时候，需要将这些源代码合并为一个或几个归并文件。

注意作用域 避免全局查找

function updateUI () {
    var images = document.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = document.title + " image " + i;
    }
    var msg = document.getElementById("msg");
    msg.innerHTML = "Update complete";
}

以上代码应该修改如下：

function updateUI () {
    var doc = document; //doc
    var images = doc.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = doc.title + " image " + i; //doc
    }
    var msg = doc.getElementById("msg"); //doc
    msg.innerHTML = "Update complete";
}

避免with语句

必须使用with语句的情况很少，因为它主要用于消除额外的字符。

使用正确方法 避免不必要的属性查找

算法的复杂度是使用O符号来表示的，最简单快速的算法是常熟值O(1)。

使用变量和数组要比访问对象上的属性更有效率。

var query = window.location.href.substring(window.location.href.indexOf("?"));

上面的代码需要6次属性查找，应该改为：

var url = window.location.href;
var query = url.substring(url.indexOf("?"));

上面的代码则减少为4次属性查找。

优化循环

for (var i = 0; i < Things.length; i++) {
    Things[i]
};
for (var i = Things.length - 1; i >= 0; i--) {
    Things[i]
};

应该才去上面第二种写法。

var id = Things.length - 1;
if (i > -1) {
    do {
        Things[i];
    } while (--i >= 0);
}

或者把循环改成后测试循环。

展开循环

使用Duff装置

其他

避免双重解释

用原生方法C或C++等

用Switch代替if-else

位操作符代替布尔运算和算数运算

最小化语句数 多个变量声明

var count = 5;
var color = "red";
var value = [21, 3, 21, 4];

var count = 5,
    color = "red",
    value = [21, 3, 21, 4];

应该采用下面的方法

使用数组和对象字面量语法

var values = new Array();
values[0] = 123;
values[1] = 456;
var obj = new Object();
obj.name = "Oli";
obj.age = 18;

var values = [123, 456];
var obj = {
    name: "Oli",
    age: 18
};

应该采用下面的方法

优化DOM交互 最小化现场更新

使用fragment方法更新DOM

使用innerHTML

var list = document.getElementById("myList"),
    html = "",
    i;
for (var i = 10; i >= 0; i--) {
    html = html + "listing...";
};
list.innerHTML = html;

类似fragment方法，要避免以下写法：

var list = document.getElementById("myList"),
    i;
for (var i = 10; i >= 0; i--) {
    list.innerHTML = list.innerHTML + "listing...";
};

使用事件代理

任何可以冒泡的事件都可以在祖先节点上处理事件；

注意HTMLCollection

var imgs = document.getElementsByTagName("img");
for (var i = 0, len = imgs.length; i < len; i++) {
    //processing...
};

部署 构建过程

将每个对象或自定义类型分别放在多带带的文件中。

将代码分离称多个文件只是为了提高可维护性，并非为了部署。

要进行部署的时候，需要将这些源代码合并为一个或几个归并文件。

Ant构建工具（http://ant.apache.org）

验证

用JSLint（http://www.jslint.com）

压缩 文件压缩

使用YUI压缩器（http://yuilibrary.com/projects/yuicompressor）

HTTP压缩

在Apache Web服务器中可以用下面两个模块进行HTTP压缩：mod_gzip和mod_deflate

云服务器 GPU云服务器 JavaScript代码优化选云服务器的几个注意和需求服务器云端部署技术要点云主机的要点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78960.html

JavaScript 代码优化和部署——“可维护性”的注意要点

摘要：代码约定可读性以下地方需要进行注释函数和方法注释参数代表什么，是否有返回值大段代码描述任务的注释复杂的算法变量和函数命名变量用名词函数名用动词开头等返回布尔值类型的函数用等合乎逻辑不用担心太长变量类型透明化方法一初始化，如下推荐方法二匈牙利代码约定可读性以下地方需要进行注释：函数和方法：注释参数代表什么，是否有返回值；大段代码：描述任务的注释；复杂的算法； Hack 变...

scwang90 2019-08-19 17:53 评论0 收藏0
Javascript内存的注意要点

摘要：垃圾收集具有自动垃圾收集机制。管理内存优化内存的最佳方式，就是为执行中的代码只保存必要的数据。一般适用于大多数的全局变量和全局对象的属性。如执行完毕后，变量被销毁手动解除的引用解除一个值的引用并不意味着自动回收该值所占的内存。垃圾收集 JavaScript 具有自动垃圾收集机制。标记清除 JavaScript 中最常用的垃圾收集方式是标记清除。当变量进入环境（如在函数中声明一个...

liaosilzu2007 2019-08-21 10:46 评论0 收藏0
JavaScript 客户端检测——“能力检测”的注意要点

摘要：能力检测性能检测基本模式语法目标不是识别特定的浏览器，而是识别浏览器的能力。更可靠的能力检测能力检测对于想知道某个特性是否会按照适当方式行事非常有用。所以在可能的情况下，要尽量使用进行能力检测。客户端检测不到万不得已，就不要使用客户端检测。只要能够找到更通用的方法，就应该优先采用更通用的方法。先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案。能力检测（性能检测）基本模...

Pluser 2019-08-19 17:09 评论0 收藏0
编写高质量Javascript的要点-Review深入理解Javascript系列(一)

摘要：编写高质量的要点深入理解系列一知识点最小全局变量全局变量命名易与第三方的脚本引起冲突所以尽可能少的使用全局变量是很重要的相关策略有命名空间模式或是函数立即自动执行，但是要想让全局变量少最重要的还是始终使用来声明变量。 Title: 编写高质量Javascript的要点-Review深入理解Javascript系列(一)date: 2017-6-9 14:14:20 status: p...

wh469012917 2019-08-21 11:44 评论0 收藏0
JavaScript函数表达式——“函数的递归和闭包”的注意要点

摘要：如调用函数声明函数不会报错使用函数表达式则不可以报错创建函数的两种方式，一个是函数声明如第一种方式一个是函数表达式如第二种方式。第二种函数创建方式创建的函数叫匿名函数或拉姆达函数，因为关键字后面没有标识符。函数表达式的基本概念 name属性和函数提升首先，name属性，通过这个属性可以访问到给函数指定的名字。（非标准的属性）如： function People(){}; cons...

winterdawn 2019-08-19 17:07 评论0 收藏0