面试题

合集 - 前端面试(96)
1.H5 的新特性有哪些？C3 的新特性有哪些2.Localstorage、sessionStorage、cookie 的区别3.H5 的浏览器存储有哪些4.简述 transform，transition，animation 的作用？5.CSS 中选择器的优先级以及CSS 权重如何计算6.HTML5 的离线存储怎么使用，工作原理是什么？7.css3制作三角形8.rem 适配方法如何计算 HTML 跟字号及适配方案？9.定位相关10.Modele build failed: TypeError: this.getResolve is not a function at Object.loader...11.BFC 是什么12.使用CSS怎么让Chrome支持小于12px的文字比如10px13.创建对象有几种方法14.JavaScript中的toLocaleString()方法你知道吗？15.暂时性死区16.作用域链和原型链17.dom 节点的 Attribute 和 Property 有何区别？18.简单说一下页面重绘和回流？19.defer 属性async 属性20.解释一下什么是回调函数,并提供一个简单的例子21.你对原型（prototype）理解22.简单说说 js 中的继承23.介绍 this 各种情况24.for in 和 for of 的区别25.判断一个字符串中出现次数最多的字符，统计这个次数26.jQuery 的 ajax 返回的是 promise 对象吗？27.echarts切换其他组件统计图时，出现卡顿问题如何解决28.module、export、import 有什么作用29.包含Symbol类型的对象遍历取key使用Reflect.ownKeys30.常见的 HTTP 状态码以及代表的意义31.HTTP 与 HTTPS 的区别32.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么33.浏览器如何加载页面的，script 脚本阻塞有什么解决办法，defer 和 async 的区别是什么34.Vue 数据双向绑定的原理是什么?35.组件中写 name 选项有什么作用36.怎么在组件中监听路由参数的变化？37.怎么捕获 Vue 组件的错误信息？38.computed 中的属性名和 data 中的属性名可以相同吗39.Vue 中 key 值的作用是什么？40.你对 Vue.js 的 template 编译的理解？41.VNode 是什么？什么是虚拟DOM？42.简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(),wx.navigateBack(), wx.reLaunch()的区别？43.微信小程序长按识别二维码44.原生微信小程序45.小程序中 canvas 的图片不支持 base64 格式46.小程序关联微信公众号如何确定用户的唯一性？47.setState和useState执行48.如何进行前端性能优化49.Vue和React中diff算法区别50.通过code换取网页授权access_token和基础支持中的access_token有以下不同之处：51.H5调起支付API52.使用Vue前端实现微信授权、微信支付和支付宝支付的具体代码和流程。53.js中显示转换类型54.js小常识55.js获取浏览器地址的query参数并以键值对的方式展示(对象)封装一个方法56.js寄生组合式继承57.ts58.promise知识159.vue中v-bind和v-model的区别是什么60.Vue中key的作用61.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。62.浏览器解析html63.浏览器渲染HTML64.Object.entries()65.vue实现虚拟dom转换成真是dom的原理66.为什么vue数组下标修改监听不到67.Vue 3 在某些场景下可能表现出比 Vue 2 更低的性能68.vue里表单验证的v-model.number的坑69.开启严格模式70.js手写一个call71.js手写一个apply72. 手写一个 bind 方法73.js寄生组合式继承74.react中的useState修改状态获取最新状态值75.函数柯里化js76.axios请求中断_下载中断和下载进度77.axios请求重试_核心原理78.axios请求重试_axios-retry插件79.虚拟列表-渲染 10 万条数据80.vue-office 组件81.threejs82.把原生 DOM 标签转换后加入到 3D 场景空间中显示83.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉84.threejs基本函数85.二分查找算法86.js判断字符串是否连贯87.世界坐标系和模型坐标系88.设置车模型中每个小物体 castShadow = true89.Vue3 echarts 组件化使用 resizeObserver90.网页验证码的作用 *网页中几种常见验证码91.多个装饰器一起es6装饰器92.flex属性93.移动端兼容问题94.那什么是URL、URI、URN？
95.面试题
96.面试前端
收起

一、HTML考题（8题）

1. 前端页面有哪三层构成，分别是什么？作用是什么？
前端页面主要由三层构成，分别是结构层、表示层和行为层。这三层各自的作用如下：

1. HTML（HyperText Markup Language）：结构层，它是网页的基础，用于定义网页的内容结构，如标题、段落、列表、图像等元素。HTML标签告诉浏览器如何组织和呈现这些内容。

2. CSS（Cascading Style Sheets）：样式层，CSS负责为HTML元素添加样式，如颜色、字体、布局、间距等，使得内容具有视觉吸引力并适应不同的设备和屏幕尺寸。通过媒体查询，可以实现响应式设计。

