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