2023年最新前端面试题——你也可以成为那个卷王（持续更新中~）

1、快速居中对齐（版心）

父 display:flex; 子 margin:auto;

2、margin和padding的区别

作用对象不同，margin相对于外部，padding相对于自身

3、vw和百分比的区别

vw是视口宽度，百分比是相对于父继承

4、块级和行内元素的区别

块级元素宽默认占满继承父，行内元素宽高由内容决定不可设置

5、如何让浏览器支持小字体

使用scale缩小，transform:scale(0.5);-webkit-transform:scale(0.5);

6、var、let、const

var存在声明提升，声明覆盖，无块作用域；let为变量，const为常量可以避免这些

7、浅拷贝和深拷贝

基本数据类型赋值为深拷贝，引用数据类型赋值为浅拷贝
一维解构赋值为深拷贝，多维解构赋值为浅拷贝
Object.assign()为浅拷贝，json方法为深拷贝，递归遍历可实现深拷贝

8、在浏览器中输入url并回车都发生了什么

第一次访问：
输入url->dns域名系统匹配真实ip->建立连接（三次握手）->获取数据渲染页面->四次挥手
第二次访问：
读取浏览器的缓存，看第一次解析的ip有没有过期

9、浏览器页面渲染过程

10、从那些点做性能优化

页面加载性能（主）：
	1.减少http请求（合并文件精灵图）
	2.减小文件大小（资源压缩使用svg）
	3.CDN（大文件）
	4.SSR服务端渲染
	5.懒加载
	6.分包（uniapp分包加快主页的加载）
动画与操作性能：
	使用脱离文档流减少dom操作，避免回流（vue、react的虚拟domdiff算法，文档碎片）

11、懒加载原理

将img的真实src存在自定义属性data-src，获取页面的视口和滚动条高度，遍历img，假如img的offsetTop在可视区内则给src赋值

12、this指向问题

this指向上一个调用者
箭头函数没有this
call, apply, bind可以改变this指向
call,apply 改变之后执行一次，bind只改变不执行
call传对象，apply传数组

13、闭包

避免变量被污染、私有化、保存变量常驻内存
应用场景：节流防抖、封装库

14、new对象的过程

创建一个空对象，设置它的原型链，改变this指向，判断返回值类型

15、事件委托

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

16、封装dom库思路

使用匿名自执行函数，将公共方法挂载在原型上，封装for循环

17、vue2响应式

发布订阅模式 + 双向数据绑定（Object.defineProperty()） = vue2响应式

18、Promise

19、vue渲染过程

template->render()->虚拟dom->真实dom

20、vue权限控制

通过自定义指令