HTML中频八股

此处记录个人笔记，一些AI拓展阅读可以到网站笔记上进行阅读 飞书文档思维导图

重点

1.请简述重排重绘的概念和影响

八股链接 MDN-重排 MDN-重绘 Minimizing browser reflow Understanding Reflow and Repaint in the browser

重排（reflow）,也叫回流

是浏览器重新计算DOM位置或形状的行为

重绘（repaint）

是浏览器重新计算DOM的外观，比如背景色，可见性（visibility）等不影响位置布局的操作

频繁的重排重绘会增大开销，造成浏览器卡顿等影响

重排一个元素，可能还会影响到其父子元素等所有相关的在dom树上的node节点

重绘一般发生在重排之后，重绘的开销一般比重排小

重排一定重绘，重绘不会导致重排

2.div和span的区别是什么？

八股链接 MDN-div MDN-span

div和span都是无语义的用于布局或添加样式的HTML标签

<div> 多用于划分页面结构、布局模块

<span> 多用于包裹文本内容，进行局部样式控制

不同点在于div是块级元素，span是行内元素

区分他们就是区分block和inline的区别

3.请描述HTML渲染的过程

八股链接 MDN-渲染 Critical Rendering Path-关键路径渲染

阅读上方的文档后，从TCP握手+建立https连接，到发送第一个http请求后返回HTMl页面开始

整个HTML渲染流程还是很清晰的

首先区分两个对象模型，DOM和CSSOM，一个是文档对象模型，一个是CSS对象模型

DOM构建是增量的、CSSOM则不是

增量构建大概就是，从HTML响应（服务器最初返回的）->HTML标记（Toekn）->节点（node）->DOM树，其中每个节点都是由开始标记，结束标记组成，中间会有描述信息，如果一组开始和结束标签中间还有另一组开始结束标签，就出现了层级结构

CSSOM构建是阻塞渲染的，只有执行完获取到完整的css规则后才会构建完成（这是由于css具有覆盖性，前面的样式会被后面的覆盖决定的）

因此最初的顺序就是

1. 构建DOM
2. 构建CSSOM 之后再将二者合并为渲染树
3. 合并为渲染树（只包含可见内容） 构建完成后浏览器计算布局并绘制
4. 浏览器计算布局
5. 浏览器绘制页面

专业一些

1. 客户端和服务器安全连接，包括TCP三次握手和HTTPS连接
2. 安全连接建立后，浏览器发送HTTP请求到服务器，服务器返回HTML文档
3. 浏览器接受到HTML后开始解析，使用分词生成标记（token），标记再创建节点（node），最后节点组成DOM树，这个过程是增量进行的，意味着浏览器可以一边接受数据（由于TCP发送分片的原因，一些外部资源还会使用预加载扫描器加载，一边解析和构建DOM树。
4. 在DOM构建过程中，如果解析到css文件，浏览器会使用预加载扫描器开始下载这些资源，下载完成后开始构建CSSOM树，并且CSSOM树的构建过程是阻塞渲染的，直到构建完成才能进行下一步
5. 当DOM树和CSSOM树构建完成后，将二者结合为渲染树，合并过程中，移除不可见的元素，最终构建出仅包含可见内容的渲染树
6. 浏览器根据渲染树的信息计算每个元素的尺寸和位置，这一过程是布局（也可以看作是一次特殊的reflow）
7. 最后浏览器根据布局的结果进行绘制。完成这一过程后，一些后续变化可能导致repaint（重绘）

到此为止，一次完整的HTML渲染就结束了

