如何通过 JavaScript 代码优化提高网站和渲染速度

2021-09-16 16:47:23 浏览数 (2767)

自发明以来，JavaScript 就真正统治了前端编程开发人员的世界。它允许前端开发人员开发交互式、快速、健壮、以用户为中心且功能丰富的 Web 应用程序。因此，它已成为软件开发行业中最流行的语言。

有报告指出，全球有超过 15 亿个网站正在使用 JavaScript 语言。但是，使用该技术的网站数量约为 95%。因此，我们可以得出结论，每个计算设备都使用 JavaScript，包括 iOS/macOS、Android、Windows、Linux、智能电视等。

“软件吞噬了世界，网络吞噬了软件，而 JavaScript 吞噬了网络。”

每个前端开发人员都熟悉 JavaScript。但是，如果在没有专业知识或知识的情况下使用它，它可能是一把双刃剑。如果开发人员不熟悉 JavaScript 语言并且为网站编写的代码很差，则可能会减慢你的网站速度，对加载时间和渲染速度产生负面影响。 

在开发现代应用程序时，分析、监控和优化其性能至关重要。但是，你应该知道你的网站有多快。性能是任何在线企业成功的重要因素。

所以，现在你一定想知道，为什么速度对网站的成功很重要？

为什么速度很重要？

网站速度或性能对你在线业务的成功起着重要作用。与性能低下的网站相比，用户通常更喜欢高性能的 JavaScript 网站并被吸引。

“业绩直接影响了公司的底线。” - YouTube

Pinterest 减少了 40% 的感知等待时间，增加了 15% 的搜索引擎流量和注册。

COOK 将平均页面加载时间减少了 850 毫秒，从而将转化次数提高了 7%，将跳出率降低了 7%，并将每个会话的页面增加了 10%。

根据该报告，网站性能不佳将对业务目标产生负面影响。因此，根据BBC的声明，他们的网站加载时间每增加一秒，他们就会失去大约 10% 的用户。因此，建议利用全面的 JavaScript 开发实力来推动你的业务。 

让我们了解一下现实世界统计数据中为什么代码优化很重要的原因： 

  • 谷歌的研究表明，如果网页在三秒内没有加载，大约​53%​ 的访问者会离开你的网站。 
  • ​88% ​的在线客户在体验不好后不太可能返回网站。 
  • 网站速度下降​100 毫秒​也会使转化率下降近​ 7%​。 
  • ​47%​ 的用户预计平均网站的加载时间最长为 ​2 秒​。 

在这里，在本文中，我们将介绍一些有用的工具，它们将帮助你提高启用 JavaScript 的网站的速度并避免黑暗的副作用。

如果你没有为你的项目正确优化你的 JavaScript 代码，你可能会面临以下问题： 

  • 相当数量的主机交互 
  • 缺乏事件处理 
  • 代码改组 
  • 低效循环 

如何更快地加载 JavaScript

文件压缩、异步代码和延迟标签的使用以及浏览器缓存是更快加载 JavaScript 的首选方式。 

如何提高 JavaScript 的性能？

代码优化在提高 JavaScript 网站的性能方面发挥着重要作用。你可以避免内存泄漏，删除未使用的代码、文件、功能，并使用压缩数据以获得更好的性能。 

此外，你可以实施 CDN，最大限度地减少外部请求，并专注于创建干净的代码以提高整体性能。

缩小有助于提高性能吗？

缩小方法将帮助你删除未使用的函数、注释、逗号等。最终，它将提高 Web 性能。 

所以，现在不用多说，让我们专注于为前端开发人员优化 JavaScript 代码的技巧。 

1) 删除未使用的功能和代码

你为网站编写的内容越多，加载所需的时间就越长。因此，在开发网站时，必须使用 JavaScript Code Optimizer 优化 JavaScript 代码。它将帮助你删除开发环境中未使用的功能、特性和代码。 

Google Clouser Compiler 和 Uglify JS 是最好的 JavaScript 代码优化工具。这些工具删除逗号、注释和死代码。

优化前的代码

function test(mode) 
{ 
var parent = node.parentNode; 
if(0) 
{ 
alert(“Hello. This is the code before optimization.”); 
} 
else 
{ 
alert (“Hello. Greetings for developers.”); 
} 
return; 
alert(1); 
}

优化后的代码

function test() 

{
alert (“Hello. Greetings for developers.”); 
}

那么，在这里，我们做了什么？ 

  • 我们删除了变量 parent，因为它永远不会再被使用。 
  • 此外，我们删除了 False if() {...} 因为它是一个“死代码”。 
  • 退货被删除；它也是死代码。 

2) 压缩 JavaScript 代码

