学Web前端看这就完事了，2024最全前端面试系列（浏览器原理，前端开发零基础

1. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1) script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none

2. 对每一个可见节点，找到恰当的CSSOM规则并应用

3. 发布可视节点的内容和计算样式

4. js解析如下：

5. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading

6. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容

7. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素

8. 当文档完成解析，document.readState变成interactive

9. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()

10. 浏览器在Document对象上触发DOMContentLoaded事件

11. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete，window触发load事件

12. 显示页面（HTML解析过程中会逐步显示页面）

浏览器渲染步骤

---

1. HTML 解析出 DOM 树

2. CSS 解析出 Style Rules

3. 两者关联生成 Render Tree

4. Layout （布局）根据 Render Tree 计算每个节点信息

5. 对布局树进行分层，并生成分层树。

6. 为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分图块，并栅格化将图块转换成位图。

7. 合成线程发送绘制图块命令给浏览器进程。浏览器进程根据指令生成页面，并显示到显示器上。

注意

1. 解析文档中遇到Script标签，会立即解析脚本，停止解析文档（因为 JS 会改变 DOM 和 CSS，继续解析会造成浪费），如果是外部 Script，会等待脚本下载完成之后再继续解析文档。

而现在Script标签增加了async属性，脚本解析会将改变DOM和CSS的地方解析出来，追加到DOM Tree和Style Rules。

2. 创建布局树，遍历 DOM 树中的所有可见节点，并把这些节点加到布局中；而不可见的节点（属性包含 display: none）会被布局树忽略掉。最后计算 DOM 元素的布局信息，使其都保存在布局树中。布局完成过程中，如果有js操作或者其他操作，对元素的颜色，背景等作出改变就会引起重绘，如果有对元素的大小、定位等有改变则会引起回流。

重排和重绘

---

重排（reflow / 回流）：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式。

触发reflow情形

下面几种情况会发生重排：

（1）浏览器尺寸改变（resize）

（2）修改网页默认字体

（3）修改CSS样式改变尺寸（包括display: none)

（4）JS操作DOM树

（5）一些影响布局的动画

（6）使用JS脚本获得一些布局属性时，比如offsetTop

减少reflow方法

减少重排方法:

（1）不要逐个修改DOM样式，统一修改

（2）对需要进行复杂操作的DOM元素，先设置display: none

（3）为html动画原件使用 absolute 布局或 fixed 布局，这样不会引起重排和重绘。

（4）减少使用table布局，因为稍加改动就会导致table的重新布局。

（5）将offsetTop等属性缓存成局部变量。

浏览器本地存储方案的比较

---

浏览器存储主要有 cookie 、localStorage 、sessionStorage。

其中 sessionStorage 和 localStorage 是 HTML5 新特性。

sessionStorage：为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）

localStorage：本地离线存储，在浏览器关闭，然后重新打开后数据仍然存在。

cookie

操作方式：

document.cookie = “username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/” // 设置cookie

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT” // 删除cookie

参数说明

expires

如果设置过去的时间，则删除cookie；如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。

path

建立cookie目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个cookie。

localStorage

IE8+支持，每个域名限制5M。打开同域的新页面也能访问得到

操作方式：

window.localStorage.setItem(key, value) // 保存

window.localStorage.getItem(key) // 读取

window.localStorage.removeItem(key) // 删除

window.localStorage.clear() // 清除所有

sessionStorage

sessionStorage操作的方法与localStroage是一样的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。

刷新页面sessionStorage不会清除，但是打开同域新页面访问不到

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

==
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-dntXrNQX-1712526005607)]