3. JavaScript（JS）：行为层，JavaScript是动态交互的核心，它使网页能够响应用户的操作，执行复杂的逻辑，比如表单验证、动画效果、数据绑定等。现代前端开发还可能用到框架和库（如React、Vue或Angular）来简化开发过程。
2. 行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？
1. 行内元素（Inline Elements）通常是文本内容的一部分，它们不会影响布局，只占据内容所在的行宽度。例如：
<span>、<a>、<img>、<b>、<strong>、<em> 等。

2. 块级元素（Block Elements）占据一行，形成独立的块，可以设置宽高，影响布局。例如：
<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form> 等。

3. 空(void)元素，也称为无内容元素，它们不包含任何内容，但可以有属性。它们通常用于定义结构，不会影响布局。例子有：
<hr>（水平线）、<br>（换行）、<img>（图片，当src为空时）、<input type="hidden"> 等。

元素之间的转换问题：
display: inline;  			把某元素转换成了行内元素      ===>不独占一行的，并且不能设置宽高
display: inline-block; 	把某元素转换成了行内块元素		 ===>不独占一行的，可以设置宽高
display: block;					把某元素转换成了块元素			   ===>独占一行，并且可以设置宽高
3. 怎么解决2个行内块元素中间的空白
导致原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

方案一：手动取消空格和换行：

<ul>
	<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>

非常不推荐，原因：
1. 部分编译器可能会代码整理的时候会强制换行
2. 代码比较臃肿，美观度不行，一点不优雅

方案二：父元素设置font-size:0px（推荐）

<style type="text/css">
	*{margin: 0;padding: 0;}
	ul{
		list-style: none;
		font-size: 0;
	}
	ul li{
		display: inline-block;
		width: 100px;
		height: 100px;
		background: red;
		font-size: 18px;
	}
</style>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

注意：如果子盒子有文本，需要单独设置font-size
4. 页面导入样式时，使用link和@import有什么区别？
区别一：加载方式和顺序
	link标签会先加载（多个 <link> 标签同时引入，加载顺序由 HTML 中 <link> 标签的顺序决定）
	@import会在当前样式表加载完成后再加载引入外部样式表（@import 规则必须写在样式表的最前面，加载顺序受到 CSS 文件中 @import 规则的顺序决定。）
	加载顺序区别：页面被加载时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载。
	
区别二：权重区别
	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的优点和缺点？
是什么：用于嵌入另一个 HTML 文档或外部资源（如网页、视频、地图等）到当前页面中。

优点：

1.嵌入外部内容： <iframe> 允许你在一个网页中嵌入来自不同源或服务器的内容，这有助于创建丰富多彩的页面。
2.独立性： 内嵌的内容在 <iframe> 中运行，与主页面相互隔离，这意味着它不会受到主页面的影响，保持了独立性。
3.简便性： 使用 <iframe> 非常简单，只需提供要嵌入的资源的 URL 或相对路径即可。

缺点：

1.性能问题： 如果滥用 <iframe>，在同一个页面中加载多个 <iframe> 可能会导致性能问题，因为每个 <iframe> 都需要单独加载资源。
2.可访问性问题： 内嵌内容可能导致可访问性问题，因为屏幕阅读器等辅助技术可能无法正确解释和浏览 <iframe> 内的内容。
3.安全性风险： 如果未谨慎处理来自不受信任源的内容，可能会存在安全风险，例如点击劫持（clickjacking）攻击。

防止自己的网站被别人 iframe 嵌套

if (top != self) {
    top.location = self.location;
}
//这段代码会检测页面是否被嵌套，如果是，则将页面重定向到自身。

二、CSS考题（25题）

1. 介绍一下CSS的盒子模型
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
	标准盒子模型：margin、border、padding、content
	IE盒子模型 ：margin、content（ border +  padding  + content ）
通过CSS如何转换盒子模型：
	box-sizing: content-box;	/*标准盒子模型*/
	box-sizing: border-box;	  /*IE盒子模型*/
2. CSS优先级算法如何计算？
优先级比较：!important > 内联样式 > id > class > 标签 > 通配
3. 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...
4. 如何用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;
}
5. 单行文本溢出
在 CSS 中，当单行文本内容超出其容器的宽度时，可以通过设置 overflow 属性来处理文本溢出的情况。常用的方法包括使用 white-space 和 text-overflow 属性。

div{
	width: 200px; /* 容器宽度 */
	white-space: nowrap; /* 不换行 */
	overflow: hidden; /* 超出部分隐藏 */
	text-overflow: ellipsis; /* 溢出部分显示省略号 */
}
6. 多行文本溢出
处理多行文本溢出的情况相对复杂一些，但也可以通过 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;
}
7. position有哪些值？分别是根据什么定位的？
static [默认]  没有定位
fixed  		固定定位，相对于浏览器窗口进行定位。	
relative  相对于自身定位，不脱离文档流。
absolute	相对于第一个有relative的父元素，脱离文档流。