缩小和混淆 JavaScript 代码方法用于转换 JavaScript。但是，这两种方法是不同的。缩小可以减少文件的大小以减少页面加载时间。

换行符、额外空格、注释等一些因素会增加 JavaScript 文件的大小并影响页面加载速度。通过代码压缩，您可以解决此问题。即使您的所有 JavaScript 代码都只包含在一个字符串中，您的机器也能够读取和启动缩小的代码。

3) 解决内存泄漏问题

我们知道，毫无疑问，垃圾收集在 JavaScript 中是自动执行的，您不能忽略内存部分。所以，作为前端开发者，不得不使用WeakSet、WeakMap这样的功能来解决内存泄漏的问题。

因此，你可以使用 Chrome Dev Tools 来避免内存泄漏问题。

4) 避免不相关的迭代

循环总是消耗大量时间来加载项目，无论其大小如何。因此，你应该很快打破循环的大循环。但是，你可以使用两个关键字来执行此过程：break和continue。 

例如，如果你不使用 break 关键字；这个循环将执行 100 次。 

let arr = new array(100); 
arr[36] = ‘found’; 
for (let i = 0; i < arr.length; i++) 
{ 
if(arr[i] === ‘found’); 
break; 
}

5) 异步 JavaScript 加载：Defer 和 Async 标签

JavaScript 异步加载是同步加载的一部分。它表示你的网站现在已准备好以多流方式加载。

图片

当浏览器遇到<script src="some.js"></script> 时，会在 JavaScript 执行时停止创建 DOM 和 CSSOM 模型。因此，很多时候，JavaScript 代码是在主要的 HTML 代码之后编写的。

好吧，为了消除你的疑虑，让我们在这里查看示例：

<html>  
<head>  
<script src="big.js"> 
</script> 
</head>  
<body> This text will not be visible until big.js is loaded. </body>  
</html>

现在，在 JavaScript 代码中，你可以使用 async 标记来确保 DOM 模型是并行创建的，并且不会在 JavaScript 加载或执行时停止。

如果你的 JavaScript 需要操作 HTML 或 CSS 或以特定顺序加载脚本（依赖于 jQuery 的库），请谨慎使用。

让我们看另一个例子；如果你在你的网站上使用流行的 bxSlider 和 CDN for jQuery，你可以将给定的代码添加到你的 HTML 中。 

<!-- jQuery library (served from Google) -->  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
<!-- bxSlider Javascript file -->  
<script src="/js/jquery.bxslider.min.js"></script>  
<!-- bxSlider CSS file -->  
<link href="/lib/jquery.bxslider.css" rel="stylesheet">

在上面的代码中，我们可以看到 bxSlider 是本地的，而 Google CDN 加载的是 jQuery。因此，如果我们尝试向字符串（包括 jQuery）添加 async 标记，如果jQuery.bxslider.min.js在jQuery.min.js之前加载，则bxSlider可能会发生错误。 

因此，需要另一个标签—— defer。

如果浏览器遇到带有 JavaScript 代码的 defer 标记，则不会加载 DOM 和 CSSOM 模型。一旦 DOM 和 CSSOM 模型完成，每个defer标签脚本都会立即运行。任何脚本都将按照您编码的顺序执行。 

<script src="1.js" defer></script> 
<script src="2.js" defer></script>

在上面的例子中，2.js 不会被执行，直到 1.js 被加载。 

这里， defer 和 async 标签准备好只对外部脚本执行（带有 src=”” 标签）。如果你将它们用于像<Script>...</Script>标签这样的内部脚本，这些标签将被避免。 

6) 使用 HTTP/2 协议

HTTP 协议的最先进和最新版本之一是 HTTP/2。它通过提高 JavaScript 代码性能为您提供许多功能。这将导致网站速度的提高。

HTTP/2 一起处理多个请求和响应。因此，它有助于提高 JavaScript 的加载时间。