DOM的构建之所以是增量的，可以形象地理解为“边吃边消化”的过程。想象一下你在吃一条长长的意大利面条，而不是等到整条面条都塞进嘴里才开始咀嚼。你是一边吸食一边咀嚼，这样就能更快地享受美食并且不会噎到。 类似地，当浏览器从服务器接收HTML文档时，它并不是等待整个文档下载完成之后才开始解析和处理的。相反，浏览器会一边接收数据（HTML代码），一边进行解析，将接收到的部分即时转化为标记（token）、节点（node），并逐步构建DOM树。每当遇到一个新的标签（比如<div>、<p>等）或闭合标签时，浏览器就会更新DOM树，添加相应的节点，并建立这些节点之间的层次关系。 这种“边接收边处理”的方式有几个优点： 提高效率：不必等待整个文件下载完毕就可以开始处理已接收的数据，从而加快了页面加载速度。 早期发现错误：如果文档中有语法错误，浏览器可以更早地发现问题，而不需要等到全部内容都被下载下来才发现。 预加载资源：在构建DOM的过程中，一旦遇到外部资源引用（如图片、样式表或脚本文件），浏览器可以立即开始预加载这些资源，进一步加速整体页面加载过程。 因此，通过这种方式，浏览器能够更加高效地处理网页内容，给用户带来更快的响应时间和更好的浏览体验。就像你吃意大利面时，既不会因为吃得太多而噎住，也不会浪费时间等待，而是以最舒适的速度享受美食。

4.请解释flex:1的含义

八股链接 Flex-阮一峰

MDN文档比较多，所以这里不放了

一道题目让我重新学习了整个flex

阮一峰老师的文档很详细，我这里就不多自我描述了

flex是flex-grow flex-shrink flex-basis的简写

flex:1 是相当于 flex-grow=1 flex-shrink=1 flex-basis=0

这里的flex包括flex-grow flex-shrink flex-basis都是应用在元素上的样式

所以这里就要区分flex的这些属性，哪些是应用在容器上，哪些是应用在元素上

在使用Flexbox（弹性盒子布局）时，属性可以分为应用于容器（即父元素，通常称为flex container）和应用于项目（即子元素，通常称为flex items）的两类。下面是详细的分类：

应用于容器上的属性

1. display

   • 设置为flex或inline-flex来定义一个弹性盒子容器。

2. flex-direction

   • 定义主轴的方向：row（默认值，从左到右）、row-reverse、column（从上到下）、column-reverse。

3. flex-wrap

   • 控制是否换行以及如何换行：nowrap（默认值，不换行）、wrap、wrap-reverse。

4. flex-flow

   • flex-direction和flex-wrap的简写，默认值是row nowrap。

5. justify-content

   • 定义了浏览器如何沿主轴方向分配空间：flex-start、flex-end、center、space-between、space-around、space-evenly。

6. align-items

   • 定义了浏览器如何沿交叉轴方向分配空间：stretch（默认值）、flex-start、flex-end、center、baseline。

7. align-content

   • 当存在多根轴线时，它定义了这些轴线在交叉轴上的对齐方式：stretch（默认值）、flex-start、flex-end、center、space-between、space-around。

应用于项目上的属性

1. order

   • 定义项目的排列顺序，数值越小，排列越靠前，默认为0。

2. flex-grow

   • 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

3. flex-shrink

   • 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4. flex-basis

   • 定义了在分配多余空间之前，项目占据的主轴空间，默认为auto，即项目本身的大小。

5. flex

   • flex-grow, flex-shrink 和 flex-basis 的简写，默认值是 0 1 auto。

6. align-self

   • 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items的值。默认为auto，表示继承父元素的align-items值，如果没有父元素，则等同于stretch。

5.解释一下src和href的区别。

八股链接

src和href的核心区别就是

src用于引入外部资源,这个资源要被嵌入到页面中

href用于指定链接的目的地，引用外部资源，但不直接嵌入内容

src一般用于比如图片音视频以及脚本

href一般用于锚点、超链接以及样式表

解析HTML过程中如果加载到src会阻塞解析直到资源被加载,可以按需使用async和defer来解决

但是加载到href则不会，比如加载一个样式表会在后台进行，但是构建CSSOM的时候仍会阻塞渲染

6.如何优化HTML以提高SEO效果？