relative和absolute区别
1. relative不脱离文档流 、absolute脱离文档流
2. relative相对于自身 、 absolute相对于第一个有relative的父元素
3. relative如果有left、right、top、bottom ==》left、top
	 absolute如果有left、right、top、bottom ==》left、right、top、bottom
8. 有哪些css属性可以影响层级

屏幕是一个二维平面，然而 HTML 元素却是排列在三维坐标系中，x 为水平方向，y 为垂直方向，z 为屏幕由内向外方向，我们在看屏幕的时候是沿着 z 轴方向从外向内的。由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖；

  1. 层叠上下文 (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 的元素；

  2. 层叠等级

    层叠等级 (层叠水平, Stacking Level) 决定了在同一个层叠上下文中，元素在 z 轴上的显示的顺序；

    普通元素的层叠等级优先由其所在的层叠上下文决定；
层叠等级的比较，只有在同一个层叠上下文元素中才有意义；
在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在 z 轴上的上下顺序；

    另外，层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由 z-index 决定，其他类型元素的层叠等级由层叠顺序、他们在 HTML 中出现的顺序、他们的祖先元素的层叠等级一同决定，详细的规则见下面层叠顺序的介绍。

  3. z-index

    z-index 只适用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto，如果一个定位元素没有设置 z-index，那么默认为 auto；

元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。

  4. 层叠顺序：描述的是元素在同一个层叠上下文中的顺序规则，从层叠的底部开始，共有七种层叠顺序：

    1. 背景和边框：形成层叠上下文的元素的背景和边框。
2. 负 z-index 值：层叠上下文内有着负 z-index 值的定位子元素，负的越大层叠等级越低；
3. 块级盒：文档流中的块级、非定位子元素；
4. 浮动盒：非定位浮动元素；
5. 行内盒：文档流中行内、非定位子元素；
6. z-index: 0：z-index 为 0 或 auto 的定位元素， 这些元素形成了新的层叠上下文；
7. 正 z-index 值：z-index 为正的定位元素，正的越大层叠等级越高；

  5. 面试中 或 写面试题 的回答

    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 的元素；

等等好多都可以做到，这里就不一一举例了。
9. 对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 包含浮动元素
		......
10. 子元素设置margin-top父元素也会跟着移动，是怎么回事？
经典问题：垂直外边距叠加

原因：普通文档流盒子间，只要垂直外边距直接接触，就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。

发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。

解决办法：触发BFC就可以解决。
11. 简述什么是伪元素和伪类，并列举一些自己知道的伪元素和伪类

  1. 伪元素

    什么是伪元素：是用于创建并操作元素的特定部分，它可以在DOM中创建一个不存在的元素，并为其添加样式。

    ::before：在元素内容之前插入内容
::after：在元素内容之后插入内容
::first-line：选择元素的第一个行
::first-letter：选择元素的第一个字母

  2. 伪类

    什么是伪类：是用于选择元素的特定状态或行为的关键词，它可以应用于已存在的元素。

    :hover：当鼠标悬停在元素上时应用的样式
:active：元素正在被用户交互（如点击）时应用的样式
:focus：元素获得焦点（如键盘焦点或点击）时应用的样式
:nth-child(n)：选择父元素的第n个子元素
:not(selector)：选择不匹配给定选择器的元素
12. 清除浮动的方式有哪些？
1. 触发BFC
2. 多创建一个盒子，添加样式：clear: both; (不推荐使用，很老的处理方式了)
3. after方式
	ul::after{
			content: '';
			display: block;
			clear: both;
	}
13. css sprite是什么,有什么优缺点
1. 是什么
	把多个小图标合并成一张大图片。
2. 优缺点
	优点：减少了http请求的次数（减少了服务器和客户端之间的通信开销），提升了性能。
	缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）
14. 什么是CSS reset？
reset.css   		是一个css文件，用来重置css样式的。
normalize.css 	为了增强跨浏览器渲染的一致性，一个CSS重置样式库。
15. 回流和重绘

15.1 浏览器渲染流程

浏览器是向服务端发送请求，下载解析资源显示在浏览器上。将网页内容展示到浏览器上的过程，这其实就是渲染引擎完成的。渲染引擎有很多种，这里以 webkit 为例。

![image-20240629172636722](/Users/zhangpang/Library/Application Support/typora-user-images/image-20240629172636722.png)

从上面这个图上，我们可以看到，浏览器渲染流程如下：

1. 解析 HTML Source，生成 DOM 树。
2. 解析 CSS，生成 CSSOM 树。
3. 将 DOM 树和 CSSOM 树结合，去除不可见元素，生成渲染树( Render Tree )。
4. Layout (布局)：根据生成的渲染树，进行布局( Layout )，得到节点的几何信息(宽度、高度和位置等)。
5. Painting (重绘)：根据渲染树以及回流得到的几何信息，将 Render Tree 的每个像素渲染到屏幕上。

15.2 什么是回流和重绘

1. 回流：渲染对象在创建完成并添加到渲染树时，只是将 DOM 节点和它对应的样式结合起来，"并不包含位置和大小信息"。所以还需要 layout 这一过程计算他们的位置和大小，这一过程称为回流，有些地方也称为重排，可以理解为重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树。

2. 重绘：通过构造渲染树和回流阶段，知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个过程就叫做重绘。

15.3 什么样情况会造成回流和重绘

要知道：回流一定会造成重绘，重绘不一定会造成回流。

结合上面说的：
1. 造成回流的情况有：回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。一个 DOM 元素的几何属性变化，常见的几何属性有 width、height、padding、margin、left、top、border 等等。
2. 造成重绘的情况有：例如改变 visibility、outline、background-color 等属性，这些属性只是影响元素的外观，风格，并且没有影响几何属性的时候，会导致重绘 ( repaint )

15.4 如何减少回流与重绘

开启GPU加速：开启 GPU 加速元素会被单独提升到一层。
WebKit 内核的浏览器中，CSS3 的 transform、opacity、filter 这些属性就可以实现合成的效果，浏览器会将渲染层提升为合成层。

另外需要注意的是：硬件加速不是万金油，单独创建合成层是有代价的，每创建一个合成层，就要为其分配内存，内存大小取决于复合层的数量。复合层的大小、层的管理也更为复杂，在一些低端和终端移动端设备中更为明显，滥用 GPU 加速会引起页面卡顿甚至闪退。

可以把：top left 使用 transform 代替。

15.5 面试回答：

回流就是：渲染对象在创建完成并添加到渲染树时，只是将 DOM 节点和它对应的样式结合起来，并不包含位置和大小信息。所以还需要 layout 这一过程计算他们的位置和大小，这一过程称为回流，有些地方也称为重排，可理解为重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树。

造成回流就是可能改变了盒子的大小和位置。

重绘就是：通过构造渲染树和回流阶段，知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个过程就叫做重绘。

造成重绘就是可能改变了盒子的颜色，背景颜色等等之类的。

那么要避免回流和重绘：

css方面
 * 使用transform替代top等位移 ; 
 * 使用visibility替换display: none;
 * 避免使用table布局 ;
 * 尽可能在DOM树的最末端改变class；
 * 避免设置多层内联样式，尽量层级扁平；
 * 将动画效果应用到position属性为absolute或fxed的元素上；
 * 避免使用CSS表达式；
 * 将频繁重绘或者回流的节点设置为图层，比如 video, iframe ；
 * CSS3硬件加速(GPU加速) ，可以是transform: translateZ(0)、opacity、 flters、 Will-change提前告诉浏览器元素会发生什么变化;
 
JS方面：
* 避免频繁操作样式，合并操作；
* 避免频繁操作DOM，合并操作；
* 防抖节流控制频率；
* 避免频繁读取会引发回流/重绘的属性，比如上面的C、O、S属性
* 对具有复杂动画的元素使用绝对定位。
16. display-none;与visibility-hidden;的区别
1. 占用位置的区别

	display: none; 				隐藏元素，“不”占用位置
	visibility: hidden;   隐藏元素，占用位置

2. 重绘和回流的问题

	visibility: hidden;	产生重绘
	display: none;     	产生一次回流、重绘
17. opacity和rgba区别
共同性：实现透明效果

1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明
2. rgba   R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别：继承的区别
opacity 会作用于元素及其子元素的透明度，整个元素及其内容都会变得透明。
rgba() 只会作用于元素的颜色，而不会影响元素本身的透明度。
18. flex后面都有哪些属性？
flex属性是：flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto。后两个属性可选。

一、flex-grow：
	1. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
	2. 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

二、flex-shrink
	1. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
	2. 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
	
三、flex-basis
	1. flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
	2. 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
19. 实现一个左边固定宽度、右边自适应布局（flex）
<style type="text/css">
	*{margin: 0;padding: 0;}
	.container{
		display: flex;
		width: 100%;
		height: 100vh;
	}
	.left{
		width: 300px;
		background: red;
	}
	.right{
		flex: 1;
		background: blue;
	}
</style>

<div class='container'>
	<div class='left'>left</div>
	<div class='right'>right</div>
</div>
20. 一个盒子如何在页面中水平垂直居中
方式一：flex

<style type="text/css">
	*{margin: 0;padding: 0}
	.container{
		display: flex;
		justify-content: center;
		align-items: center;

		width: 1000px;
		height: 700px;
		border: 5px solid #ccc;
	}
	.main{
		background: red;
	}
</style>
	
<div class='container'>
	<div class='main'>main</div>
</div>

方式二：transform

<style type="text/css">
	*{margin: 0;padding: 0}
	.container{
		position: relative;

		width: 1000px;
		height: 700px;
		border: 5px solid #ccc;
	}
	.main{
		position: absolute;
		left: 50%;
		top: 50%;

		transform: translate3d(-50%,-50%,0);

		background: red;
	}
</style>
	
<div class='container'>
	<div class='main'>main</div>
</div>
21. 简述px、em、rem的区别
1. px 是绝对单位（具有固定的大小：不会随着页面或元素的缩放而改变大小）
2. em 是相对单位，相对于“父元素的字体大小来计算元素的大小”。
3. rem 是相对单位，相对于根元素（html 元素）的字体大小来计算元素的大小。

总结：px 是绝对单位，em 和 rem 是相对单位，其中 em 相对于父元素的字体大小，而 rem 相对于根元素的字体大小。
22. 移动端适配的方式有哪些？
移动端适配是指：在不同移动设备上（如手机、平板）显示网页时，保证页面内容可以适应不同屏幕大小和分辨率的技术方法。
方案一：rem单位 + 动态改变html的font-size （某宝使用的方案）

rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size尺寸。

在开发中，我们只需要考虑两个问题：

问题一：针对不同的屏幕，设置html不同的font-size
问题二：将原来要设置的尺寸，转化成rem单位

方法一：编写js代码 或 使用

方法二：flexible库

flexible库地址：https://github.com/amfe/lib-flexible

关于设计图给出的px，要转成rem可以使用：编辑器提供插件，例如：

VSCode插件：px to rem & rpx & vw (cssrem) 的插件，在编写时自动转化
方案二：vw 适配方案（某东使用的方案）

1vw等于屏幕的1%，vw我们只面临一个问题：将尺寸换算成vw的单位即可。

vw相比于rem的优势：不需要去计算html的font-size大小，也不需要给html设置这样一个font-size

关于设计图给出的px，要转成vw可以使用：编辑器提供插件，例如：

VSCode插件：px to rem & rpx & vw (cssrem)，在编写时自动转化
23. 响应式布局和弹性布局区别和应用

响应式布局和弹性布局是两种常见的网页布局技术，它们有一些区别和应用场景：

  1. 响应式布局（Responsive Layout）：

    • 响应式布局是一种设计方法，通过使用媒体查询和弹性网格等技术，使网页能够根据用户设备的不同尺寸和分辨率进行自适应调整，以提供更好的用户体验。
    • 在响应式布局中，网页会根据设备的屏幕大小和方向，调整元素的布局、大小、位置等，以确保内容在不同设备上都能够正常显示。
    • 响应式布局通常会使用百分比、媒体查询、弹性盒子等技术来实现布局的自适应性，可以让网页在桌面、平板和手机等不同设备上都有良好的显示效果。
    /* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}
  
/* 当页面宽度大于等于 900 像素时应用该样式 */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="a.css">
/* 当页面宽度小于等于 600 像素时应用该样式 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="b.css">

  2. 弹性布局（Flexible Layout）：

    • 弹性布局是一种基于相对单位（如百分比、em、rem）的布局方式，可以让布局中的元素相对于父元素或其他元素进行伸缩和调整。
    • 在弹性布局中，元素的大小和位置可以根据父元素或其他元素的尺寸和内容动态调整，使得页面的布局更加灵活和适应不同屏幕尺寸。
    • 弹性布局通常会使用相对单位和弹性盒子等技术来实现布局的弹性性，可以方便地实现元素的自适应和伸缩。

区别：

- 响应式布局可以根据不同尺寸，展示不同样式、加载不同资源。
- 弹性布局是布局方式，可以很好的等分空间等等，但是做不到，根据不同设备加载不同资源等内容。

应用场景：

- 响应式布局适用于需要在不同设备上显示不同布局的情况，如桌面、平板和手机等。
- 弹性布局适用于需要实现元素的相对大小和位置调整的情况，比如根据父元素尺寸自适应的布局。
24. 媒体查询可以写if判断吗？

虽然媒体查询本身不支持传统的 if 判断语句，但可以通过组合不同的媒体特性和逻辑运算符（如 and、or、not）来实现类似条件判断的效果。例如，可以使用以下方式来组合不同的媒体特性：

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 在屏幕宽度在 768px 到 1024px 之间应用的样式 */
}

