强力推荐几个编写高性能的JavaScript 的小建议 _JavaScript

文章插图

前言
随着计算机硬件的不断升级，开发者越发觉得JAVAScript性能优化的好不好对网页的执行效率影响不明显，所以一些性能方面的知识被很多开发者忽视。但在某些情况下，不优化的JavaScript代码必然会影响用户的体验。因此，即使在当前硬件性能已经大大提升的时代，在编写Javascript代码时，若能遵循Javascript规范和注意一些性能方面的知识，对于提升代码的可维护性和优化性能将大有好处。那么，接下来我们讨论几种能够提高JavaScript性能的方法。
1、js文件加载和执行
（1）将<script>标签放到<body>标签的底部
（2）可以合并多个js文件，减少页面中<script>标签改善性能
（3）使用 defer 属性，加载后续文档元素的过程将和script.js的加载并行进行，但是 script.js的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
（4）使用 async 属性，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行
（5）动态加载脚本元素，无论在何时启动瞎子，文件的下载和执行过程都不会阻塞页面其它进程
var script = document.createElement('script');script.type = 'text/javascript';script.src = https://www.isolves.com/it/cxkf/yy/js/2019-08-26/'file.js';document.getElementsByTagName('head')[0].AppendChild(script);2、标识符所在的作用域链的位置越深
标识符所在的作用域链的位置越深，那么它的标识符解析的性能就越慢。所以一个好的性能提升的经验法则是：如果某个跨作用域的值在函数中被引用一次以上，那么就把它存储到局部变量里。
function fun1() { // 将全局变量的引用先存储在一个局部变量中，然后使用这个局部变量代替全局变量，从而提高 // 性能；不然每次(3次)都要遍历整个作用域链找到document var doc = document;var bd = doc.body;var links = doc.getElementsByTagName('a');doc.getElementById('btn').onclick = function(){console.log('btn');}}3、避免过长原型链继承
方法或属性在原型链中存在的位置越深，搜索它的性能也就越慢，所以要避免N多层原型链的写法。
4、对象成员嵌套过深
对象的嵌套成员，对象成员嵌套越深，读取速度也就越慢。所以好的经验法则是：如果在函数中需要多次读取一个对象属性，最佳做法是将该属性值保存在局部变量中，避免多次查找带来的性能开销。
function f() {// 因为在以下函数中需要3次用到DOM对象属性，所以先将它存储在一个局部变量// 中，然后使用这个局部变量代替它进行后续操作，从而提高性能 var dom = YaHOO.util.Dom; if(Dom.hasClass(element,'selected')){Dom.removeClass(elemet,'selected'); }else{Dom.addClass(elemet,'selected');}}5、DOM操作
用js访问和操作DOM都会带来性能损失，可通过以下几点来减少性能损失：
（1）尽可能减少DOM访问次数；
（2）如果需要多次访问某个DOM节点，请使用局部变量存储它的引用；
（3）小心处理html集合，因为它实时连系着底层文档；我们可以把集合的长度缓存到一个变量中，并在迭代中使用它；
（4）下述情况会发生重排：

添加或删除可见的DOM元素,请参阅JavaScript系统学习DOM系列文章之理解DOM节点关系；
元素位置改变；
元素尺寸改变（包括：外边距、内边距、边框厚度、宽度、高度等属性）；
内容改变（例如：文本改变或图片被另一个不同尺寸的图片改变）；
页面渲染器初始化；
浏览器窗口尺寸改变

可通过以下方式减少重排：

留意上面会导致重排的操作，尽量避免；
获取布局信息的操作会导致强制渲染队列重排，应该尽量避免使用以下获取布局信息的操作方法或属性或者缓存布局信息，例如：offsetTop,offsetLeft,offsetWidthoffsetHeight,``scrollTop,scrollLeft,scrollWidth,scrollHeight,clientTop,clientLeft,clientWidth,clientHeight,getComputedStyle()等;
批量修改样式，推荐修改class来实现，例如使用：

function f() {// 推荐使用以下操作var el1 = document.getElementById('mydiv');el1.className = 'mydiv';// 不推荐使用以下操作var el2 = document.getElementById('mydiv');el2.style.border = '1px';el2.style.padding = '2px';el2.style.margin = '3px';}.mydiv { border: 1px; padding: 2px; margin: 3px;}