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

2024-10-26 百科资讯

这篇文章主要讲解了“怎么通过JavaScript代码优化提高网站和渲染速度”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么通过JavaScript代码优化提高网站和渲染速度”吧！

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

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

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

优化前的代码

functiontest(mode){varparent=node.parentNode;if(0){alert(“Hello.Thisisthecodebeforeoptimization.”);}else{alert(“Hello.Greetingsfordevelopers.”);}return;alert(1);}

优化后的代码

functiontest(){alert(“Hello.Greetingsfordevelopers.”);}

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

我们删除了变量 parent，因为它永远不会再被使用。

此外，我们删除了 False if() {...} 因为它是一个“死代码”。

退货被删除；它也是死代码。

2) 压缩 JavaScript 代码

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

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

3) 解决内存泄漏问题

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

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

4) 避免不相关的迭代

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

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

letarr=newarray(100);arr[36]=‘found’;for(leti=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><scriptsrc="big.js"></script></head><body>Thistextwillnotbevisibleuntilbig.jsisloaded.</body></html>

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

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

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

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><scriptsrc="/js/jquery.bxslider.min.js"></script><linkhref="/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标签脚本都会立即运行。任何脚本都将按照您编码的顺序执行。

<scriptsrc="1.js"defer></script><scriptsrc="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：

<!DOCTYPEhtml><htmllang="en"></html><head></head><metacharset="UTF-8"><title>CSSSlider</title><body></body><basehref="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"><divid="slider"></div><figure></figure><imgsrc="apple.jpg"alt=""><imgsrc="strawberry.jpg"alt=""><imgsrc="cherry.jpg"alt=""><imgsrc="pineapple.jpg"alt=""><imgsrc="kiwi.jpg"alt="">

CSS：

@keyframesslidy{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#sliderfigureimg{width:20%;float:left;}div#sliderfigure{position:relative;width:500%;margin:0;left:0text-align:left;font-size:0;animation:30sslidyinfinite;}10) 代码测试

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

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

控制台时间（）

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

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

控制台时间（标签）；

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

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

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

YSlow

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

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