通过合理组合不同的媒体特性和值，可以实现根据不同设备条件应用不同样式的效果，虽然语法上不是传统的 if 判断，但能够达到类似的效果。

25. 随着屏幕缩放，图片能够自适应保持长宽等比为16:9或者1:1，图片不能压缩
原理：让比如某div盒子具有16:9或者1:1的比例，然后通过object-fit的设置，让图片适应容器的高度与宽度。

要实现在屏幕缩放时，图片能够自适应并保持长宽比为 16:9 或 1:1，同时又不能被压缩，可以通过 CSS 的 object-fit 属性和媒体查询来实现。object-fit 属性用于指定替换元素（如 <img> 标签）的内容应该如何适应其容器。

以下是一个示例代码，展示了如何实现图片自适应并保持长宽比为 16:9 或 1:1 的效果：

<style>
  .image-container {
    width: 100%;
    max-width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 比例 */
    position: relative;
    overflow: hidden;
  }

  .image-container.square {
    padding-bottom: 100%; /* 1:1 比例 */
  }

  .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 图片自适应并保持长宽比 */
  }
</style>


<div class="image-container">
  <img src="path/to/your/image.jpg" alt="Image" />
</div>

<div class="image-container square">
  <img src="path/to/your/image.jpg" alt="Image" />
