web性能优化的15条实用技巧

时间  2019-11-05
标签 web 性能 优化 实用 技巧 栏目 HTML 繁體版
原文   原文链接

javascript在浏览器中运行的性能，能够认为是开发者所面临的最严重的可用性问题。这个问题由于javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，因此同一时刻只能作一件事。js执行过程耗时越久，浏览器等待响应的时间越长。javascript

加载和执行

1.提升加载性能

  • 1.IE8,FF,3.5,Safari 4和Chrome都容许并行下载js文件，当script下载资源时不会阻塞其余script的下载。可是js下载仍然会阻塞其余资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待全部js代码下载并执行完才能继续。所以仍然存在脚本阻塞问题.推荐将全部js文件放在body标签底部以减小对整个页面的影响。php

  • 2.减小页面外链脚本文件的数量将会提升页面性能：http请求会带来额外的开销，所以下载单个300k的文件将比下载10个30k的文件效率更高。css

  • 3.动态脚本加载技术：不管什么时候启动下载，文件的下载和执行都不会阻塞页面其余进程。html

function laodScript(url,callback){
    var script = document.createElement('script');
    script.type = 'text/javascript';

    if(script.readyState){  // ie
        script.onreadystatechange = function(){
            if(script.readyState == 'loaded' || script.readyState == 'complete'){
                script.onreadystatechange = null;
                callback()
            }
        }
    }else{ //其余浏览器
        script.onload = function(){
            callback()
        }
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

// 使用
loadScript('./a.js',function(){
    loadScript('./b.js',function(){
        loadScript('./c.js',function(){
            console.log('加载完成')
        })
    })
})
复制代码
  • 4.无阻塞加载类库——LABjs,使用方法以下：
<script src="lab.js"></script>
// 链式调用时文件逐个下载，.wait()用来指定文件下载并执行完毕后所调用的函数
$LAB.script('./a.js')
    .script('./b.js')
    .wait(function(){
        App.init();
})

// 为了保证执行顺序，能够这么作,此时a一定在b前执行
$LAB.script('./a.js').wait()
    .script('./b.js')
    .wait(function(){
        App.init();
})

复制代码

2.数据存取与JS性能

1.在js中，数据存储的位置会对代码总体性能产生重大影响。数据存储共有4种方式：字面量，变量，数组项，对象成员。他们有着各自的性能特色。前端

2.访问字面量和局部变量的速度最快，相反，访问数组和对象相对较慢vue

3.因为局部变量存在于做用域链的起始位置，所以访问局部变量的比访问跨域做用变量更快java

4.嵌套的对象成员会明显影响性能，应尽可能避免node

5.属性和方法在原型链位置越深，访问他的速度越慢react

6.一般咱们能够把须要屡次使用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能css3

3.DOM编程

  • 1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，由于他会致使浏览器从新计算页面的几何变化。<一般的作法是减小访问DOM的次数，把运算尽可能留在JS这一端。

注：如过在一个对性能要求比较高的操做中更新一段HTML，推荐使用innerHTML，由于它在绝大多数浏览器中运行的都很快。但对于大多很多天常操做而言，并无太大区别，因此你更应该根据可读性，稳定性，团队习惯，代码风格来综合决定使用innerHTML仍是createElement()

  • 2.HTML集合优化

HTML集合包含了DOM节点引用的类数组对象，一直与文档保持链接，每次你须要最新的信息时，都会重复执行查询操做，哪怕只是获取集合里元素的个数。

1.优化一——集合转数组collToArr

function collToArr(coll){
    for(var i=0, a=[], len=coll.length; i<len; i++){
        a.push(coll[i]);
    }
    return a
}
复制代码

2.缓存集合length

3.访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操做）

  • 3.遍历DOM

1.使用只返回元素节点的API遍历DOM,由于这些API的执行效率比本身实现的效率更高：

属性名 被替代属性
children childNodes
childElementCount childNodes.length
firstElementChild firstChild
lastElementChild lastChild
nextElementSibling nextSibling
previousElementSibling previousSibling
2.选择器API——querySelectorAll()

querySelectorAll()方法使用css选择器做为参数并返回一个NodeList——包含着匹配节点的类数组对象，该方法不会返回HTML集合，所以返回的节点不会对应实时文档结构，着也避免了HTML集合引发的性能问题。

let arr = document.querySelectorAll('div.warning, div.notice > p')
复制代码
  • 4.重绘和重排

浏览器在下载完页面的全部组件——html,js,css,图片等以后，会解析并生成两个内部数据结构—— DOM树，渲染树.一旦DOM树和渲染树构建完成，浏览器就开始绘制页面元素（paint）.

1.重排发生的条件：

添加或删除可见的DOM 元素位置变化 元素尺寸改变 内容改变 页面渲染器初始化 浏览器窗口尺寸变化 出现滚动条时会触发整个页面的重排

重排一定重绘

  • 5.渲染树变化的排列和刷新

大多数浏览器经过队列化修改并批量执行来优化重排过程，然而获取布局信息的操做会致使队列强制刷新。

offsetTop,offsetWidth...
scrollTop,scrollHeight...
clientTop,clientHeight...
getComputedStyle()
复制代码

一些优化建议：将设置样式的操做和获取样式的操做分开：

// 设置样式
body.style.color = 'red';
body.style.fontSize = '24px'
// 读取样式
let color = body.style.color
let fontSize = body.style.fontSize
复制代码

另外，获取计算属性的兼容写法：

function getComputedStyle(el){
    var computed = (document.body.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el,'');
    return computed
}
复制代码
  • 6.最小化重绘和重排

1.批量改变样式

/* 使用cssText */
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';
复制代码

2.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档

function appendDataToEl(option){
    var targetEl = option.target || document.body,
        createEl,
        data = option.data || [];
    // 让容器脱离文档流，减小重绘重排
    var targetEl_display = targetEl.style.display;
    targetEl.style.display = 'none';

    // *****建立文档片断来优化Dom操做****
    var fragment = document.createDocumentFragment();
    // 给元素填充数据
    for(var i=0, max = data.length; i< max; i++){
        createEl = document.createElement(option.createEl);
        for(var item in data[i]){
            if(item.toString() === 'text'){
                createEl.appendChild(document.createTextNode(data[i][item]));
                continue;
            }
            if(item.toString() === 'html'){
                createEl.innerHTML = item,data[i][item];
                continue;
            }
            createEl.setAttribute(item,data[i][item]);
        }
        // ****将填充好的node插入文档片断****
        fragment.appendChild(createEl);
    }
    // ****将文档片断统一插入目标容器****
    targetEl.appendChild(fragment);
    // 显示容器，完成数据填充
    targetEl.style.display = targetEl_display;
}

// 使用
var wrap = document.querySelectorAll('.wrap')[0];
var data = [
    {name: 'xujaing',text: '选景', title: 'xuanfij'},
    {name: 'xujaing',text: '选景', title: 'xuanfij'},
    {name: 'xujaing',text: '选景', title: 'xuanfij'}
];
appendDataToEl({
    target: wrap,
    createEl: 'div',
    data: data
});

复制代码

上面的优化方法使用了文档片断: 当咱们把文档片断插入到节点中时，实际上被添加的只是该片断的子节点，而不是片断自己。可使得dom操做更有效率。

3.缓存布局信息

//缓存布局信息
let current = el.offsetLeft;
current++;
el.style.left = current + 'px';
if(current > 300){
    stop();
}
复制代码

4.慎用:hover

若是有大量元素使用:hover,那么会下降相应速度，CPU升高

5.使用事件委托（经过事件冒泡实现）来减小事件处理器的数量，减小内存和处理时间

function delegation(e,selector,callback){
    e = e || window.event;
    var target = e.target || e.srcElement;

    if(target.nodeName !== selector || target.className !== selector || target.id !== selector){
        return;
    }
    if(typeof e.preventDefault === 'function'){
        e.preventDefault();
        e.stopPropagation();
    }else{
        e.returnValue = false;
        e.cancelBubble = true;
    }

    callback()
}
复制代码

4.算法和流程控制

1.循环中减小属性查找并反转(能够提高50%-60%的性能)

// for 循环
for(var i=item.length; i--){
    process(item[i]);
}
// while循环
var j = item.length;
while(j--){
    process(item[i]);
}
复制代码

2.使用Duff装置来优化循环（该方法在后面的文章中会详细介绍）

3.基于函数的迭代（比基于循环的迭代慢）

items.forEach(function(value,index,array){
    process(value);
})
复制代码

4.一般状况下switch总比if-else快，可是不是最佳方案

5.字符串和正则表达式

1.除了IE外，其余浏览器会尝试为表达式左侧的字符串分配更多的内存，而后简单的将第二个字符串拷贝到他的末尾，若是在一个循环中，基础字符串位于最左侧，就能够避免重复拷贝一个逐渐变大的基础字符串。 2.使用[\s\S]来匹配任意字符串 3.去除尾部空白的经常使用作法：

if(!String.prototype.trim){
    String.prototype.trim = function(){
        return this.replace(/^\s+/,'').replace(/\s\s*$/, '')
    }
}
复制代码

6.快速响应的用户界面

1.浏览器的UI线程：用于执行javascript和更新用户界面的进程。

2.在windows系统中定时器分辨率为15毫秒，所以设置小于15毫秒将会使IE锁定，延时的最小值建议为25ms.

3.用延时数组分割耗时任务：

function multistep(steps,args,callback){
    var tasks = steps.concat();

    setTimeout(function(){
        var task = tasks.shift();
        task.apply(null, args || []);   //调用Apply参数必须是数组

        if(tasks.length > 0){
            setTimeout(arguments.callee, 25);
        }else{
            callback();
        }
    },25);
}
复制代码

4.记录代码运行时间批处理任务：

function timeProcessArray(items,process,callback){
    var todo = item.concat();

    setTimeout(function(){
        var start = +new Date();

        do{
            process(todo.shift());
        }while(todo.length > 0 && (+new Date() - start < 50));

        if(todo.length > 0){
            setTimeout(arguments.callee, 25);
        }else{
            callback(items);
        }
    },25)
}
复制代码

5.使用Web Worker：它引入了一个接口，能使代码运行且不占用浏览器UI线程的时间。一个Worker由以下部分组成：

  1. 一个navigator对象，包括appName,appVersion,user Agent和platform.

  2. 一个location对象，只读。

  3. 一个self对象，指向全局worker对象

  4. 一个importScripts()方法，用来加载worker所用到的外部js文件

  5. 全部的ECMAScript对象。如object,Array,Date等

  6. XMLHttpRequest构造器

  7. setTimeout()，setInterval()

  8. 一个close()方法，它能马上中止worker运行

  • 应用场景
  1. 编码/解码大字符串
  2. 复杂数学运算（包括图像，视屏处理）
  3. 大数组排序
// worker.js
var worker = new Worker('code.js');
// 接收信息
worker.onmessage = function(event){
    console.log(event.data);
}
// 发送数据
worker.postMessage('hello');

// code.js

// 导入其余计算代码
importScripts('a.js','b.js');

self.onmessage = function(event){
    self.postMessage('hello' + event.data);
}
复制代码

7.ajax优化

1.向服务器请求数据的五种方式：

  1. XMLHttpRequest

  2. Dynamic script tag insertion 动态脚本注入

  3. iframes

  4. Comet（基于http长链接的服务端推送技术）

  5. Multipart XHR（容许客户端只用一个http请求就能够从服务器向客户端传送多个资源）

2.单纯向服务端发送数据（beacons方法）——信标

// 惟一缺点是接收到的响应类型是有限的
var url = '/req.php';
var params = ['step=2','time=123'];

(new Image()).src = url + '?' + params.join('&');

// 若是向监听服务端发送回的数据，能够在onload中实现
var beacon = new Image();
beacon.src = ...;
beacon.onload = function(){
    ...
}
beacon.onerror = function(){
    ...
}
复制代码

3.ajax性能的一些建议

1.缓存数据

  • 1.在服务端设置Expires头信息确保浏览器缓存多久响应（必须GET请求）
  • 2.客户端把获取到的信息缓存到本地，避免再次请求

8.编程实践

1.避免重复工做

// 1.延迟加载
var a = (x,y) =>{
    if(x > 4){
        a = 0;
    }else{
        a = 1;
    }
}
// 须要使用时调用
a();

// 2.条件预加载（适用于函数立刻执行并频繁操做的场景）
var b = a > 0 ? '4' : '0';
复制代码

2.使用Object/Array字面量

3.多用原生方法

9.构建与部署高性能的js应用

1.js的http压缩 当web浏览器请求一个资源时，它一般会发送一个Accept-Encoding HTTP头来告诉Web服务器它支持那种编码转换类型。这个信息主要用来压缩文档以获取更快的下载，从而改善用户体验。Accept-Encoding可用的值包括：gzip,compress,deflate,identity. 若是Web服务器在请求中看到这些信息头，他会选择最合适的编码方式，并经过Content-Encoding HTTP头通知WEB浏览器它的决定。

2.使用H5离线缓存

3.使用内容分发网络CDN

4.对页面进行性能分析

// 检测代码运行时间
var Timer = {
    _data: {},
    start: function(key){
        Timer._data[key] = new Date();
    },
    stop: function(key){
        var time = Timer._data[key];
        if(time){
            Timer._data[key] = new Date() - time;
        };
        console.log(Timer._data[key]);
        return Timer._data[key]
    }
};
复制代码

10.浏览器缓存

1.添加Expires头

2.使用cache-control cache-ontrol详解 浏览器缓存机制

11.压缩组件

1.web客户端能够经过http请求中的Accept-Encoding头来表示对压缩的支持

// 浏览器请求时对http header设置
Accept-Encoding: gzip
// Web服务器响应时对http header设置
Content-Encoding: gzip
复制代码

2.压缩能将响应的数据量减小将近70%，所以可考虑对html,脚本，样式，图片进行压缩

12.白屏现象的缘由

浏览器（如IE）在样式表没有彻底下载完成以前不会呈现页面，致使页面白屏。若是样式表放在页面底部，那么浏览器会花费更长的时间下载样式表，所以会出现白屏，因此最好把样式表放在head内。白屏是浏览器对“无样式闪烁”的修缮。若是浏览器不采用“白屏”机制，将页面内容逐步显示（如Firefox），则后加载的样式表将致使页面重绘重排，将会承担页面闪烁的风险。

13.css表达式使用一次性表达式(但最好避免css表达式)

使用css表达式时执行函数重写自身

// css
p{
    background-color: expression(altBgcolor(this))
}
// js
function altBgcolor(el){
    el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";
}
复制代码

14.减小DNS查找

1.DNS缓存和TTL

1.DNS查找能够被缓存起来以提升性能：DNS信息会留在操做系统的DNS缓存中（Microsoft Windows上的“DNS Client服务”,以后对该主机名的请求无需进行过多的查找
2.TTL(time to live): 该值告诉客户端能够对记录缓存多久。建议将TTL值设置为一天
// 客户端收到DNS记录的平均TTL只有最大TTL值的一半由于DNS解析器返回的时间是其记录的TTL的剩余时间，对于给定的主机名，每次执行DNS查找时接收的TTL值都会变化
3.经过使用Keep-Alive和较少的域名来减小DNS查找
4.通常建议将页面组件分别放到至少2个，但不要超过4个主机名下
复制代码

15.避免重定向

这块须要先后端共同配合，对页面路由进行统一规范。

最后

欢迎一块儿探索打造高性能的web应用，在公众号《趣谈前端》加入咱们一块儿讨论吧！

更多推荐

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程