How does JS implement the progress percentage of webpage loading ??

Php Chinese network (www.php.cn) provides the most comprehensive basic tutorial on programming technology, introducing HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, basic knowledge of MySQL and other programming languages. At the same time, this site also provides a large number of online instances, through which you can better learn programming... Reply content: the percentage does not have to be very accurate. the correct value can be given at several key points. Other median values can be embedded with script labels in the head by program. The higher the front, the better, be sure to write it before all external css and js files.

You must know how many css and js are to be loaded on the page, right ~
The loading time of inline styles and scripts is negligible ~
Therefore, the percentage of listener files loaded can be roughly regarded as the percentage of page loading. for example, if there are 10 files in total, the third file is set to 30% after loading.

---- Css detection:
The most appropriate method for css check loading is to write a predefined style, such as # link_style_onload_check {opacity: 0.3;}, which is placed at the end of the css file;

Then create a dom with the id set as link_style_onload_check (which styles can be agreed upon in advance) and put them in the body.

Write a round robin interval of 5 milliseconds. if the opacity value of this dom is detected to be 0.3, it indicates that the style loading is complete.

---- Js detection:
The same is true for js. The End Is window or another global object with an agreed value, such as window. link_script_onload_check = true;
By setting up round robin, you can check the completion of the script (although onload is more direct... it is troublesome to get the handle of the script tag)

---- Html detection:
Html loading is very fast. you can directly listen to the onload event of document. body. you can also listen to some major dom. it is best to use id. Otherwise, the performance is too bad. IE67 will be discarded if querySelector is required.

The last step is to bind the onload of a window and set it to 100%.