</div>

在上面的代码中，通过设置 .image-container 元素的 padding-bottom 属性来实现容器的高度与宽度之比为 16:9 或 1:1。图片使用绝对定位填充整个容器，并通过 object-fit: contain; 实现图片自适应并保持长宽比的效果。

通过媒体查询可以根据屏幕宽度等条件来调整图片容器的大小，从而实现在不同屏幕尺寸下图片的自适应效果。这样，无论屏幕如何缩放，图片都能保持所需的长宽比，同时不会被压缩变形。

object-fit 属性部分说明：有兼容性

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

1. object-fit: contain
	图像的大小将被调整以适应其容器的长宽比。如果图像的长宽比与容器的长宽比不一致，它就会被“黑边化”。（即图像的长宽比不变）
	
2. object-fit: cover
	图像也将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，那么它将被剪切以适应。

3. object-fit: fill
	图像将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，它将被挤压或拉伸。
	
4. object-fit: none
	图像根本不会被调整大小，既不会被拉伸也不会被挤压。它的作用与cover类似，但它不依赖于其容器的长宽比。
...

三、JavaScript考题

1. js延迟加载的方式有哪些？

https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

延迟加载：async、defer，例如：

<script defer type="text/javascript" src='script.js'></script>
  • defer : 等html全部解析完成，才会执行js代码，顺次执行js脚本。
  • async : async是和html解析同步的（一起的），不是顺次执行js脚本（谁先加载完谁先执行）。
