node.js --- 各类路径 以及 网页的加载流程

网页中的路径

        网页中的路径大致上可以分为6类：

1) 本地相对路径 ：

        比如："./src/index.js"或者"src/index.js" 这两种写法都一样，表示写这个路径的文件的页面是在本地打开的；也就是它的完整网络地址是：file://xxx/xxx/xxx/src/index.js

2）本地绝对路径:

        比如："D:/xxx/xxx/index.js";也就是路径要从文件的根目录开始写

3）相对网络路径：

        比如：当前页面的网络地址为：http://123.132.12.3:8081/src/a/index.htnl

                如果你写在页面内部的地址是："./app/b.js"或者"app/b.js"，访问时那么实际上的网络路径：http://123.132.12.3:8081/src/a/app/b.js

4）绝对网络路径：

        就是将要访问的网络地址完整的写出来访问：比如：http://123.132.12.3:8081/src/a/app/b.js

5）本地相对根路径：

        用户从本地打开的文件页面中有一个文件的src是"/src/a.js"，它访问时的真实路径是当前文件网址加上"/src/a.js"；比如当前文件页面网址是"file:///D:/xx/xx/index.html",访问其中src是"/src/a.js"文件时的地址是："file:///D:/xx/xx/src/a.js"

6）网络相对根路径：

        比如用户输入网址: http://123.123.12.3:8081/user/20220728/newspage
打开了一个页面,在这个页面中有一个img的src是 : "/src/1.jpg"，那么这个服务器收到的req.url网址是"/src/1.jpg"

网页加载流程 

        一个网页的渲染资源是一个个动态加载的数据组合而成的,不是一次就把整个渲染的页面加载了        

        因此，浏览器加载网页的过程如下：

        1、.用户浏览器地址栏输入网址==>请求后端,后端传输一份html编码的文本文档然后就断开连接了。然后服务器会返回一个数据包 就是网页代码(html格式的文本文档)

        2、浏览器开始运行html文件的编码

            2.1、解析时 遇到了 img标签的src属性 会异步的 开始再次网络请求服务器 ,服务器返回数据包(图片编码) 然后渲染出来 
            2.2、解析时 遇到了link-href 会异步的 开始再次网络请求服务器 ,服务器返回数据包(css编码) 然后加载
            2.3、解析时 xxxx-url会异步的 开始再次网络请求服务器 ,服务器返回数据包(对应编码) 然后加载
            2.4、解析时script-src会异步的 开始再次网络请求服务器 ,服务器返回数据包(js编码) 然后用js引擎去执行编码

        以此类推执行，直到解析完所有标签及文件

     3、页面渲染

所有资源加载完毕了  才会触发window.onload，然后页面按照解析好的DOM模型和CSS层叠样式表结合为renderTree然后绘制页面