. 字符串和正则表达式

• 字符串

比较下四中字符串拼接方法的性能：
A：str = str + 'a'+'b'
B:str += 'a' + 'b'
C: arr.join('')
D:str.concat('b','c')
对于A与B比较：B会在内存中创建一个临时字符串，字符串拼接为'ab'后赋给临时字符串，临时字符串赋给str;大多数浏览器下A优于B，但在IE8及更早的版本中，B优于A
关于join、concat加前两种拼接的效率:

//+=
    (function () {
        var startTime = new Date().getTime();
        var str = '';
        var addStr = 'hello world~, hello xiaojiejie';
        for(var i = 0; i < 100000; i++){
            str += addStr;
        }
        var endTime = new Date().getTime();
        console.log('字符串str += a:');
        console.log(endTime-startTime);
    })();
    // +
    (function () {
        var startTime = new Date().getTime();
        var str = '';
        var addStr = 'hello world~, hello xiaojiejie';
        for(var i = 0; i < 100000; i++){
            str = str + addStr;
        }
        var endTime = new Date().getTime();
        console.log('字符串str = str + a:');
        console.log(endTime-startTime);
    })();
    //concat
    (function () {
        var startTime = new Date().getTime();
        var str = '';
        var addStr = 'hello world~, hello xiaojiejie';
        for(var i = 0; i < 100000; i++){
            str = str.concat(addStr);
        }
        var endTime = new Date().getTime();
        console.log('字符串str.concat:');
        console.log(endTime-startTime);
    })();
    //join
    (function () {
        var startTime = new Date().getTime();
        var str = '';
        var arr = [];
        var addStr = 'hello world~, hello xiaojiejie';
        for(var i = 0; i < 100000; i++){
            arr.push(addStr);
        }
        str = arr.join('');
        var endTime = new Date().getTime();
        console.log('字符串join:');
        console.log(endTime-startTime);
    })();

我用这段代码简单在chrome65上测试了下，平均下来A>B>C>D，未统计取平均，也没测试其他浏览器。
书上说在IE老版本join是比较快的，也是大量字符串拼接的唯一高效方式。
详细参考 几种字符串拼接性能

 

6. 快速相应的用户界面

• 浏览器UI线程

用于执行JavaScript和更新用户界面的进程被称为'浏览器UI线程'，UI线程的工作基于一个队列系统，当进程空闲时，就会从改队列提取任务去执行，该任务可能是JavaScript代码也可能是UI更新（重绘、重排）。
UI：用户界面 GUI：图形用户界面 这张图来自 链接

浏览器限制JavaScript任务的运行时间，限制两分钟，可以防止恶意代码不断执行来锁定你的浏览器。
单个JavaScript操作的花费总时间应该小于等于100ms，这就意味着在100ms内响应用户的操作，不然就会让用户感受到迟钝感。

• 定时器让出时间片断

如果代码复杂100ms运营不完，可以使用定时器让出时间片断，从而使UI获得控制权进行更新。

这个例子只是说明JavaScript单线程，定时器可以把任务放到后面执行，方便理解
console.log(111)；
setTimeout(func(){console.log(222)},0);
console.log(333);
//111 333 222

JavaScript是单线程，所以定时器可以把JavaScript任务放到后面，控制权先交给UI线程
定时器精度有几毫秒的偏差，，Windows系统中定时器的分辨率为25ms，所以建议延迟最小值设置为25ms。

把一个任务分解成一系列子任务，
把一个运行时间长的函数分解为一个个短时间运行的子函数，

使用时间戳计算获得程序运行时间，以便快速找到运行时间较长的代码部分进行优化。

重复的定时器会抢夺UI线程的运行时间，1秒及以上的低频定时器不会有什么影响，当使用高频100ms-200ms之前的定时器时响应会变慢，所以高频重复定时器使用要注意。

• Web Workers （HTML5新特性）

在UI线程外运行，不占用UI线程的时间
来自W3C的worker demo
Web Workers不能修改DOM

运行环境组成：
一个navigator对象
一个location对象（与window.location相同 属性-只读）
一个self对象，指向worker对象
可以引入需要用到的外部文件importScripts()方法
可以使用js对象 Object、Array、Date等
XHR
定时器
close() 立刻停止Worker运行

W3C介绍Web Worker
博文：Web Worker原理和应用介绍
实际应用场景：处理纯数据或者与UI线程无关的长时间运行脚本，个人觉得大量的纯计算可以考虑使用。

 

7. Ajax（阿炸克斯）

前面说到数据存取会影响性能，理所应当的，数据的传输同样影响性能
Ajax通过异步的方式在客户端和服务端之间传输数据。

• 数据传输

请求数据的五种方式：

A:XMLHTTPRequest(简称XHR)
最常用异步异步发送和接收数据,包括GET和POST两种方式
不能跨域
GET--参数放在url后面，请求得到的数据会被缓存，当url加参数超过2048，可以使用POST方式
POST--参数在头信息，数据不会被缓存
XHR工作原理及优缺点参考选我选我

B:动态脚本注入
其实就是创建一个script元素这个元素的src不受当前域限制，但是不能设置请求头信息，也就是只能用GET方式