2. js数据类型有哪些？
基本类型：string、number、boolean、undefined、null、symbol、bigint
引用类型：object

NaN是一个数值类型，但是不是一个具体的数字。

关于数据类型的考题

考题一：
console.log( true + 1 );
console.log( 'name'+true );
console.log( undefined + 1 );
console.log( typeof undefined );
考题二：
console.log( typeof(NaN) );
console.log( typeof(null) );
3. null和undefined的区别
1. 作者在设计js的都是先设计的null（为什么设计了null：最初设计js的时候借鉴了java的语言）
2. null会被隐式转换成0，很不容易发现错误。
3. 先有null后有undefined，出来undefined是为了填补之前的坑。

具体区别：JavaScript的最初版本是这样区分的：null是一个表示"无"的对象（空对象指针），转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
4. typeof和instanceof的区别

关于instanceof一道考题

考题：如何实现一个自己的instanceof
5. JS判断变量是不是数组，你能写出哪些方法？
6. 和=区别
==  :  比较的是值
		
		string == number || boolean || number ....都会隐式转换
		通过valueOf转换（valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。）

=== ： 除了比较值，还比较类型
7. js运行机制考题

  1. js运行机制了解吗？

  2. js微任务和宏任务有哪些？
8. js数组考题
什么是类数组？怎么转换成真正的数组？
js数组去重
数组进行扁平化，并且去重
在数组中，找出重复次数最多的元素
js数组常用方法
数组转字符串的方法
js数组长度为10，删除比如第五个怎么办？
slice是干嘛的、splice是否会改变原数组
map和forEach的区别
find和filter的区别
some和every的区别
9. js字符串考题

  1. 字符串转换为数组的方法

  2. 给字符串新增方法实现功能：给字符串对象定义一个addPrefix函数，当传入一个字符串str时，它会返回新的带有指定前缀的字符串，例如：

    console.log( 'world'.addPrefix('hello') )

    控制台会输出helloworld

  3. 找出字符串出现最多次数的字符以及次数

10. 闭包
11. 防抖和节流
12. 原型和原型链了解吗？
13. js实现继承的方式
14. 深拷贝和浅拷贝区别？浅拷贝有哪些？请实现一个深拷贝
15. js改变this指向的方式有哪些？
16. 说一下call、apply、bind区别
17. new操作符做了什么？
18. js如何比较2个像的键值是不是完全一样
19. 本地存储考题
  1. localStorage、sessionStorage、cookie的区别
  2. cookie内容最多允许多大
  3. localStorage存储超过最大值怎么办？

四、ES6考题

var、let、const三者区别

js中什么是可选链操作符

ES6新增数组方法有哪些

箭头和普通函数区别

map和set区别

Promise考题

promise你是怎么理解的
promise的链式调用是怎么实现的
promise错误捕获有几种方法
promise的all和promise的race有什么区别

setTimeout、Promise、async/await的区别

es6平时用的比较多的有哪些？

五、代码执行结果考题

请写出以下打印顺序