八股链接

这个问题我本来想把它放到重复区域的部分

因为这个内容和前面涉及到的问题重合部分也是挺多的，但是要链接的话要对应好多题，也是从一种角度做一个汇总吧

1. 合理使用标签，包括一些语义化标签
2. 优化meta标签内容
3. img标签添加alt值
4. 优化url结构，比如一些博客网站文章的url中，如何描述文章的标题

7.简述 sessionStorage和 localStorage的区别?

八股链接 简述 sessionStorage和 localStorage的区别?- B站 MDN-sessionStorage MDN-localStorage

二者都是H5新增的WebStorage API

都是用于在客户端存储一些键值对数据

但是在存储有效时间、作用域上有不同

存储时间上:

1. localStorage会永久存储在客户端上，除非手动删除
2. sessionStorage会在会话关闭后被清除，但是刷新页面不会清除

作用于上：

1. localStorage在同一域名下共享数据
2. sessionStorage在在统一域名下打开不同的tab，都会创建新的sessionStorage

8.link标签加载CSS是否会阻塞DOM渲染?

八股链接 MDN-link

在解析HTML的过程中，遇到link的href指向外部样式表时，由于构建CSSOM树，浏览器会阻塞DOM渲染，只有当构建完成时，才能与DOM树一起构建渲染树

但是也存在特殊情况，在link标签设置media属性，当媒体查询不满足时，浏览器会在后台异步加载这个样式，所以不会阻塞当前DOM渲染，当媒体查询满足时，才会使用这个样式。

这里有一个有意思的概念FOUC（Flash Of Unstyled Content），就是样式变化时引起的页面闪烁

这个问题是否有漏洞，应该是说阻塞渲染树的渲染，因为DOM渲染和CSSOM渲染是两个不同的事，因为渲染树被CSSOM阻塞了，所以宏观上来看DOM树也被阻塞了，可实际上是CSSOM阻塞了合成渲染树，与阻塞DOM树无关。

上面的问题可参考AI回答记录

9.(重要)在项目当中跨域是如何处理的，为什么两种处理方式都要使用

八股链接 MDN-源 MDN-浏览器的同源策略 MDN-跨域资源共享CORS JSONP 跨域原理及实现

1. JSONP实现跨域请求，利用的是script标签不受同源策略影响的特性来实现，客户端提前定义好一个回调函数，然后在src设置一个请求到服务器，服务器将数据包装在一个js脚本里返回给客户端，客户端调用执行就可以访问数据了，但是只限于get请求
2. CORS实现跨域请求,当客户端A请求服务器B的数据时，浏览器会检测到是跨域请求，服务器可以在返回的响应头设置Access-Contorll-Allow-Origin来设置允许访问该资源的域名，客户端在发送请求时会在请求头上携带Origin字段然后检查服务器返回的响应头里有没有允许这个Origin域名访问权限，有的话就可以正常放行，否则就会出现跨域问题。同时还有一些属性比如Access-Contorll-Allow-Method控制允许的请求的方法，Access-Controll-Allow-Header控制允许的请求头等。同时注意区别简单请求（如GET）非简单请求（如PUT，DELETE），非简单请求浏览器会发起预检，先不从服务器返回数据，而是先询问，这样请求允许吗？ 两种都要用是因为JSONP可以兼容一些老的浏览器，但是现代的处理方式已经是CORS了。

---

10.简述localStorage和 cookie的区别 ？

八股链接 MDN-cookie 二者都是浏览器存储技术，localStorage是H5中新增的webStorage API

1. localStorage的存储容量要比cookie更大一些
2. localStorage除非手动删除否则会一直存储在客户端不会过期，cookie可以设置过期时间
3. 客户端第一次请求服务器时，服务器会返回cookie给客户端存储，下次请求时客户端会携带cookie，相当于建立一个会话，因为http是无状态的，如果没有cookie，浏览器无法区别两次请求的区别。localStorage没有这个流程

