当前位置:Gxlcms > JavaScript > JavaScript知识点总结之如何提高性能_javascript技巧

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

时间:2021-07-01 10:21:17 帮助过:4人阅读

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文件中,

四:DOM操作的优化

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

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

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

五:减少Dom的重绘重排版

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

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

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

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

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

五:循环的优化

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

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

人气教程排行