当前位置: 首页 > 科技观察

性能上来!给前端开发者的14个JavaScript代码优化技巧

时间:2023-03-16 01:06:25 科技观察

我们无法控制用户访问网站的设备的硬件规格。最终用户可能会在高端或低端设备上访问网站,互联网连接好或坏,这意味着我们必须尽可能优化网站以满足所有用户的需求。同时,据W3Tech统计,全球近96%的网站都在使用JavaScript,JavaScript已经成为有史以来最流行的编程语言之一。这里有一些技巧可以帮助您更好地优化JavaScript代码以获得更好的性能。顺便说一句,确保共享和重用JS组件,以在高质量代码(需要时间生成)和合理的交付时间之间取得适当的平衡。您项目中的组件(vanillaJS、TS、React、Vue等)可以使用Bit(Github)等流行工具共享到Bit的组件中心,而不会浪费太多时间。1.删除未使用的代码和功能应用程序包含的代码越多,它需要传输给客户端的数据就越多。浏览器解析代码的时间也更长,有时某些功能可能根本用不上。最好只在开发环境中保留这些额外的代码,而不要在生产环境中使用它,这样您就不会为客户端的浏览器增加死代码的负担。不断问自己是否需要某个功能、特性或代码。可以手动或使用Uglify或Google的闭包编译器等工具删除未使用的代码,甚至可以使用称为treeshaking的技术从应用程序中删除未使用的代码。Webpack等打包程序提供了这种技术。如果要删除未使用的npm包,可以使用npmprune命令。图片来源:unsplash2。随时缓存缓存通过减少延迟和网络流量来提高网站的速度和性能,从而减少显示资源所需的时间。这可以通过缓存应用程序接口(CacheAPI)或超文本传输??协议缓存(HTTP缓存)来实现。上述缓存机制能够在满足某些条件(例如发布新内容)时处理和重新生成缓存。3.避免内存泄漏高级语言JS负责几个底层管理,比如内存管理。垃圾收集在大多数编程语言中都很常见。通俗地说,垃圾回收只是收集并释放已分配给目标对象且未被程序的任何部分使用的内存。在C等编程语言中,开发人员必须使用malloc()和dealloc()函数来分配和释放内存。尽管JavaScript会自动执行垃圾收集,但有时并不完美。在JavaScriptES6中,引入了Maps和Sets及其“较弱”的兄弟姐妹。这种“较弱”的对应物称为WeakMap和WeakSet,它们持有对对象的“较弱”引用,允许对未引用的值进行垃圾回收,从而防止内存泄漏。4、尽快跳出循环大循环必然会消耗大量宝贵的时间,所以要尽快跳出循环。关键字break和continue执行此操作。编写最高效的代码是您的责任。在下面的示例中,如果循环没有中断,代码将运行循环1000000000次,这显然会导致过载。letarr=newArray(1000000000).fill('----');arr[970]='found';for(leti=0;i标签中即可。异步告诉浏览器在不影响渲染的情况下加载脚本。也就是说,页面不等待异步脚本,而是处理并显示内容。延迟是告诉浏览器在渲染完成后加载脚本。如果两者都指定,异步在现代浏览器上优先,支持延迟但不支持异步的旧浏览器将回退到延迟。这两个属性可以大大减少页面加载时间。12.使用异步代码防止线程阻塞JavaScript默认是同步的,是单线程的。但有时代码需要花费大量时间来计算。本质上,同步意味着一段代码阻止其他代码语句运行,直到执行完成。这会降低网站的整体性能。但是我们可以通过实现异步代码来避免这种情况。异步代码曾经被编写为回调,但ES6引入了一种处理异步代码的新样式,称为promises。但是如何在单线程上运行异步代码呢?这是很多人困惑的地方。在浏览器后台运行的JavaScript引擎使一切成为可能。JavaScript引擎是执行JavaScript代码的计算机程序或解释器。JavaScript引擎可以用多种语言编写。例如,支持GoogleChrome的V8引擎是用C++编写的,而支持Firefox的SpiderMonkey引擎是用C和C++编写的。这些JavaScript引擎可以在后台处理任务。根据Bryan的说法,调用堆栈识别Web应用程序编程接口(WebAPI)的功能并将其提交给浏览器进行处理。一旦浏览器完成这些任务,它们就会返回并作为回调被压入堆栈。没有浏览器,Node.js是如何工作的?事实上,驱动GoogleChrome的V8引擎也支持Node.js。13.使用代码分割图片来源:unsplash如果你有使用过GoogleLighthouse(灯塔)的经验,你一定熟悉一个叫做“firstcontentfulpaint”的指标。这是Lighthouse报告的性能部分中跟踪的六个指标之一。InitialContentPaint(FCP)衡量浏览器在用户导航到页面后渲染第一个DOM内容所花费的时间。页面上的图像、非白色元素和可缩放矢量图形(SVG)被视为DOM内容,不包括iframe内的任何内容。获得更高FCP分数的最佳方法之一是使用代码拆分。代码拆分是一种在一开始就只将必要的模块交付给用户的技术。通过减少最初传输的有效负载的大小,极大地影响FCP分数。流行的模块管理器,如webpack,提供代码分割功能。也可以在原生ES模块的帮助下加载单个模块。14.使用WebWorkers在后台运行CPU密集型任务WebWorkers允许脚本在后台线程中运行。如果你有一些高强度的任务,你可以将它们分配给WebWorkers,WebWorkers可以在不干扰用户界面的情况下运行这些任务。创建后,WebWorkers可以通过向该代码指定的事件处理程序发送消息来与JavaScript代码通信,反之亦然。来源:Unsplash掌握技巧,快乐编码!