个人做网站可以盈利么,网站建立服务,centos 搭建wordpress,电子商务网站建设期末作业如何加速JavaScript 代码运行速度 前言减少DOM访问避免不必要的变量延迟script加载异步和同步使用异步编程避免使用With关键词 前言
本文主要通过五个方面来讲解如何使Js代码得到性能优化#xff0c;从而实现加快Js代码运行速度的作用。那么好#xff0c;本文正式开始。
减… 如何加速JavaScript 代码运行速度 前言减少DOM访问避免不必要的变量延迟script加载异步和同步使用异步编程避免使用With关键词 前言
本文主要通过五个方面来讲解如何使Js代码得到性能优化从而实现加快Js代码运行速度的作用。那么好本文正式开始。
减少DOM访问
减少DOM访问的意思就是如果说我们要多次调用一个DOM节点使用那么可以把这个DOM节点定义到一个变量中下次直接调用这个变量即可这样就可以减少DOM节点的调用多次调用DOM节点会影响性能因为它会从HTML文档结构渲染树中找到对应的DOM节点代码如下
var obj;
obj document.getElementById(demo);
obj.innerHTML Hello; 可以使用这种方式只访问一次DOM节点下次直接访问变量。
避免不必要的变量
能不定义全局变量就不定义全局变量因为全局变量有内存冗余和内存泄漏的风险全局变量只有等页面被关闭才会被释放。
bodydiv ida/divdiv idb/divscriptvar a document.getElementById(a)var bdocument.getElementById(b)let hellohellolet worldworlda.innerHTMLhelloworldlet helloshelloslet worldsworldlet anshellosworldsb.innerHTMLans/script
/body在上述代码中有一个DOMa和DOMb我们做了innerHTML操作DOM用了ans变量作为中间值但这个中间值不是必要的而且这个中间值ans只用了一次所以我们可以不通过中间值直接赋值a的HTML结构中。
延迟script加载
把script放在页面底部使得页面先于sript被加载或者放在顶部在script标签中加上defer或async标签defer标签的意思是指在浏览器中先按HTML顺序下载但是等页面加载完后才加载这些jsasync也是类似不同的是async是异步加载。 defer同步属性先下载js文件然后渲染HTML最后渲染js文件按照顺序。 async异步属性先解析HTMl但当js下载完成后会停止HTML解析执行脚本解析脚本后才继续渲染HTML。
异步和同步
同步是指按顺序加载而异步是指不按顺序加载。两者都能加载完只不过加载的方式不同如果我们某个js文件需要依托另一个文件的内容调用需要用同步否则同步异步都可以。
使用异步编程
使用异步编程可以很好的解决js可能造成的阻塞问题因为js是单线程的语言所以它对于同步代码会按顺序处理那同时因为它的运行机制可以利用事件循环来进行解决大体就是先执行同步任务再执行异步任务。也就是说当执行完所有的同步任务后才会执行异步任务异步任务又分为宏任务和微任务先执行微任务后执行宏任务所以说在特定情况下多使用异步编程会解决页面阻塞问题。
避免使用With关键词
避免使用 with 关键词。它对速度有负面影响。它也将混淆 JavaScript 作用域。 严格模式中不允许 with 关键词。
