前端日拱一卒D2——浏览器基础

最新推荐文章于 2025-09-07 21:17:08 发布

weixin_33691700

最新推荐文章于 2025-09-07 21:17:08 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

文章标签：前端运维后端 ViewUI

原文链接：https://juejin.im/post/5b50cd1cf265da0fae4f1bb5

本文详细介绍了从输入URL到页面完全加载的过程，包括DNS解析、建立连接、服务器响应、浏览器解析渲染等内容。同时探讨了浏览器的组成结构及其工作原理。

余为前端菜鸟，感姿势水平匮乏，难观前端之大局。遂决定循前端知识之脉络，以兴趣为引，辅以几分坚持，望于己能解惑致知、于同道能助力一二，岂不美哉。

本系列代码及文档均在此处

渲染引擎负责解析html和css，将css规则应用到html标签上，并将html渲染为页面上具体的dom内容

页面元素位置变化将导致重排和重绘(即布局和绘制阶段重新渲染)，位置不变但是显示样式变化则会导致重绘。重新渲染的代价比较大，所以应劲量避免重排，减少重绘。

两者在渲染引擎部分很类似，但也有区别。前者的css解析是在html解析完生成内容sink之后进行的，结合构建的树叫做frame tree，后者css解析和html解析可以认为是并行的。

html解析

从html文本标签经过词法分析->parse成dom对象，每个标签中的每个元素在解析后对应都有一个原始类型
```
let element = document.getElementById('div')
let type = Object.prototype.toString.call(element).slice(8, -1)
console.log(type)
// HTMLDivElement
复制代码
```
dom元素标签是文本化的html标识，dom元素对象是一个带有父子关系的树形对象
css解析

css文件被解析成一个CSSStyleSheet对象，该对象内存在多个CSSStyleRule，每个rule包含有选择器信息和声明对象（样式信息）
render tree

生成render tree的时候会遍历dom树的节点，为每个节点找到css rule并根据优先级（老生常谈的权重判断方式）将多条rule合并生成最终该节点的样式信息添加到render tree上。

cache-control/expire 前者是相对时间，后者是绝对时间

// 前端设置
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 16 Jul 2018 23:00:00 GMT" />
复制代码

操作

document.cookie = 'name=123' // add
document.cookie = 'name=1234' // edit
document.cookie = 'name=1234;expires=xxxx' // expires为过去时间，则delete
复制代码

在客户端进行数据存储，适用场景不是很多，也存在一些安全问题，且行且看

这部分涉及到service worker，不是三言两语能说清，所以请转到这里

虽发表于此，却毕竟为一人之言，又是每日学有所得之笔记，内容未必详实，看官老爷们还望海涵。