console.log( 1 )
setTimeout(()=>{
	console.log( 4 )
},0)
Promise.resolve().then(()=>{
	console.log(5)
})
console.log(3)

下面程序的打印结果是什么？

var student = {
	firstName:'Alice',
	lastName:'Jones',
	age:21,
	sayHi:()=>{
		return 'Hi,I am' + this.firstName;
	}
}
student.sayHi()

下面的执行结果是什么？

const promise = new Promise((resolve,reject)=>{
	console.log(1);
	resolve()
	console.log(2);
})
promise.then(()=>{
	console.log(3);
})
console.log(4);

下面两个程序的打印结果分别是什么？

for(var i=0;i<3;i++){
	setTimeout(()=>{
		console.log(i);
	})
}

for(let i=0;i<3;i++){
	setTimeout(()=>{
		console.log(i);
	})
}

写出下面代码执行结果，并解释原因

let a = { n:1 };
let b = a;
a.x = a = { n:2 };
console.log( a.x );
console.log( b.x );

以下代码打印顺序为

async function async1(){
	console.log('1');
	await async2();
	console.log('2');
}
async function async2(){
	console.log('3')
}
console.log('4');
async1();
console.log('5');

test1()的执行结果

const test = async ()=>{
	console.log(2);
	await new Promise(function(resolve,reject){ resolve() })
	console.log(3);
}
const test1 = ()=>{
	console.log(1);
	test();
	console.log(4);
}

obj.a()、obj.b()、new obj.a()、new obj.b()的输出结果分别是什么

var id = 'GLOBAL';
var obj = {
	id:'OBJ',
	a:function(){
		console.log(this.id );
	},
	b:()=>{
		console.log(this.id );
	}
}

下列打印结果是？

var foo = 'hello';
(function( foo ){
	console.log( foo );
	var foo = foo || 'word';
	console.log( foo );
})( foo )
console.log( foo );

写出下面js的运行后的结果

var a = 100;
function test(){
	alert( a );
	var a = 10;
}

写出下面js的运行后的结果

this.m = 1000;
var obj = {
	m:100,
	test:function(){
		return function(){
			alert( this.m );
		}
	}
}
(obj.test())();

看下列代码，将会输出什么？

var foo = 1;
(function(){
	console.log( foo )
	var foo = 2;
	console.log( foo );
})()

请写出下面代码输出结果

var myObj = {
	name:'小鹿线1',
	showThis:function(){
		console.log( this );
		var self = this;
		function bar(){
			self.name = '小鹿线2';
		}
		bar();
	}
}
myObj.showThis();
console.log( myObj.name );
console.log( window.name );

以下JS程序的输出是什么

var a = 'undefined';
var b = 'false';
var c = '';
function assert(aVar){
	if( aVal ){
		alert( true );
	}else{
		alert( false );
	}
}
assert( a );
assert( b ); 
assert( c );

以下程序的输出是什么

function Foo(){
	var i = 0;
	return function(){
		document.write( ++i );
	}
}
var f1 = Foo();
f2 = Foo();
f1();
f1();
f2();

输出下面代码执行结果

var iterable = new Set([1,1,2,2,3,3]);
var value = 0;
for(let value of iterable){
	console.log( value );
}
console.log( value );

写出一下代码执行顺序

const f1 = ()=>{
	return new Promise((resolve)=>{
		console.log('f1');
		resolve('f2');
		console.log('f3');
	})
}
const async1 = async ()=>{
	console.log('a1');
	const a2 = await f1();
	console.log('a2');
	console.log('a3');
}
console.log('start');
setTimeout(()=>{
	async1();
	console.log('f4');
	
},500);
console.log('end');

六、JS逻辑考题

冒泡排序

提取url中的参数

请编写一个函数“getSortNum()”实现随机选取10-100之间的10个数字，存入一个数组，并进行升序降序，返回该结果

使用javascript实现paddngNumber方法：分隔数字，每隔三位使用逗号分隔一次，参数是Number，返回分隔后的字符串。

paddingNumber(1234.56); //reutrn '1,234.56'
paddingNumber(123456789); //reutrn '123,456,789'
paddingNumber(-987654.3); //reutrn '-987,654,3'

//代码
function paddingNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

//replace() 方法查找所有非单词边界（\B) 的三位数组合 ((\d{3})+)，并且后面不是数字 ((?!\d))，并在每个这样的组合后面插入逗号 (``,`)。

console.log( paddingNumber( 100000 ) )

两数之和

编写一个函数printNumbers(n)，以异步方式从1打印到n，确保数字之间有一秒的延迟

请使用2种拷贝方法将arr的数据拷贝在arr1中

var arr = ['1','2','3']

Vue考题

vue2的api考题

vue2的$set有用过吗？
直接给一个数组项赋值，vue能检测到变化吗？

vue3的api考题

