How to implement JS synchronization, asynchronousness, and lazy loading

This time I will bring you how to implement JS synchronization, asynchronous, and delayed loading, and what are the precautions for implementing JS synchronization, asynchronous, and delayed loading. The following is a practical case, let's take a look.

1: Synchronous loading

The most commonly used method.

Synchronous mode, also known as blocking mode , will prevent the browser from subsequent processing and stop subsequent parsing. Only when the current loading is completed, the next step can be performed. Therefore, synchronous execution is safe by default. But if there are behaviors such as outputting document content, modifying DOM, redirection, etc. in js, it will cause page congestion. Therefore, it is generally recommended to place the HTML5 new attributes: async and defer attributes

defer attribute: It appears in IE4.0. There will be no document.write and dom modifications in the defer attribute declaration script. The browser will download other scripts with defer attributes in parallel. without blocking subsequent processing of the page. Note: All defer scripts must be executed in order.

async attribute: HTML5 new attribute. The script will be executed as soon as possible after downloading. The function is the same as defer, but there is no guarantee that the script will be executed in order. They will complete before the onload event.

Firefox 3.6, Opera 10.5, IE 9 and the latest Chrome and Safari are Supports async attributes. You can use async and defer at the same time, so that all IE after IE 4 support asynchronous loading.

Without the async attribute, the script will be obtained (downloaded) and executed immediately, blocking the browser's subsequent processing. If there is an async attribute, the script will be downloaded and executed asynchronously, while the browser continues subsequent processing.

总结： 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。

三：延迟加载

有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。

JS的加载分为两个部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载完成后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何需求。

解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？将JS内容作为Image或者Object对象加载缓存起来，所以不会立即执行，然后在第一次需要的时候在执行。

1：模拟较长的下载时间：

利用thread让其sleep一段时间在执行下载操作。

2：模拟较长的JS代码执行时间

var start = Number(new Date());
while(start + 5000 > Number(new Date())){//执行JS}

这段代码将使JS执行5秒才完成！

JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue自动化表单有哪几种方式

vue-element怎么做出音乐播放器

The above is the detailed content of How to implement JS synchronization, asynchronousness, and lazy loading. For more information, please follow other related articles on the PHP Chinese website!