本文详述了前端面试中的常见问题，涵盖了HTML与CSS的区别、页面元素隐藏方式、盒模型、移动端适配方案、Sass与Less的优势、JavaScript数据类型判断、事件委托、Ajax操作、Vue.js的组件通信、路由参数、ES6特性等多个主题。从CSS的布局技巧到JavaScript的异步处理，再到前端框架的深入理解，全面梳理了前端开发者需要掌握的核心知识点。
1、HTML&css 部分
1、src 和 href 的区别 ？
Src：source 资源引用：
【指向外部文档中的资源引入到当前所在标签位置】
特性：
1- 表示引用外部资源
2- 替换元素本身的内容
3- 暂停其他资源下载
Href：hypertext reference 超文本引用
【用来建立当前元素和文档之间的链接】
特性：
1- 表示超链接
2- 不替换元素本身的内容
3- 不暂停其他资源下载
核心思想本质区别：
Src 代表的是网站的一部分，不会对网站的使用造成影响
Href 带表网站的附属资源，不会对网站的核心逻辑和结构造成影响
为什么 css 引用中使用 href？
Css 属于网站的附属资源，不影响网站核心逻辑和结构，也可以简单归结为历史遗留
问题
特性第三条详细说明：
1 浏览器始别 href 引用的文档并对该文档进行下载，同时不会停止当前文档的处理，「这
也是建议用 link 方式引入 css 而不用 import 的原因」
2 当浏览器解析到 src 引用时，会暂停浏览器的渲染，直到该资源加载完毕，「这也是建
议将 javascript 脚本放在底部的原因」
2、页面元素隐藏方式 和各自特点？
1 display:none 元素在页面上将消失，不占据页面空间，会导致浏览器的回流与重绘,不能响应交
互类事件；【元素不可见，不占据空间，无法响应点击事件】
2 visibility:hidden 元素在页面占据的空间不变，所以它只会导致浏览器重绘而不会回流，也不能
响应交互类事件；【元素不可见，占据空间，无法响应点击事件】
3 opacity:0 元素在页面占据的空间不变，不会导致浏览器回流或重绘（因为浏览器对于
transform 和 opacity 这两 种变化处理的方法为合成渲染），可以响应交互类事件。【改变元素
透明度，元素不可见，占据页面空间，可以响应点点击事件。】
4 设施 height、width 属性为 0：如果想要隐藏需要将盒模型的边距样式都清 0，如存在子元素子
元素 overflow：hidden【元素不可见，不占据空间，无法响应点击事件】
5 Position：absolute 设置元素移出当前页面【元素不可见，不影响布局】
注意：择优记前 3 点，详细说明如下
display 属性为 none，效果：元素不显示，不占位
设置 css visibility 属性为 hidden，效果：元素不显示，但占位
z-index:-1 元素隐藏，但它是将自身置于其他元素下面
3、用过哪些盒模型【请阐述标准和模型和怪异和模型的差别】？
标准盒模型（W3C 盒子模型）：
设置的 width 或 height 是对 实际内容（content）的 width 或 height 进行设置，内容周围的 border
和 padding 另外设置，
即盒子模型的 width（height）=设置的 content 的宽高+padding+border
怪异盒模型（IE 盒子模型）
设置的 width 或 height 是对 实际内容（content）+内边距（padding）+边框（border）之和的
width 和 height 进行设置的
其盒模型的 width（height）=设置的 width（height）
box-sizing: content-box 是 W3C 盒子模型
box-sizing: border-box 是 IE 盒子模型
4、移动端适配方案
flex + rem 单位 用来做适配效果 （比如淘宝和小米移动端） 当前市场最多
flex +viewport width / vh 单位 做适配效果 （比如 B 站的移动端）一个新的趋势
让 flex 做布局（盒子摆放），让 rem 或者 vw/vh 实现网页元素的尺寸（宽度和高度）适配屏
幕
静态布局：在 meat 标签中的 viewport 标签中设置 width,通过 js 动态修改标签的 initial-scale 使
得页面等比缩放，采用 px 为单位，不存在兼容问题，用户体验极差
流式布局：使用%定义宽度，高度使用 px 固定，通常使用 max-width,和 min-width 来控制页面的
最大宽度和最小宽度，实现很简单，但是在大屏幕手机或者切换横竖屏的模式下可能会造成元素拉伸变形
字体大小无法根据屏幕大小发生变化
rem 布局：将屏幕分成 100 等份，让元素随着屏幕的变化而等比缩放。以某个设备为标准，计算元
素占据屏幕百分之几。
根据上面可以得出公式:
相对于屏幕的 1%
document.documentElement.fontSize = “width / 100”;
计算元素占用屏幕的百分之几
元素 rem = 元素的宽度 / ui 图宽度 * 100
Vm/vh:
css3 中引入了一个新的单位 vw/vh，与视图窗口有关，vw 表示相对于视图窗口的宽度，vh 表示相
对于视图窗口高度，除了 vw 和 vh 外，还有 vmin 和 vmax 两个相关的单位。
vw — 视口宽度的 1/100；vh — 视口高度的 1/100;
vw 的缺点: 在 ios 和安卓上存在兼容性问题，只适用高版本；
另外，在使用弹性布局时，一般会限制最大宽度，比如在 pc 端查看我们的页面，此时 vw 就无法力
不从心了，因为除了 width 有 max-width，其他单位都没有，而 rem 可以通过控制 html 根元素的 font-size
最大值，而轻松解决这个问题
1- rem 适配【视觉窗口+动态配置 rem】
1 视觉窗口
2 动态配置 rem
通过 js 获取设备宽度来动态设置 font-size 随着视口大小的改变而改变，流程如下：
- 获得设计稿尺寸，如 750px
- 对设计稿标注进行转换
- 需要等比缩放的使用 rem，不需要缩放的，例如 border 阴影，则使用 px
缺点
css 与 js 代码具有一定的耦合性
必须将改变 font-size 的代码放在 css 样式之前
5、scss、less 是什么 有什么优势？
sass 和 less 都是 css 的预编译处理语言，他们引入了 mixins，参数，嵌套规则，运算，颜色，
名字空间，作用域，JavaScript 赋值等 加快了 css 开发效率,当然这两者都可以配合 gulp 和 grunt
等前端构建工具使用
Sass 优势：
1- 相对 less stylus 更早诞生的 css 预处理器，相对使用更加广泛
2- 可编程能力较强，支持函数、列表、对象、判断、循环等
3- 丰富的 sass 库：Compass/Bourbon
缺点：
在公司内部安装 node-sass 会失败，需要使用 cnpm 或者手工安装
Less 优势：
可以在浏览器中运行，实现主题定制功能
缺点：
编程能力弱，不直接支持对象，循环，判断等；只有 when 判断
@variable 变量命名和 css 的@import/media/keyframes 等含义容易混淆；
mixin/extend 的语法比较奇怪；
mixin 的参数如果遇到多参数和列表参数值的时候容易混淆；
6、Css 中 margin 外边距会出现哪些重叠情况？如何处理？
边界重叠: 是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重
合在一起而形成一个单一边界。
底边界与顶边界重叠
元素的底边界与前面元素的顶边界重叠
元素的顶边界与父元素的顶边界重叠
解决办法:
外层元素用 padding 代替
外层元素 用 overflow:hidden;
内层元素加 float:left 或者 display:inline-block
内层元素 border:1px solid transparent;
内层元素:position:absolute;
7、在 css 中当自身设置绝对定位父级元素没有相对定位时，自身依据什么元素来定位？
如果子级元素设置了绝对定位，而父级元素没有设置相对定位是，依据 body 元素来进行相对定
位
8、写出本地存储和 cookie 的区别
相同点：都是保存在浏览器的、同源的
不同点：
1）传递数据方式不同
a. cookie 数据始终在同源的 Http 请求中携带（即使不需要）,cookie 在浏览器和服务
器之间来回传递，
b. sessionStorage 和 localStorage 不会自动的把数据发送服务器端，在本地保存；
2）存储大小不同
a. cookie 数据最大是 4k, b. sessionStorage 和 localStorage 比较大，可以达到 5M，还可以申请更大的空间
3）有效期不同
a. sessionStorage 仅在当前标签页（窗口）有效，如果关闭就无效
b. localStorage 永久有效，除非手动删除
c. cookie 是可以有效期的
4）作用域不同
a. sessionStorage 仅在当前标签页（窗口）有效 即 同一个页面窗口
b. localStorage 在所有同源的窗口中都是共享的
c. cookie 在所有同源的窗口中都是共享的
9、如何让一个元素水平垂直居中？
1 设置子元素相对定位 垂直 top 水平 left 居中 50% transform：translate（-50%，-50%）
2 设置子元素相对于父元素进行绝对定位， 垂直 top 水平 left 居中 50% transform：
translate（-50%，-50%）
3 flex 布局 弹性盒子：设置父元素：display：flex；justfy-content：center；align-items：
center；
4 设置子元素相对于父元素绝对定位，设置子元素上下左右皆为 0 ，子元素 margin：auto
5 父级元素设置：display：table-cell；vertical-align：middle；自己元素设置：margin：0
auto；
10、写出 flex 布局中对父级元素以及子级元素的属性分别有哪些
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
flex 伸缩布局的原理：就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。
flex 伸缩布局的特点
1 父盒子设置 flex 布局后，子元素将不区分行内元素和块元素，此时所有子元素均可以设置宽
高；
2 自适应缩放，子元素设置 flex 属性后，可根据可视窗口自适应缩放；
3 任何元素均可指定 flex 布局，可以理解为父盒子对子元素“一视同仁”；
4 不需要清除浮动，因为此时 float、clear、vertical-align 等属性失效；
11、使用 sass 目的是什么？
Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、
函数（functions）等功能，并且完全兼容 CSS 语法。
Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。
sass 预处理可以更好地组织管理越来越复杂而庞大 css 样式表。
sass 的易维护，更方便的定制，以及更高效的开发项目
2、Js 部分
1、如何判断 js 数据的类型？说明基本数据类型和引用数据类型的区别？
Typeof construcuor instanceof
- 什么是基本数据类型：
基本数据类型主要有 String、Number、Boolean、Undefined、Null、symbol(Es6
中新增) - 什么是引用数据类型：
引用数据类型有 Object、Function、Array
基本数据类型和引用数据类型的区别在于保存值不同
基本数据类型中的变量都是保存在栈内存中的，值与值之间相互独立，修改一个变
量是不会改变另一个变量的值
引用数据类型保存在堆内存中，每创建一个引用对象，就会在堆内存中开辟一个新
的空间，而栈内存中的变量值主要保存的是引用数据类型的内存地址
注意
当比较两个基本数据类型的值时就是比较值，而比较两个引用数据类型的时，他比较的时内存地址，如果
两个对象的值一模一样但是地址不同也会返回 false
2、如何判断一个对象是否具备某个属性 ？ 如何判断对象为空对象 ？
使用“!==”进行判断
使用 in 操作符，如果返回 ture 则存在
hasOwnProperty()
propertyIsEnumerable() 是 hasOwnProperty() 的增强版
使用 JSON.stringify 把对象转为字符串,再判断字符串是否等于"{}" https://wenku.baidu.com/view/694d47044b2fb4daa58da0116c175f0e7cd1196e.html?wkts=16
67466734616&bdQuery=2%E3%80%81%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E
4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E5%85%B7%E5%A
4%87%E6%9F%90%E4%B8%AA%E5%B1%9E%E6%80%A7+%3F+%E5%A6%82%E4%BD%95%E5
%88%A4%E6%96%AD%E5%AF%B9%E8%B1%A1%E4%B8%BA%E7%A9%BA%E5%AF%B9%E8%B
1%A1+%3F
https://blog.csdn.net/qq_42730111/article/details/121670953
3、对于 JS 批量绑定事件如何实现事件委托 ？对于事件委托提升性能如何理解 ？
https://blog.csdn.net/weixin_43359799/article/details/123132071
什么是事件委托：通俗的讲，事件就是 onclick，onmouseover，onmouseout，等就是事件，委托呢，
就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就
是利用冒泡的原理，把事件加到父级上，触发执行效果。
好处 1: 提高性能
好处 2: 新添加的元素还会有之前的事件。
优点：
好处 1 详细说明：1.可以大量节省内存占用，减少事件注册。比如 ul 上代理所有 li 的 click 事件就很不错。
好处 2 详细说明：2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
缺点：
事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不
该被触发的事件被绑定上了事件。
4、前端请求数据的过程中为什么出现跨域？如何解决跨域问题？
跨域是如何形成的？
当我们请求一个 url 的 协议、域名、端口三者之间任意一个与当前页面 url 的协议、域名、端
口 不同这种现象我们把它称之为跨域
跨域会导致：
1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
2、无法接触非同源网页的 DOM
3、无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）
导致跨域的根本原因是请求浏览器的同源策略导致的 ，而跨域请求报错的原因是： 浏览器同源策略
&& 请求是 ajax 类型 && 请求确实跨域了。 - Jsonp
2.CORS
3.代理转发
https://blog.csdn.net/weixin_44447255/article/details/123739696
https://blog.csdn.net/qq_44818085/article/details/109318708?ops_request_misc=%257B%2522r
equest%255Fid%2522%253A%2522166746116516800182721276%2522%252C%2522scm%2522
%253A%252220140713.130102334…%2522%257D&request_id=166746116516800182721276&b
iz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2alltop_positive~default-1
-109318708-null-null.142v62pc_search_tree,201v3add_ask,213v1control&utm_term=%
E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5&spm=1018.2226.3001.4187
5、说明原生 Ajax 的实现步骤？并解释步骤的含义？
// 1- 创建对象 if 判断验证浏览器兼容
var xhr=null
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest()
}else{
xhr=new ActiveXobject(“microsoft.XMLHTTP”)
}
//2- 打开浏览器并输入地址
xhr.open(“get”,地址，true)
//3- 发送请求
xhr.send()
//4- 根据浏览器响应的状态码执行对应操作
xhr.onreadystatechange=function(){
if(xhr.readyState4&&xhr.status200){
}else{}
}
6、js 中 new 操作符做了哪些事情
1、创建一个空的对象
2、链接到原型
3、绑定 this 指向，执行构造函数
4、确保返回的是对象
7、什么是原型和原型链，谈谈你的理解
https://blog.csdn.net/weixin_42125732/article/details/116043738
8、使用冒泡对一个数组从小到大排序（代码题）
小于号 ：从大到小 大于号：从小到大
https://blog.csdn.net/qq_35146837/article/details/114710232
9、请写出下面代码的输出结果
10、详细说说你对闭包的理解
https://blog.csdn.net/wqxiaongqi/article/details/123036890
1、理解
函数嵌套函数
里面的变量会引用外面的变量
被使用的变量不会被垃圾
最低0.47元/天 解锁文章
扫一扫
1572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
