常见前端面试题整理（带答案）

【HTML篇】

1. HTML语义化的目的是什么？简述一下你对HTML语义化的理解

（1）根据内容的语义化，选择合适的标签。便于开发人员阅读和写出更优雅的代码，也便于团队后期的开发和维护；

（2）在没有CSS，或者CSS尚未加载的时候，页面也能够呈现出很好的内容结构、代码结构（如标题和正文分开）；

（3）有利于搜索引擎优化。搜索引擎依赖于标签来确定上下文和各个关键字的权重，语义化标签，有助于爬虫获取到更多有效的信息

2.HTML5有哪些新标签、新特性？

（1）canvas 标签，可以实现使用 javascript 在网页上绘制图像，如坐标轴、折线图；

（2）支持 svg（可伸缩矢量图形），svg 图像在放大的时候图像质量不会降低；

（3）新增 Geolocation API，可以获取用户的地理位置；

（4）新增 Local Storage（本地离线存储），使得 web 应用程序可以在本地浏览器中长期存储数据，关闭浏览器后数据不会删除；

3.href、url、src 的区别是什么？

（1）href，标签属性，超文本引用，用来建立当前文档和引用文档之间的链接。可以是绝对、相对URL。 常用于 <link> <a> 等标签。如：

        <link rel="stylesheet" herf="style.css" type="text/css" />
        // 告诉浏览器此处有一个“样式表”的资源，资源地址是当前目录的xx文件
（2）src 标签属性，sorce，指向【嵌入】到当前标签位置的资源的地址。可以为绝对、相对 url。常用于 <img> <script> 等标签。如：        

        <img src="./images/test.jpg" alt="测试图片” />
        // 告诉浏览器，在此处嵌入一张图片，图片地址是xxx.jpg
（3）url，值类型，统一资源定位符，描述互联网资源的位置及访问方法，也就是网址，组成：协议类型:主机host.域名domain:端口port/路径path/资源名称filename

        https:baike.baidu.com/item/hello                url 分为 “绝对url” 和 “相对url” 。

4、<img>的title和alt有什么区别?

1、alt： 图片加载失败时，显示在网页上的替代文字
2、title： 鼠标放在上面时显示的文字
3、alt 是必要属性，title 非必要

【CSS篇】

1.css水平或者垂直居中的写法，有哪些？能写多少写多少

1. 一般用到最多的就是文本居中：text-align: center;
2. margin:0 auto
3. line-height: height;//行高设置与高度一致
4. flex布局，给父元素添加display: flex，
5. 主轴对齐方式使用justify-content：center侧轴对齐方式目标：使用 align-items

2.清除浮动的几种方式，什么情况下会触发BFC？

3、行内元素和块级元素有什么区别？

行内元素

• 1、设置宽高无效
• 2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
• 3、不会自动进行换行

块级元素

• 1、能够识别设置宽高
• 2、margin和padding的上下左右均对其有效
• 3、独占一行

 行内块元素

• 能够识别设置宽高
• margin和padding的上下左右均对其有效
• 不会自动进行换行

4、CSS样式覆盖规则

• !important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

5、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

盒子大小 = content + border + padding + margin  // 自己带入一下上下左右的数据
盒子的宽等于content的宽
盒子的高等于content的高

6、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用

单冒号 ':'  表示伪类 （即一种行为后的样式）
双冒号 '::' 表示伪元素（即不存在dom结构中的元素，但页面依然可以呈现出效果）
::before 在元素之前添加一个伪元素 
::after  在元素之后添加一个伪元素

7、重绘和回流(重排)

• 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
• 由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
• 重绘不一定引起回流，而回流一定会引起重绘。

【JS篇】

1、JavaScript中的==与===

“==” 的比较规则

• 先检查两个操作数的数据类型是否相同
• 如果相同，则比较两个数是否相等
• 如果不同，则先将两个数转换为相同数据类型，再进行比较
• js自动进行了一次数据类型转换，将字符串、数组、布尔值转为数字，再进行比较。

“===”的比较规则

• 先检查两个操作数的数据类型是否相同
• 若不同，直接返回false
• 若相同，则比较二者是否相等
• 跟==不同，当数据类型不同时， 不进行数据类型转换，直接返回false

2、null和undefined

• undefined表示声明了变量，但未赋值

• null表示声明的变量赋值了，但赋值为空
• 0是一个数值
• ' '表示长度为0的字符串

3、闭包是什么？

• 闭包的实质是因为函数嵌套而形成的作用域链
• 闭包的定义即：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包

4、setInterval和setTimeout的区别

• setinterval是重复执行，第一次执行会延迟
• setTimeout是延迟执行，只执行一次
• setTimeout 结合递归函数，能模拟 setInterval 重复执行
• clearTimeout 清除由 setTimeout 创建的定时任务

【node篇】

1、说几条 Web 前端优化策略

• 减少 HTTP 请求数
• 把css链接文件在head中
• 把js链接文件在body中
• 合并css/js
• 数据的懒加载

2、localstorage,sessionstorage和cookie相同和不同？

localStorage：

• 生命周期永久生效，除非手动删除，
• 可以多窗口共享，
• 以键值对的方式存储

sessionStorage：

• 生命周期为关闭浏览器窗口，
• 可以多窗口共享，
• 以键值对的方式存储

3、什么是跨域？解决跨域的几种方式？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一个不同，就是跨域

• jsonp跨域
• Nginx反向代理
• cros

5.简述浏览器加载和渲染过程？

【vue篇】

1、请讲述下VUE的MVVM的理解？

MVVM 是 Model-View-ViewModel的缩写，即将数据模型与数据表现层通过数据驱动进行分离，从而只需要关系数据模型的开发，而不需要考虑页面的表现，具体说来如下：

Model代表数据模型：主要用于定义数据和操作的业务逻辑。

View代表页面展示组件（即dom展现形式）：负责将数据模型转化成UI 展现出来。

ViewModel为model和view之间的桥梁：监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

2、v-if和v-show的区别？

共同点：都能控制元素的显示和隐藏；

不同点：

• 实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；
• v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。