dns-prefetch
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="//cdn.xxx.com">
</head>
页面一加载, 就立即把 href 里指定的域名做 dns 查询然后缓存起来, 等真正请求这些域名下资源的时候, 就省去了 dns 查询时间, 提高页面加载速度
资源请求
浏览器 < ------ > 后端服务器
请求的资源可以是 HTML, CSS, JS 等通过 http 请求得来的任何内容,
发起请求时, 浏览器带一堆信息, 去后端服务器上寻找资源.
该请求包含两部分, 一个是 Request Header 请求头, 里面包含 cookie.
第二部分是请求携带的参数, get 请求一般在 url 里, post 的请求参数会放到请求的 body,
当这些信息到达服务器以后, 服务器根据这些过来的信息, 找到匹配的资源, 返回给浏览器.
返回的信息包含三部分, 一个是 status状态码, 表示请求的结果是否成功. 一个是 responseheader响应头, 包含了文本长度, 缓存时间, 压缩方式等等. 第三部分是响应内容, 如果是图片, 返回的 body 里是 图片信息, 如果接口的话 body 里就是 json 字符串.
浏览器解析过程
最先加载的一般是 html 文件, 在加载 html 的同时, 构建 dom 树, 遇到一个节点就放到树里, 如果加载 html 的时候遇到 js 文件, 就先暂停构建 dom 树, 先让 js 加载和执行, 等它的事结束了其他的再走. 构建 dom 树的过程中遇到 style 标签不造成阻塞. dom 树的构建和样式的加载会并行. dom 树构建好后开始构建渲染树, 渲染树是 dom 树和 css 样式表结合的产物, 不同浏览器的渲染树构造机制不同 , 然后根据每个元素大小和位置构建出布局. 最后一步就是调用浏览器负责显示的部分将元素按照对应的样式和位置绘制在屏幕上.