网页中的路径

        网页中的路径大致上可以分为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然后绘制页面