JavaScript知识点总结之如何提高性能


Posted in Javascript onJanuary 15, 2016

JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货。

先给大家巩固下javascript基本语法:

javascript基本语法

定义变量统一用var关键字

语法:var 变量名称=变量值

标示符:①、由字母数字下划线构成 不能以数字开头 不能是关键字 严格区分大小写

数据类型:

数值型:number

字符串:string

布尔型:boolean

特殊数据类型:undefined 空的 未定义的 未赋值的

空值:null

引用类型object function

检测参数的数据类型:typeof()返回该数据类型对应的字符串

两个等号==和三个等号===的用法

==:比较值相等 与数据类型无关

===:比较全等 与数值和数据类型都有关

布尔环境:遇到if自动转换成布尔值

字符串string中的布尔环境:空为假 非空为真

数值number中的布尔环境:0为假 非0为真

number与string之间的关系

①、遇到+做拼接操作

②、需要做运算操作时,要把字符串转换成数值型

转换方法1、字符串*1 变成数值型

转换方法2:Number(字符串) 转换成数值型

一:针对js文件的加载位置

在HTML文件中,<script>标签是可以加在<head>区域和<body>区域的。这里鉴于JavaScript执行和UI渲染的单线程原因,如果js文件载入会阻塞后面对于页面的解析过程,页面会等到js文件完全加载并运行后才继续执行该做的操作。那么问题就来了,这样可能会出现页面空白or卡顿现象。作为一名前端开发,重要的不仅仅止于实现了需求,应该还有优质的用户体验。那么我们就需要消除用户枯燥的等待,针对这个问题,这里有本兽想到的两种解决方案:

1. 如果js文件没有特殊要求指明需要在页面渲染之前载入及编译完成的,那么选择将js文件放到</body>标签前(既所有的页面所呈现内容的后面),css文件还是放到<head>区域(谁也不愿意看一个布局杂乱无章的页面)。这样做就能先让用户看到有布局的页面而不是空白页了,那么也会有人指出:那数据得通过js请求加载进来啊,怎么办呢?可以对数据的加载做排序,急需呈现的接口放前面执行,不是那么需要的可以延后执行,同时做个简单的载入动画or提示。

2. 如果这些js文件有指明需要先执行了,才能更好的展示页面内容,那么就在第一个js或者页面上先放个载入小动画,可以一些有趣的或者萌萌的动画场景。这样也是能较好的避免用户等待的无聊,说不定人家还对这个载入动画更感兴趣呢,这样可提升项目的用户体验感。

最终推荐:将<script>标签尽可能的放到</body>标签前面加载,以提升用户体验。

二:针对js文件的合并

在很多团队开发中,我们可能会将不同功能的代码块分别放置在不同的js文件中,以便于开发过程中众人合作写代码会更加方便,毕竟只需要找对应文件夹或文件而不是在一个很长的文件中找一个方法。这确实是会提高团队开发效率及新人加入后的更容易进行二次开发及维护。那么将这个问题放到页面性能里呢?这正是问题所在,在这本书中指出:Each HTTP request brings with it additional performance overhead,so downloading one single 100 KB file will be faster than downloading four 25 KB files.

下载1个100KB的文件比下载4个25KB的文件要快,而开发过程中区分开各个文件又有很大的好处,那么合并这个问题也就放在开发完后再处理咯,相信这个操作大家都不会陌生吧,现在的前端工具这么丰富,各位习惯用什么压缩就用什么压缩吧~

这里简单提出下,在载入文件方面还可以用到defer和async属性,用于延迟加载和异步加载,在现代浏览器中,大多数是已经支持defer属性了,还没习惯用这个额,也不知道具体会不会存在什么问题。有兴趣的朋友可自行google该知识点,这里件简单提下吧。

现在的框架也大多配合懒加载和按需加载了。

三:更快速的数据访问

对于浏览器来说,一个标识符所处的位置越深,去读写他的速度也就越慢(对于这点,原型链亦是如此)。这个应该不难理解,简单比喻就是:杂货店离你家越远,你去打酱油所花的时间就越长... 熊孩子,打个酱油那么久,菜早烧焦了 -.-~

