Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to improve the website and rendering speed through JavaScript code optimization". The content in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to improve the website and rendering speed through JavaScript code optimization".

1) remove unused features and code

The more content you write for the site, the longer it will take to load. Therefore, when developing a Web site, you must use JavaScript Code Optimizer to optimize your JavaScript code. It will help you remove unused features, features, and code from your development environment.

Google Clouser Compiler and Uglify JS are the best JavaScript code optimization tools. These tools remove commas, comments, and dead code.

Code before optimization

Function test (mode) {var parent = Node [XSS _ clean]; if (0) {alert ("Hello. This is the code before optimization.");} else {alert ("Hello. Greetings for developers.");} return; alert (1);}

Optimized code

Function test () {alert ("Hello Greetings for developers.");}

So, what have we done here?

We removed the variable parent because it will never be used again.

In addition, we removed False if () {...} because it is a "dead code".

The return is deleted; it is also a dead code.

2) compress JavaScript code

Narrowing and obfuscating JavaScript code methods are used to transform JavaScript. However, the two methods are different. Zooming out reduces the size of the file to reduce page load time.

Some factors, such as line breaks, extra spaces, comments, and so on, can increase the size of the JavaScript file and affect the page loading speed. You can solve this problem through code compression. Even if all your JavaScript code is contained in a single string, your machine can read and start the reduced code.

3) solve the memory leak problem

We know that there is no doubt that garbage collection is automated in JavaScript, and you can't ignore the memory part. Therefore, as a front-end developer, we have to use functions such as WeakSet and WeakMap to solve the problem of memory leaks.

Therefore, you can use Chrome Dev Tools to avoid memory leaks.

4) avoid irrelevant iterations

Loops always take a lot of time to load projects, regardless of their size. Therefore, you should break the cycle soon. However, you can perform this process using two keywords: break and continue.

For example, if you don't use the break keyword; the loop will be executed 100 times.

Let arr = new array; arr [36] = 'found'; for (let I = 0; I)

< arr.length; i++) { if(arr[i] === 'found'); break; }5) 异步 JavaScript 加载：Defer 和 Async 标签 JavaScript 异步加载是同步加载的一部分。它表示你的网站现在已准备好以多流方式加载。 当浏览器遇到 时，会在 JavaScript 执行时停止创建 DOM 和 CSSOM 模型。因此，很多时候，JavaScript 代码是在主要的 HTML 代码之后编写的。 好吧，为了消除你的疑虑，让我们在这里查看示例： This text will not be visible until big.js is loaded. 现在，在 JavaScript 代码中，你可以使用 async 标记来确保 DOM 模型是并行创建的，并且不会在 JavaScript 加载或执行时停止。 如果你的 JavaScript 需要操作 HTML 或 CSS 或以特定顺序加载脚本（依赖于 jQuery 的库），请谨慎使用。 让我们看另一个例子；如果你在你的网站上使用流行的 bxSlider 和 CDN for jQuery，你可以将给定的代码添加到你的 HTML 中。 在上面的代码中，我们可以看到 bxSlider 是本地的，而 Google CDN 加载的是 jQuery。因此，如果我们尝试向字符串（包括 jQuery）添加 async 标记，如果jQuery.bxslider.min.js在jQuery.min.js之前加载，则bxSlider可能会发生错误。 因此，需要另一个标签-- defer。 如果浏览器遇到带有 JavaScript 代码的 defer 标记，则不会加载 DOM 和 CSSOM 模型。一旦 DOM 和 CSSOM 模型完成，每个defer标签脚本都会立即运行。任何脚本都将按照您编码的顺序执行。 在上面的例子中，2.js 不会被执行，直到 1.js 被加载。 这里， defer 和 async 标签准备好只对外部脚本执行（带有 src="" 标签）。如果你将它们用于像...标签这样的内部脚本，这些标签将被避免。 6) 使用 HTTP/2 协议 HTTP 协议的最先进和最新版本之一是 HTTP/2。它通过提高 JavaScript 代码性能为您提供许多功能。这将导致网站速度的提高。 HTTP/2 一起处理多个请求和响应。因此，它有助于提高 JavaScript 的加载时间。 如果你处于进退两难的境地，你可以检查这些协议之间的区别：HTTP/2 与 HTTPS。另一个测试是Aka`mai HTTP/2 演示。 7) 加载元素的正确顺序 加载过程中的元素组织是 JavaScript 代码优化的一个重要技巧。在这里， 部分中的每个元素都是预先加载的，因此它会在用户在 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： CSS Slider

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) Code testing

Code testing is an important factor in analyzing and fixing performance problems such as memory leaks.

Then, you can implement the given JavaScript testing tool to enhance JavaScript performance.

Console time ()

Console.time () is used to track when the operation is executed.

Initially, you must simply call:

Console time (label)

Here, "label" can be the unique name of your timer. At the end of the process, you can call:

End of console time (label)

Here, the operation time is monitored from start to finish.

YSlow

YSlow is an open source performance tool. It analyzes the performance of your site and provides optimization tips. Your site will be called by this tool and its performance will be compared with the standards of Yahoo's high-performance website.

This tool will execute your site and compare its performance with the standards of Yahoo's high-performance website. However, it will give you a score between 0% and 100%.

JSFiddle.net

JSFiddle.net is a Web development and coding environment that executes in your Web browser.

It supports:

JavaScript, HTML, CSS and CoffeeScript

Templates for React, Vue, and jQuery

Ability to demonstrate code snippets and share them for code collaboration

Simple error reporting for GitHub problems

Thank you for your reading, the above is the content of "how to improve the website and rendering speed through JavaScript code optimization". After the study of this article, I believe you have a deeper understanding of how to improve the website and rendering speed through JavaScript code optimization. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.