网页加载流程&&各种路径之间的区别

网页加载流程

浏览器是怎么加载网页的?

1.1浏览器地址栏输入网址访问 会请求一次服务器

服务器会返回一个数据包 就是网页代码(html格式的文本文档)

1.2浏览器开始去运行解析html文本(此时还没有外部 图片,js,css,字体库资源)

1.2.1解析时 遇到了 img标签的src属性 会异步的 开始再次网络请求服务器 ,服务器返回数据包(图片编码) 然后渲染出来

1.2.2解析时 遇到了link-href 会异步的 开始再次网络请求服务器 ,服务器返回数据包(css编码) 然后加载

1.2.3解析时 xxxx-url会异步的 开始再次网络请求服务器 ,服务器返回数据包(对应编码) 然后加载

1.2.4解析时script-src会异步的 开始再次网络请求服务器 ,服务器返回数据包(js编码) 然后用js引擎去执行编码

1.3所有资源加载完毕了  才会触发window.onload

 各种路径之间的区别

本地相对路径（本地打开相对于文件所在位置的路径）

  在这个页面中写路径: file://x1/x2/x2/index.html  

"./src/18.jpg"  写这个路径的文件的页面是在本地打开的==> file://x1/x2/x2/src/18.jpg

"src/18.jpg" 写这个路径的文件的页面是在本地打开的 ==> file://x1/x2/x2/src/18.jpg

"file://c:/"

本地绝对路径（本地打开）

从根盘符开始写路径

"C:/Users/Administrator/Desktop/%E4%BB%A3%E7%A0%81/14-%E5%90%84%E7%A7%8D%E8%B7%AF%E5%BE%84(%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9)/index.html"

相对网络路径

当前页面的网址:  "协议://ip:port /src/news/index.html  querystring hash"

页面内部的路径:

 "./src/18.jpg" ==> "协议://ip:port /src/news/src/18.jpg"

"src/18.jpg" ==> "协议://ip:port /src/news/src/18.jpg"

思考1:

用户输入网址:

"http://192.168.6.60:8080/user/20220728/newspage.html?n=20"

打开了一个页面,在这个页面中有一个img的src是 : "./src/18.jpg"

请问192.168.6.60:8080这个服务器会受到req.url是什么?

答: "/user/20220728/src/18.jpg"

思考2:

用户输入网址:

"http://192.168.6.60:8080/user/20220728/newspage"

打开了一个页面,在这个页面中有一个img的src是 : "./src/18.jpg"

请问192.168.6.60:8080这个服务器会受到req.url是什么?

答: "/user/20220728/src/18.jpg"

它真正的网址:"http://192.168.6.60:8080/user/20220728/src/18.jpg"
 

绝对网络路径（协议开头）

"协议://ip:port /src/news/src/18.jpg"

易错思考:

用户输入网址: http://192.168.6.60:8080/user/20220728/newspage

打开了一个页面,在这个页面中有一个img的src是 : "192.168.6.60:8080/src/18.jpg"

请问192.168.6.60:8080这个服务器会受到req.url是什么?（不是协议开头 所以是相对路径）

答: "/user/20220728/192.168.6.60:8080/src/18.jpg"

它真正的网址:"http://192.168.6.60:8080/user/20220728/192.168.6.60:8080/src/18.jpg"

本地相对根路径

思考:用户本地打开: "file:///c:/xx/xx2/index.html"

页面中有一个img的src是 : "/src/18.jpg"

它真正的路径:"file:///c:/src/18.jpg"

网络相对根路径（斜杠开头）

"/src/18.jpg"

思考:

用户输入网址: http://192.168.6.60:8080/user/20220728/newspage

打开了一个页面,在这个页面中有一个img的src是 : "/src/18.jpg"

请问192.168.6.60:8080这个服务器会受到req.url是什么?

答:"/src/18.jpg"

它真正的网址:"http://192.168.6.60:8080/src/18.jpg"