Vue中的mixin是什么以及它们的作用，vue3中怎么实现mixin
setup到底干啥的，setup中如何获取组件实例
如何理解toRef、toRefs
Suspense，Teleport组件作用是什么
toRaw与markRaw，customRef的作用

vue-router考题

vue路由跳转
vue导航守卫
路由传参和区别
Vue Router如何定义动态路由？如何获取传递的动态参数

vue2和vue3区别

vue2和vue3区别
vue2和vue3响应式原理不同，具体有哪些不同
Object.defineProperty支持map和set这种结构吗？
proxy兼容性，不支持IE11，怎么兼容知道吗？
vue2的状态管理和vue3的状态管理
vue2和vue3的diff算法有什么区别？

vue2生命周期

第一次页面加载会触发哪几个钩子，DOM渲染在哪个周期就已经完成
多组件（父子组件）中生命周期的调用顺序说一下
在什么阶段才能访问操作DOM？

vue组件

vue组件通信（传值）
vue组件的name有什么作用
vue的组件缓存
keep-alive生命周期（缓存还是不缓存的操作）
Vue3中子组件如何调用父组件的方法
请描述一下封装Vue3组件的过程？你怎么封装公共组件？
Vue3动态组件介绍一下
Vue3异步组件介绍一下

computed考题

comupted和watch有什么区别？
computed支持异步吗？watch为什么会支持异步呢?
computed原理

vue通用考题

vue数组中的key的作用是什么
插槽的几种使用方式
如何让css样式只在当前vue组件中起作用？
vue中的ref作用有哪些？
怎么理解vue的单项数据流
class与style如何动态绑定
v-if和v-show区别

vue指令考题

vue中的指令是什么？列举一些常用的指令
v-show指令和v-if指令的共同点和不同点是什么？
自定义指令怎么使用，作用于哪里

vue项目打包

vue项目打包有遇到问题吗？
vue项目打包白屏问题怎么解决？
项目打包内存溢出怎么解决？

TS面试题

用TS都遇到过哪些问题？

ts和js区别

ts可不可以定义全局变量，不指定具体类型

ts可以直接运行吗？

type和interface有什么区别？

多个同名interface可以合并吗？

用typescript实现函数caller，接收一个函数作为第一个参数，其返回参数类型由接收的函数参数决定

用过ts的工具类型吗？

webpack考题

webpack了解吗

了解vite吗

webpack优化打包体积，有了解吗？

Nodejs考题

nodejs都用过哪些模块？用它干什么？

Git考题

代码版本控制工具是git吗？git常用命令是？

你是如何解决上传代码冲突问题的

简述git merge和git rebase的区别

网络请求

跨域有了解吗？跨域是http的限制还是浏览器的限制，为什么有这个限制

服务端会产生跨域吗

解决跨域的方式有哪几种

cors具体怎么解决跨域的

http常见状态码

http有哪些常见的请求头和响应头

http和https区别

当在浏览器输入一个url到页面渲染完毕都经历了什么？

协商缓存和强缓存区别

跨域，你是如何解决跨域的？

websocket用过吗？基础使用？

websocket和短轮询有什么区别

请求的时候get和post方式的区别？

axios封装了什么？

小程序考题

简述小程序页面跳转方式

简述小程序分包方式

简述小程序微信支付流程

简述小程序如何优化加载速度

简述小程序条件编译原理及用法

小程序怎么做适配？高度怎么适配

小程序内嵌一个h5页面

对于webview打开的限制有了解过吗？

小程序的登录流程

openid代表什么含义
appid代表什么

uniapp考题

uniapp进行条件编译的俩种方法？小程序端和H5的代表值是什么

uniapp的配置文件、入口文件、主组件、页面管理部分

uniapp不同屏幕不同设备适配做了什么

用uniapp打包过app吗？

性能优化考题

性能优化标准（指标）

影响网页加载和页面呈现的因素有哪些？如何优化？

兼容性考题

你遇到的兼容问题，移动端兼容

proxy不兼容IE11怎么办？

项目功能问题

后台管理系统登录流程

后台登录后不同的用户，不同的权限怎么做？ 
登录的流程（后台管理系统）
登录的流程（详细说明一下），比如怎么知道这个用户，就是这个用户合法，判断的依据是什么？
项目的权限都包括哪些？权限部分是怎么实现的？
之前是怎么做角色权限设置的

异步下载任务怎么做

微信一键登录怎么做

pdf预览和下载

你要做一个表单，要考虑哪些东西？

图片上传？有没有上传到阿里云上？

支付怎么做？

WEB安全

web安全都做了什么？

web安全的csp能说一下吗？

其他考题

单页面和多页面区别

SPA和MPA区别，它们的优缺点有哪些？

posted @   jialiangzai  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
· 前端面试-老朱版本
· 前端面试题
· 前端面试题集合
· 转 前端面试HTML和CSS总结
· CSS 面试题
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

喜欢请打赏

扫描二维码打赏

微信打赏

了解更多

点击右上角即可分享
微信分享提示