如果我们需要在当前函数内多次用到一个变量值,那么我们可以用一个局部变量先将其存储起来,案例如下:

//修改前
function showLi(){
var i = 0;
for(;i<document.getElementsByTagName("li").length;i++){ //一次访问document
console.log(i,document.getElementsByTagName("li")[i]); //三次访问document
};
};
//修改后
function showLi(){
var li_s = document.getElementsByTagName("li"); //一次访问document
var i = 0;
for(;i<li_s.length;i++){
console.log(i,li_s[i]); //三次访问局部变量li_s
};
};

四:DOM操作的优化

众所周知的,DOM操作远比javascript的执行耗性能,虽然我们避免不了对DOM进行操作,但我们可以尽量去减少该操作对性能的消耗。

让我们通过代码解释这个问题:

function innerLi_s(){
var i = 0;
for(;i<20;i++){
document.getElementById("Num").innerHTML="A"; //进行了20次循环,每次又有2次DOM元素访问:一次读取innerHTML的值,一次写入值
};
};

针对以上方法进行一次改写:

function innerLi_s(){
var content ="";
var i = 0;
for(;i<20;i++){
content += "A"; //这里只对js的变量循环了20次
};
document.getElementById("Num").innerHTML += content; //这里值进行了一次DOM操作,又分2次DOM访问:一次读取innerHTML的值,一次写入值
};

五:减少Dom的重绘重排版

元素布局的改变或内容的增删改或者浏览器窗口尺寸改变都将会导致重排,而字体颜色或者背景色的修改则将导致重绘。
对于类似以下代码的操作,据说现代浏览器大多进行了优化(将其优化成1次重排版):

//修改前
var el = document.getElementById("div");
el.style.borderLeft = "1px"; //1次重排版
el.style.borderRight = "2px"; //又1次重排版
el.style.padding = "5px"; //还有1次重排版
//修改后
var el = document.getElementById("div");
el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版

针对多重操作,以下三种方法也可以减少重排版和重绘的次数:

1.Dom先隐藏,操作后再显示 2次重排 (临时的display:none)

2.document.createDocumentFragment() 创建文档片段处理,操作后追加到页面 1次重排

3.var newDOM = oldDOM.cloneNode(true)创建Dom副本,修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排

五:循环的优化

这应该是较多人都知道的写法了,简单带过即可(后面还是用代码+注释形式说明)~

//修改前
var i = 0;
for(;i<arr.lengthli++){ //每次循环都需要获取数组arr的length
console.log(arr[i]);
}
//修改后
var i = 0;
var len = arr.length; //获取一次数组arr的length 
for(;i<len;i++){
console.log(arr[i]);
}
//or
var i = arr.length;;
for(;i;i--){
console.log(arr[i]);
}

六:合理利用二进制

如:对2取模,则偶数最低位是0,奇数最低位是0,与1进行位与操作的结果是0,奇数的最低位是1,与1进行位与操作的结果是1。

代码如下:

.odd{color:red}
.even{color:yellow} 
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul> 
var i = 0;
var lis = document.getElementsByTagName("li");
var len = lis.length;
for(;i<len;i++){
if(i&1){
lis[i].className = "even";
} else{
lis[i].className = "odd";
}
};

虽说现代浏览器都已经做的很好了,但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响,但是从多个点进行优化后,可能产生的就会质的飞跃了~

Javascript 相关文章推荐
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 #Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 #Javascript
JavaScript提高性能知识点汇总
Jan 15 #Javascript
学习JavaScript设计模式之中介者模式
Jan 14 #Javascript
轻松实现jquery手风琴效果
Jan 14 #Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 #Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 #Javascript
You might like
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python实现读取并保存文件的类
2017/05/11 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
浅析Python的命名空间与作用域
2020/11/25 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
园长自我鉴定
2013/10/06 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
结构工程个人自荐信范文
2013/11/30 职场文书
学生评语大全
2014/04/18 职场文书
预备党员表决心的话
2015/09/22 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