如果你处于进退两难的境地，你可以检查这些协议之间的区别：HTTP/2 与 HTTPS。另一个测试是Aka`mai HTTP/2 演示。

图片

7) 加载元素的正确顺序

加载过程中的元素组织是 JavaScript 代码优化的一个重要技巧。在这里， <head> 部分中的每个元素都是预先加载的，因此它会在用户在 Web 浏览器上看到任何内容之前出现在用户的屏幕上。因此，管理订单以在屏幕上显示结果至关重要。

在这里，页面的无组织元素总是向用户显示一个白页。因此，以适当且合乎逻辑的方式组织所有元素非常重要。它肯定有助于提高用户参与度。

图片

通过深入研究，我们得出结论，如何加载订单会影响用户关注度。

0 至 16 毫秒

一个屏幕每秒更新 60 次。此数据显示单帧显示在屏幕上需要多长时间 (1000/60=16)。人们擅长监控运动，如果运动的期望没有得到满足，无论是通过可变帧速率还是周期性暂停，他们都会感到沮丧。 

0 到 100 毫秒

如果它在此时间范围内响应用户操作，他们会认为结果是立竿见影的。 

行动和反应之间的任何联系都已被打破。 

100 到 300 毫秒

用户会遇到轻微但可预测的延迟。 

300 至 1000 毫秒

对于大多数用户来说，加载页面或切换视图是一项任务。 

1000+ 毫秒

用户在 1000 毫秒（1 秒）后失去对他们正在处理的任务的关注。 

10,000+ 毫秒

用户很可能会感到沮丧并放弃任务；他们以后可能会也可能不会回来。 

好吧，Google 称其为RAIL 模型。 

8) 使用 JavaScript CDN

在 CDN 的帮助下，你可以显着提高网站的速度和性能。当您使用 CDN 时，你将网站的静态内容链接到全球范围内的扩展服务网络。好吧，如果您的网站迎合海外受众，这一点非常重要。

CDN 从最近的服务器加载您的数据并呈现给访问者。在 CDN 的帮助下，你的文件将自动压缩或优化，以便为访问者快速交付。这使事情运行得更快。

图片

好吧，你可以比较各种 CDN，看看哪一种最适合你。 

9) 使用 CSS3 效果代替 JavaScript

当我们将 CSS3 与其之前的版本 1.0 和 2.0 进行比较时，旧版本的功能不那么强大，并且需要额外的 JavaScript 来实现更高级的样式效果。但是，CSS3 提供了许多需要较少 JavaScript 的功能。此外，CSS 可以预编译，因此它在 CPS 上消耗的内存比 JavaScript 少。

让我们在这里考虑一个例子。

无需任何 JavaScript，你就可以在 CSS3 和 HTML5 中添加CSSSlider。 

这是一个尝试： 

HTML：

<!DOCTYPE html>
<html lang="en"></html>
<head></head>
<meta charset="UTF-8">
<title>CSS Slider</title>
<body></body>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider"></div>
<figure></figure>
<img src="apple.jpg" alt="">
<img src="strawberry.jpg" alt="">
<img src="cherry.jpg" alt="">
<img src="pineapple.jpg" alt="">
<img src="kiwi.jpg" alt="">

CSS：

@keyframes slidy  
{  
0% { left: 0%; }  
20% { left: 0%; }  
25% { left: -100%; }  
45% { left: -100%; }  
50% { left: -200%; }  
70% { left: -200%; }  
75% { left: -300%; }  
95% { left: -300%; }  
100% { left: -400%; }  
} 
body { margin: 0; }  
div#slider { overflow: hidden; }  
div#slider figure img { width: 20%; float: left; }  
div#slider figure  
{  
position: relative;  
width: 500%;  
margin: 0; left: 0 text-align: left;  
font-size: 0; animation: 30s slidy infinite; 
}

10) 代码测试

代码测试是分析内存泄漏等性能问题并对其进行修补的重要因素。 

那么，你可以实现给定的 JavaScript 测试工具来增强 JavaScript 性能。

控制台时间（）

Console.time()用于跟踪操作执行的时间。

最初，你必须简单地调用：

控制台时间（标签）；

在这里，“ label ”可以是你的计时器的唯一名称。在该过程结束时，你可以调用：

控制台时间结束（标签）；

在这里，将从开始到结束监视操作时间。

YSlow

YSlow是一个开源性能工具。它分析你的网站性能并提供优化提示。您的网站将被此工具调用，并将其性能与雅虎高性能网站的标准进行比较。

该工具将执行您的网站并将其性能与雅虎高性能网站的标准进行比较。但是，它会给你一个介于 0% 和 100% 之间的分数。

JSFiddle.net

JSFiddle.net是一个在您的 Web 浏览器中执行的 Web 开发编码环境。

它支持：

  • JavaScript、HTML、CSS 和 CoffeeScript
  • React、Vue 和 jQuery 的样板
  • 能够演示代码片段并共享它们以进行代码协作
  • GitHub 问题的简单错误报告

总结

在开发 JavaScript 应用程序时，必须在代码可读性和优化之间取得平衡。众所周知，我们的代码可能会被机器中断，但我们有责任维护它以获得更好的性能。

因此，作为前端开发者，本文将帮助你优化 JavaScript 代码并提高网站速度。但是，要实现或记住 JavaScript 应用程序的所有给定要点并不容易。因此，你应该保留优化 JavaScript 代码的技巧列表或保存本文以供将来参考。

我希望本文的提示和信息可以帮助你开发一个高性能的 JavaScript 网站。