~随笔B022~浏览器加载页面时，对用户提示loading...

　　在系统研发过程中，为提供更好的用户体验，在网络不佳或者，后端逻辑需要花费较长时间处理时，各PC/APP会给用户提示loading...

　　一.实现逻辑。

　　loading.show()当前HTML页面加载完毕loading.hide()——>用户点击操作按钮loading.show()——>后端逻辑处理，封装页面数据——>指定下一个HTML页面

　　1.我们平时在浏览百度等网页时会发现，有时会有空白页的显示。打开检查，就知道，这是这并不是什么都没有，其中包含html页面的header部分。

　　此时，是后端逻辑已处理完毕且浏览器去服务器端加载相应的css渲染或js,尚未解析body部分。

　　2.代码部分。

　　将写好的loading.html页面引入到各个需要提示加载中页面的<head>首行，或更前部分，如下

　　原理：当浏览器加载当某html页面时，会首先解析其<head>部分，如果我们把页面<#include "common/loading.html">到当前html中，则浏览器会将其预加载到<body>部分，即可给用户显示加载中的样式。——>当页面加载完毕后，将加载提示隐藏

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/css/style.css"/>
        <#include "common/loading.html">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>访视</title>
        <script src="/js/flexible.js"></script>
        <link rel="stylesheet" type="text/css" href=" /css/commons.css"/>
        <link rel="stylesheet" type="text/css" href=" /css/interview.css"/>
        <link rel="stylesheet" type="text/css" href="${req.contextPath}/js/layui/css/layui.css"/>
        <link rel="stylesheet" type="text/css" href="${req.contextPath}/plugin/pagination/pagination.css" /> 
        <script src="/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="${req.contextPath}/plugin/nicevalidator/jquery.validator.min.js?local=zh-CN"></script>
        <script type="text/javascript" src="${req.contextPath}/plugin/pagination/jquery.pagination.js"></script>
        <script src="/js/index.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/interview.js" type="text/javascript" charset="utf-8"></script>

二.相关资料

JavaScript的单线程：

JS语言的一大特点就是单线程，也就是说，同一个时间只能做一件事情。之所以是单线程，是因为与它的用途有关，作为浏览器脚本语言，JS的主要用途是与用户互动以及操作DOM。这决定了它只能是单线程，否则会带来复杂的同步问题。为了利用多核CPU的计算功能，HTML5提出了web worker标准，允许JS脚本创建多个线程，但是子线程完全受主线程控制，且不能操作DOM，所以这个新标准并没有改变JS单线程的本质。

加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。
遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载，但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。

原因：JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因。
办法：可以将外部引用的js文件放在</body>前。

虽然css文件的加载不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。

原因：可能会有 var width = $('#id').width()，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。这也是css阻塞后续js的根本原因。
办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。