11.请说明多屏适配、媒体查询、自适应布局和响应式布局的区别

八股链接 多屏适配是一个很宽泛的概念，媒体查询、自适应布局、响应式布局都是实现多屏适配的方式。然后区别三种方式，媒体查询是CSS3引出的，通过@media实现一些不同尺寸下（如width）应用不同样式的方法；自适应布局是提前设计好几种布局，通过媒体查询实现不同布局的切换；响应式布局是综合利用媒体查询、相对单位、弹性盒子等方法实现任何设备的布局适配，更全面。

12.页面渲染时，资源加载的顺序是什么

八股链接 MDN-DOMContentLoaded

1. 首先解析HTML文档，构建DOM树
2. 遇到同步资源比如CSS时开始下载CSS文件并构建CSSOM树；遇到同步JS脚本阻塞HTML解析，下载JS脚本并执行
3. 遇到异步资源比如带有async和defer的JS脚本以及图片视频等媒体资源，浏览器会异步加载，不会影响主线程
4. DOM树构建完毕(不是渲染树，因为无需等待CSSOM树构建，但如果一些defer脚本依赖样式，浏览器则会等待这个样式加载然后执行完毕defer脚本)以及除async脚本以外的所有JS脚本执行完毕后触发DOM Content Loaded事件,该事件不会等待图片音视频等资源加载完毕
5. 当所有资源（包括图片与音视频）触发load事件，页面完全就绪

页面渲染就像一场舞台剧，HTML 是剧本，CSS 是布景，JS 是演员。浏览器按顺序加载资源，同步资源必须立刻上场，异步资源可以后台准备，当 DOM 构建完成时触发 DOMContentLoaded，所有资源加载完毕后触发 load，演出正式开始。

重复的题目

HTML有哪些语义化标签，以及使用语义化标签有什么好处

参考[[HTML高频八股]]题3

请解释语义化标签

参考[[HTML高频八股]]题3

请说明回流和重绘的概念

参考[[HTML中频八股]] 题1

HTML语义化对SEO有什么影响？

参考[[HTML高频八股]]题3

哪些情况会触发回流和重绘

参考[[HTML中频八股]]题1

请介绍flex布局的属性

参考[[HTML中频八股]]题4

行内元素与块级元素是否可以随意嵌套

参考[[HTML高频八股]]题2

HTML的meta标签对SEO有好处吗？

1. 参考[[HTML高频八股]]题5
2. 参考[[HTML中频八股]]题6

重绘和回流的区别是什么？

参考[[HTML中频八股]]题1

重绘是否会触发回流

参考[[HTML中频八股]]题1

---

意义不大的题目

如何实现左右定宽、中间自适应的三栏布局

八股链接

1. 浮动方案
2. 绝对定位方案
3. flex方案
4. grid方案

如何实现table高度自适应

八股链接

如何实现左边宽度 200px，右边自适应的两栏布局

八股链接 用flex:1使其占据剩余空间即可 或者用grid的 200px 1fr

请阐述行内元素与块级元素水平垂直居中的方法

八股链接

---

小众题目

HTML和XHTML有什么区别？

MDN-XHTML

iframe 的作用与使用场景有哪些，如何与父级通信，遇到跨域问题如何解决

MDN-iframe

Postman请求会存在跨域问题吗

Copied

Postman请求不会存在跨域问题。

跨域问题本质上是浏览器的同源策略导致的安全限制。

同源策略要求浏览器在访问资源时，协议、域名和端口都必须相同，若不同则会受到限制，以防止某些恶意的脚本访问其他源的敏感数据。

而Postman是一款独立的HTTP请求工具，它并不依赖于浏览器环境，没有遵循浏览器的同源策略。所以在使用Postman发送请求时，不会因为请求的目标地址与某个默认源不同而受到跨域限制，可以自由地向不同源的服务器发送各种类型的HTTP请求，如GET、POST等，并获取响应结果