1.HTML
1.前端页面有哪三层构成，分别是什么？作用是什么？
// 前端三层构成：
有三层，分别是：html、css、js，那html为dom，css是样式，js是交互
// 浏览器进程模型：
（1）浏览器是一个大进程，中包含多个进程，进程中也有很多线程。
（2）那么就拿html和css来说，是靠GUI来渲染的，那么如果要避免回流重绘，
需要靠GPU进程完成，这样性能会好。
（3）js是靠渲染进程的渲染主线程工作的。其中包含：事件执行线程、定时器线程等等。
而且JS线程和GUI渲染线程互斥，所以就有了js脚本的异步加载操作。2.行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？
// 行内元素
行内元素（Inline Elements）通常是文本内容的一部分，它们不会影响布局。
例如：<span>、<a>、<img>、<b>、<strong>、<em> 等。
// 块级元素
块级元素（Block Elements）占据一行，形成独立的块，可以设置宽高，影响布局。例如：
<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form> 等。
// 元素之间的转换问题
display: inline; // 转为行内元素
display: inline-block; // 转为行内块元素
display: block; // 转为块元素3.怎么解决2个行内块元素中间的空白
// 出现原因：
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。
// 解决方案：
给父元素设置font-size:0px（推荐！）
注意：如果子盒有文本，需要单独设置font-size。4.页面导入样式时，使用link和@import有什么区别？
// 加载方式和顺序不同
（1）link标签会先加载
（2）@import会在当前样式表加载完成后再加载引入外部样式表
（3）加载顺序区别：页面被加载时，link 会同时被加载，而 @import要等到页面被加载完再加载。
// 权重区别不同
link 方式的样式的权重高于 @import 权重。
// 从属关系不同
link 属于 HTML 标签，而 @import 是 CSS 提供的。
// 兼容性不同
link 没有兼容性问题，@import 不兼容 ie5 以下。5.title与h1的区别、b与strong的区别、i与em的区别？
title与h1的区别：
// 定义
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
// 区别
title他是显示在网页标题上、h1是显示在网页内容上
title比h1更加的重要 (title > h1 ) ==》对于seo的了解
// 场景
网站的logo都是用h1标签包裹的 b与strong的区别：
// 定义
b：用于设置文字加粗，但它仅仅是让文字加粗，没有语义强调。
strong：用于强调语义，且默认文字加粗，同时也向屏幕阅读器和搜索引擎表明这段文字的重要性。
// 区别
b标签只有加粗的样式，没有实际含义。
strong表示标签内字符比较重要，用以强调的。
题外话：为了符合css3的规范，b尽量少用，改用strong就行了。i与em的区别：
// 定义
i: 设置字体倾斜，仅仅只是字体倾斜，没有语义强调。
em：用于强调语义，默认字体是倾斜的，同时也向屏幕阅读器和搜索引擎表明这段文字的强调重要性。
// 区别
i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调的。
// 场景
i更多的用在字体图标，em术语上（医药，生物）。6.img标签的title和alt有什么区别？
// 表现形式不同
title： 鼠标移入到图片展示文字值
alt ： 图片无法显示时展示文字值
// SEO层面 ( alt > title )
在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了
增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。7.png、jpg、gif 这些图片格式解释一下，分别什么时候用？
// png：
特点：png格式支持无损压缩，同样尺寸情况下，体积要比jpg/jpeg的大。
适用场景：png格式适合保存，需要保持高质量细节和透明背景的图像，如图标、线条图、文字、Logo 等。
// jpg：
特点：jpg格式支持有损压缩。
适用场景：jpg式适合保存照片、图像和艺术作品等真实场景图像，常用于网站上发布的照片、背景图等。
// gif：
特点：gif格式支持无损压缩和动画功能，能够保存多帧图像并以动画形式显示。
适用场景：gif格式适合保存简单的动画、图标、表情包等图像。适用于网页上的小型动画、简单图标等。
// webp：
特点：webp是一种由 Google 开发的图像格式，支持有损压缩和无损压缩，
通常比 PNG 和 JPG 文件大小更小，同时保持较高的图像质量。它还支持动画和透明度。
适用场景：webp格式适合用于网站优化和速度提升，可以帮助减小图像文件大小，提高网页加载速度。
特别适合用于要求高速加载和移动设备访问的网页，可以有效减少网页加载时间。
五、总结：
PNG 适合保存高质量细节和透明背景的图像
JPG 适合保存照片和真实场景图像；
GIF 适合保存简单的动画和图标；
WebP 适合用于网站优化和速度提升，特别适合要求高速加载和移动设备访问的网页（存在兼容性）。8.iframe的优点和缺点？
// 什么是iframme
用于嵌入另一个 HTML 文档或外部资源（如网页、视频、地图等）到当前页面中。
// 优点：
1.嵌入外部内容：在一个网页中，可以嵌入其他的网页。
2.独立性：内嵌的内容在 <iframe> 中运行，与主页面相互隔离，这意味着它不会受到主页面的影响。
3.简便性：使用 <iframe> 非常简单，只需提供要嵌入的资源的 URL 或相对路径即可。
// 缺点：
1.性能问题：如果滥用 <iframe>，在同一个页面中加载多个 <iframe> 可能会导致性能问题，
因为每个 <iframe> 都需要单独加载资源。
2.可访问性问题： 内嵌内容可能导致可访问性问题，因为屏幕阅读器等辅助技术可能无法正确解释
和浏览 <iframe> 内的内容。
3.安全性风险： 如果未谨慎处理来自不受信任源的内容，可能会存在安全风险，
例如点击劫持（clickjacking）攻击。
4.兼容性问题：老版本浏览器不支持。
// 解决方案：
防止自己的网站被别人 iframe 嵌套
if (top != self) {
top.location = self.location;
}
if (window !== window.top) {
window.top.location.href = window.location.href;
}
//这段代码会检测页面是否被嵌套，如果是，则将页面重定向到自身。2.CSS
1.css优先级
优先级比较：!important > 内联样式 > id > class > 标签 > 通配2.CSS选择器有哪些？哪些属性可以继承？
1. CSS选择符：
通配（*）
id选择器（#）
类选择器（.）
标签选择器（div、p、h1...）
相邻选择器(+)
后代选择器(ul li)
子元素选择器（ > ）
属性选择器(a[href])
2. 可以继承：
1. font 相关属性：font-size、font-weight、line-height。
2. color：控制文本颜色。
3. text 相关属性：text-align、text-decoration、letter-spacing、word-spacing。
4. visibility：控制元素是否可见。
5. cursor：指定鼠标悬停在元素上时的光标样式。
6. list-style 相关属性：包括 list-style-type、list-style-position、list-style-image。
3. 不可继承属性：border、padding、margin...3.css三角形
用边框画（border）,例如：
{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid #ccc;
}4.单行文本溢出
在 CSS 中，当单行文本内容超出其容器的宽度时，可以通过设置 overflow 属性来处理文本溢出的情况。常用的方法包括使用 white-space 和 text-overflow 属性。
div{
width: 200px; /* 容器宽度 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
}5.多行文本溢出
处理多行文本溢出的情况相对复杂一些，但也可以通过 CSS 来实现。常用的方法是结合 display: -webkit-box;、-webkit-line-clamp 和 overflow: hidden;。
.text-container {
display: -webkit-box; /* 使用弹性盒子布局 */
-webkit-box-orient: vertical; /* 垂直方向排列 */
-webkit-line-clamp: 3; /* 限制显示行数 */
overflow: hidden; /* 超出部分隐藏 */
}
/* 兼容性处理 */
.text-container {
display: -webkit-box;
display: -webkit-webkit-flex;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}6.哪些css可以影响到层级
屏幕是一个二维平面，然而 HTML 元素却是排列在三维坐标系中，x 为水平方向，y 为垂直方向，z 为屏幕由内向外方向，我们在看屏幕的时候是沿着 z 轴方向从外向内的。由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖；
-
层叠上下文 (Stacking Context)
层叠上下文 (堆叠上下文, Stacking Context)，是 HTML 中一个三维的概念。在 CSS2.1 规范中，每个元素的位置是三维的，当元素发生层叠，这时它可能覆盖了其他元素或者被其他元素覆盖；排在 z 轴越靠上的位置，距离屏幕观察者越近。
在层叠上下文中，其子元素按照上面解释的规则进行层叠。形成层叠上下文的方法有：
1. position 值为 absolute|relative，且 z-index 值不为 auto； 2. position 值为 fixed|sticky； 3. z-index 值不为 auto 的 flex 元素，即父元素属性 display: flex|inline-flex； 4. opacity 属性值小于 1 的元素； 5. transform 属性值不为 none 的元素； 6. mix-blend-mode 属性值不为 normal 的元素； 7. filter、perspective、clip-path、mask、mask-image、mask-border、motion-path 值不为 none 的元素； 8. perspective 值不为 none 的元素； 9. isolation 属性被设置为 isolate 的元素； 10. will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值 11. -webkit-overflow-scrolling 属性设置为 touch 的元素；
-
层叠等级
层叠等级 (层叠水平, Stacking Level) 决定了在同一个层叠上下文中，元素在 z 轴上的显示的顺序；
普通元素的层叠等级优先由其所在的层叠上下文决定； 层叠等级的比较，只有在同一个层叠上下文元素中才有意义； 在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在 z 轴上的上下顺序；
另外，层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由 z-index 决定，其他类型元素的层叠等级由层叠顺序、他们在 HTML 中出现的顺序、他们的祖先元素的层叠等级一同决定，详细的规则见下面层叠顺序的介绍。
-
z-index
z-index 只适用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto，如果一个定位元素没有设置 z-index，那么默认为 auto； 元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。
-
层叠顺序：描述的是元素在同一个层叠上下文中的顺序规则，从层叠的底部开始，共有七种层叠顺序：
1. 背景和边框：形成层叠上下文的元素的背景和边框。 2. 负 z-index 值：层叠上下文内有着负 z-index 值的定位子元素，负的越大层叠等级越低； 3. 块级盒：文档流中的块级、非定位子元素； 4. 浮动盒：非定位浮动元素； 5. 行内盒：文档流中行内、非定位子元素； 6. z-index: 0：z-index 为 0 或 auto 的定位元素， 这些元素形成了新的层叠上下文； 7. 正 z-index 值：z-index 为正的定位元素，正的越大层叠等级越高；
-
面试中 或 写面试题 的回答
css可以影响层级的属性非常多，本身屏幕是一个二维平面，然而 HTML 元素却是排列在三维坐标系中。 x为水平方向，y为垂直方向，z为屏幕由内向外方向。 我们在看屏幕的时候是沿着 z 轴方向从外向内的，由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖。 那么元素在同一个层叠上下文中的顺序规则，从层叠的底部开始，共有七种层叠顺序： 1. 背景和边框：形成层叠上下文的元素的背景和边框。 2. 负 z-index 值：层叠上下文内有着负 z-index 值的定位子元素，负的越大层叠等级越低； 3. 块级盒：文档流中的块级、非定位子元素； 4. 浮动盒：非定位浮动元素； 5. 行内盒：文档流中行内、非定位子元素； 6. z-index: 0：z-index 为 0 或 auto 的定位元素， 这些元素形成了新的层叠上下文； 7. 正 z-index 值：z-index 为正的定位元素，正的越大层叠等级越高； 那么这里就说几个可以影响层级的css属性吧：比如： 1. 可以给position值为absolute 或 relative的添加z-index； 2. 也可以通过transform: translateY(-100px); 3. opacity属性值小于 1 的元素； 等等好多都可以做到，这里就不一一举例了。
7.对BFC的理解
是什么：BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
1. 了解BFC ： 块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3. 如何触发BFC：
3.1 float的值非none
3.2 overflow的值非visible
3.3 display的值为：inline-block、table-cell...
3.4 position的值为:absoute、fixed
......
4. 用法
4.1 阻止相邻元素的 margin 合并
4.2 包含浮动元素
......8.父子元素外边距重叠问题
经典问题：垂直外边距叠加
原因：普通文档流盒子间，只要垂直外边距直接接触，就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。
发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。
解决办法：触发BFC就可以解决。9.
3.JS
4.Vue
1.vue2和vue3的区别
（1）组件注册不同：vue3不需要进行组件的注册，只需导入组件即可使用。
（2）template不同：vue3支持定义多个根节点，而vue2只能有一个根节点。
（3）语法不同：vue3使用组合式API，vue2是选项式API。
（4）生命周期不同：
| vue2 | vue3 |
| setup | |
| beforeCreate | |
| created | |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
（5）vue3新出了Suspense内置组件：Vue3 提供 Suspense 组件，允许程序在等待异步组件加载完成前渲染兜底的内容，如 loading ，使用户的体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。
<tempalte>
<suspense>
<template #default>
<List />
</template>
<template #fallback>
<div>
Loading...
</div>
</template>
</suspense>
</template>vue3新出了Teleport内置组件：Vue3 提供 Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置。比如项目中常见的 Dialog 弹窗。
<button @click="dialogVisible = true">显示弹窗</button>
<teleport to="body">
<div class="dialog" v-if="dialogVisible">
我是弹窗，我直接移动到了body标签下 </div>
</teleport>（6）响应式原理不同：vue2基于Object.defineProperty来对数据进行劫持，而vue3使用的是ES6提供的Proxy对象。（这是因为：在vue2的响应式无法对数组或者对象进行增删改进行监听，所以vue2只能单独的提供了this.$set()方法进行处理，但是vue3使用Proxy，就无需进行特殊处理。）
（7）diff算法不同：
（8）TypeScript的支持不同：vue3支持TypeScript的语法，vue2对TypeScript的支持非常差。
2.v-if和v-show的区别
v-if是控制DOM节点是否要渲染，而v-show是在DOM节点渲染的情况下，通过display来控制DOM节点的显示与隐藏，本质上v-show的开销更大，v-if的稳定性不好。
总结：v-if适用于不频繁切换的场景，而v-show适用于频繁切换的场景。
3.v-for和v-if的优先级
Vue2中v-for的优先级会更高，所以会先执行循环，再进行v-if判断，所以这样就会导致无论需不需展示这个元素，都会先遍历整个列表
但是在Vue 3中，v-for和v-if的指令不能再同时使用在同一个元素上。这是因为Vue 3引入了一项优化，即在编译阶段会根据v-if的条件进行静态分析，如果条件为假，则不会生成对应的虚拟节点，从而减少了不必要的渲染开销。而如果v-for和v-if同时存在，会导致静态分析变得困难，因此Vue 3禁止了这种用法。
总结：vue3不能将v-if和v-for写在同一个节点。
4.vue3的内置组件有哪些
新增了三个组件。
（1）vue3新出了Suspense内置组件：Vue3 提供 Suspense 组件，允许程序在等待异步组件加载完成前渲染兜底的内容，如 loading ，使用户的体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。
<tempalte>
<suspense>
<template #default>
<List />
</template>
<template #fallback>
<div>
Loading...
</div>
</template>
</suspense>
</template>（2）vue3新出了Teleport内置组件：Vue3 提供 Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置。比如项目中常见的 Dialog 弹窗。
<button @click="dialogVisible = true">显示弹窗</button>
<teleport to="body">
<div class="dialog" v-if="dialogVisible">
我是弹窗，我直接移动到了body标签下 </div>
</teleport>（3）vue3新出了Fragment ：组件可以没有根标签，内部会将多个标签包含在一个 fragment 的虚拟元素中。这个不需要自己手写，vue内部帮我们做了。
5.vue的事件修饰符有哪些，所在位置
第一类：v-model修饰符
（1）.lazy（输入框聚焦、失焦时触发）
（2）.number（尝试将输入框的value值转为number类型）
（3）.trim（去除输入框的value值首尾空格）
第二类：事件修饰符
（1）.stop（阻止事件冒泡）
（2）.prevent（防止触发默认事件）
（3）.capture（将默认触发方式改为捕获触发）
（4）.self（只有当事件发生在目标元素自身时才会触发）
（5）.once（事件只触发一次）
第三类：键盘修饰符
（1）.enter（回车键触发）
（2）.tab（tab键触发）
（3）.delete（通过该元素需要配合v-if使用，是指DOM节点显示、隐藏时触发）
（4）.esc（esc键触发）
6.vue双向数据绑定原理
在vue2：vue2数据双向绑定是由数据劫持 + 发布-订阅的模式实现的，通过object.defineProperty()来劫持对象属性的getter和setter操作，在数据变动时发布消息给订阅者，触发响应的监听回调。
在vue3：vue3使用的Proxy去劫持数据 当我们的数据发生变动时，发布消息给订阅者，触发相应的监听回调
7.v-for中的key值的作用
key值要设置一个唯一性的id，是为了确保渲染DOM的时候不会出错。因为创建DOM节点是比较消耗性能的操作，vue为了避免创建新的DOM节点，当vue发现一个节点的key值相同时，就不会创建新的DOM节点。
例如：
<template>
<div class="root">
<div class="item" v-for="(item, index) in list" :key="index">
<h2>{{ item.text }}</h2>
</div>
<button @click="replaceData">替换数据</button>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{text: '33333'},
{text: '66666'},
{text: '99999'},
]
}
},
methods: {
replaceData() {
this.list = [
{text: '22222'},
{text: '44444'},
{text: '88888'},
]
}
}
}
</script>
<style lang="scss">
.item{ background: orange;}
</style>
初始化的样式
正常情况下：我们点击"替换数据"按钮此时会变成这样，很正常对吧。
特殊情况：当手动删除'66666'这个元素的DOM节点时，然后点击"替换数据"按钮,此时会变成这样子，额。。。我的44444跑哪去了？ 这是因为vue发现这一批key和上一批key是一样的，就没有重新创建DOM节点，只是把内容给替换了而已。
8.mutations和actions的区别
如果方法体中涉及到异步操作，该方法需要转发给actions进行处理；
如果方法体中涉及的都是同步操作，该方法可以提交给mutations进行处理。
9.vue3新增的状态管理工具
pinia
10.css的预处理器有哪些，在vue中如何使用
css预处理器有：less、scss
以less为例：先安装less、less-loader：npm i less less-loader，
然后在styles标签中声明lang='less'：<style lang="less">
11.vue的路由传参和接参
传参：
第一种：可以通过路径传参，把参数以"?参数1=值1&参数2=值2"的形式，放在路径后面。
// 1.查询参数传参（两种写法）
（1）this.$router.push('/home?username=长官&age=18')
（2）this.$router.push({
path: '/home'
query: {
name: '张三',
age: 18
}
})
// 2.动态路由传参
this.$router.push({
path: '/home',
params: {
username: '思密达'
}
}) 第二种：给路由起个名称name，通过路由的name来进行跳转，参数要看情况放。
// 1.查询参数传参
this.$router.push({
name: '路由名称',
query: {
username: '思密达',
age: 18
}
})
// 2.动态路由传参
this.$router.push({
name: '路由名称',
params: {
username: '思密达'
}
})接收参数：
// 1.获取查询参数传参
this.$route.query.参数名
// 2.获取动态路由传参
this.$route.params.参数名12.watch和computed的区别
computed：是对响应式数据处理后， 返回的新的响应式数据。（带有缓存功能）
watch：是对响应式数据进行监听，可以监听普通数据类型，也可以监听对象。
13.vite的优点和特点
优点：
（1）构建速度快：运行时动态的加载依赖，避免传统构建工具的静态打包和编译。
（2）更高效的热更新：实时更新代码并预览修改效果，无需重新编译整个项目。
（3）配置简单
缺点：
（1）由于是比较新的技术，可能导致一些老的浏览器不兼容。
14.vuex的五个状态分别是什么
分别是state、mutations、actions、getters、modules。
15.vue2和vue3中v-for循环有什么区别
（1）key的不同：vue2需要手动配置key，vue3默认情况下会自动推导出唯一的key值。
（2）v-if和v-for的优先级：在vue2中v-for优先级高，在vue3中v-if优先级高。
16.自定义组件的过程
在components或者views目录下，创建一个xxx.vue文件，然后在文件内定义内容
<script setup>
// 定义组件名称
defineOptions({
name: 'TestVue'
})
</script>
<template>
<div class="test-container"></div>
</template>
<style lang="less" scoped>
</style>使用组件时，vue2需要注册后使用，vue3可以直接使用组件。
17.localSorage和session的区别
localStorage：
（1）不管存进去是什么类型，读取出来的永远是字符串
（2）存储大小问题：localStorage的存储容量根据不同浏览器的不同，结果就不一样，一般为4M。18.如果localStorage超过最大容量怎么办
方法1：压缩字符串，仍然存进localStorage
缺点：多引用一个库。
优点：压缩。
参考文章：2. lz-string【JavaScript 字符串压缩库】 - 简书
方法2：使用其他存储方式,如indexedDB，我们不是直接用indexed DB，而是用封装的库localForage
缺点：兼容性不太好，操作繁琐。
优点：存进去的是什么类型，读出来的就是什么类型。并且可以是异步的。存储量远远大于localStorage。
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