C.Multipart XHR
MXHR荀彧一个HTTP请求就可以传输多个数据
通过在服务端讲资源打包成一个双方约定的字符串分割的长字符串发送到客户端，然后根据mime-typed类型和传入的其他头信息解析出资源
缺点：资源不能被缓存

D.iframe
E.comet

发送数据：XHR、Beacons、

• 数据格式

A.XML
优点：通用、格式严格、易于验证
缺点：冗长、结构复杂有效数据比例低

B.JSON
JSON.parse():JSON-->对象
JSON.stringify()：js值-->JSON字符串
文件小、下载快、解析快

C.JSON-P
在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

D.HTML
E.自定义数据格式

• Ajax性能

最快的Ajax请求就是没有请求（贫一句：最快的写程序方式就是天天跟产品拌嘴，砍需求，那啥，我先跑了，产品拿着刀追来了）

避免不必要的请求：
服务端设置HTTP头信息确保响应会被浏览器缓存
客户端讲获取的信息存到本地避免再次请求（localstorage sessionstorage cookice）
设置HTTP头信息，expiresgaosu告诉浏览器缓存多久
减少HTTP请求，合并css、js、图片资源文件等或使用MXHR
通过次要文件用Ajax获取可缩短页面加载时间。

 

8. 编程实践

• 避免双重求值

eval()、Function慎用，定时器第一个参数建议函数而不是字符串都能避免字符串双重求值

• 使用对象或者数组直接量

直接量：

var obj = {
    name:...
    age:...
}

非直接量：

var obj = new Object()
obj.name = ...
...

运行时直接量比非直接量快

• 避免重复工作

A:延迟加载（懒加载）
进入函数-->判断条件-->重写函数
B:条件预加载
函数调用前提前进行条件检测
var addEvent = doc.addEventListener ? funcA : funcB

• 使用JavaScript速度快的部分

A.位操作
B.原生方法，首先原生方法是最快的，而且浏览器会缓存部分原生方法
C.复杂计算时多使用Math对象
D.querySelector和querySelectorAll是查询最快的
当用Document类型调用querySelector()方法时，会在文档元素范围内查找匹配的元素；而当用Element类型调用querySelector()方法时，只会在这个元素的后代元素中去查找匹配的元素。若不存在匹配的元素，则这两种类型调用该方法时，均返回null。

 

9. 构建并部署高性能JavaScript应用

这一章讲的都是其他章节的优化原理的实践，主要有：
1.合并多个js文件
2.预处理js文件
3.js压缩
4.js的HTTP压缩
5.缓存js文件
6.处理缓存问题
7.使用内容分发网络（CDN）这个有点效果显著的感觉，前年第一次用的时候感觉快了很多，打个比方就是：
京东网上水果蔬菜超市，假设你在上海买了一个榴莲，京东可以在上海的仓库给你发货，如果上海没有他们的仓库，就在离你最近的一个仓库发货，以保证最快速度送到你手上（吃什么不好，吃榴莲，别人会说食屎拉你）。这个仓库放的就是静态资源文件，根据请求发出的位置找到最近的CDN节点把资源返回给请求端，大概是这个意思，具体原理参考CDN原理
现在很多方式都在gulp、webpack工具里进行了，方便省事。

 

10. 工具

• JavaScript性能分析

使用Date对象实例减去另一个实例获得任务运行时间毫秒数。

• 匿名函数

测量分析匿名函数的方法就是给匿名函数加上名字。

• 调试工具

个人比较喜欢chrome调试工具
贡献几个比较全的教程
基础篇
优化篇
实战1
实战2
英文使用介绍

• 脚本阻塞

Safari4、IE8、Firefox3.5、chrome及以上允许脚本并行下载，但阻塞运行，虽然文件下载快了，但是页面渲染任会阻塞直到脚本运行完。
对运行慢的脚本进行优化或重构，不必要的脚本等到等到页面渲染完成再加载。

• Page Speed

显示解析和运行JavaScript消耗的时间，指明可以延长加载的脚本，并报告没被使用的函数。

• Fiddler

Fiddler是一个HTTP调试代理工具，能检测到网络中所有资源，以定位加载瓶颈。

• YSlow

YSlow工具可以深入观察页面初始加载和运行过程的整体性能。

• WebPagetest

WebPagetest：根据用户浏览器真实的连接速度，在全球范围内进行网页速度测试，并提供详细的优化建议。
WebPagetest

• Google PageSpeed

PageSpeed 根据网页最佳实践分析和优化测试的网页。

• Pingdom 网站速度测试

输入 URL 地址，即可测试页面加载速度，分析并找出性能瓶颈。
Pingdom 网站速度测试

深蓝互联成立于2013年，是一家物联网硬件开发及软件应用服务商，获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年，擅长SaaS 平台开发、APP小程序开发、软硬件结合开发，在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。

 

我们拥有专业优秀的设计和技术团队，以极具创意的 UI 设计、精湛卓越的开发技术，专业的网络策划团队。公司多年来投入打造物联网SaaS平台，集成了公司研发的多款智能物联网终端（智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等）。

 

公司一直坚持以研发为导向，打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务！

 

文章来自深蓝互联http://www.szdbi.com/webxt/268.html转载请注明出处！