前端面试题（含部分答案）

swallow__wu
625 阅读13分钟

前言

HTML面试题

1. doctype的作用是什么？

doctype是文档类型声明（h5标准网页），且必须放在HTML文档的第一行，用来告知浏览的解析器用什么标准来解析文档，不同的渲染模式会影响到浏览器对css代码甚至js脚本的解析。有了这句话就说明浏览器要按照w3c标准来解析文档。

2. 文档解析类型有哪几种？

BackCompat: 怪异模式，浏览器按照自己的怪异模式解析页面（如果没有doctype,会默认按照此方式解析页面）。
CSS1Compat: 标准模式，浏览器按照w3c标准解析页面。
IE8还产生一种介于尚明两种模式之间的介乎标准模式，但是基本淘汰了。

3. 这三种模式的区别是什么？（接上一问追问）

怪异模式：会模拟更旧的浏览器的行为
标准模式：会遵循w3c标准按照HTML和CSS的定义渲染
近乎标准模式：会实施一种表单元格尺寸的怪异行为（与IE7之前的单元格布局方式一致），除此之外符合标准定义

4. html/xml/xhtml有什么区别？

xml是可扩展的标记语言，用于存储数据和结构，类似于json，但是json更加轻量高效，xml基本没有市场了。

html和xhtml都是超文本标记语言，只是html一开始没有什么标准，导致写法非常混乱松散；xhtml是遵循了后来制定的一些规范的，XHTML 与 HTML 的区别主要有以下几点：

xhtml元素必须被争取的嵌套
xhtml元素必须被关闭
元素标签必须小写
xhtml元素必须拥有根元素

5. HTML5新增了哪些特性？

  1. 新增了一些语义化标签，有 nav、header、footer、aside、article等
  2. 新增了一些底层api
  3. 新增了文档类型声明（只有一种）

6. 什么是data-属性？

HTML的数据属性，用于将数据存储于标准的HTML元素中作为额外信息，我们可以通过js访问并操作它，来达到操作数据的目的。

<article 
id="electriccars" 
data-columns="3" 
data-index-number="12314" 
data-parent="cars"
>
... 
</article>

前端框架出现之后，这种方式已经不流行了。

7. 有哪些常用的meta标签？

meta标签由name和content两个属性来定义，来描述⼀个HTML⽹⻚⽂档的属性，例如作者、⽇期和时间、⽹⻚描述、 关键词、⻚⾯刷新等，除了⼀些http标准规定了⼀些name作为⼤家使⽤的共识，开发者也可以⾃定义name。

  • charset：用于描述HTML文档的编码格式
<meta charset="UTF-8" >
  • http-equiv，顾名思义，相当于http的⽂件头作⽤,⽐如下⾯的代码就可以设置http的缓存过期⽇期
＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞
  • viewport，移动前端最熟悉不过，Web开发⼈员可以控制视⼝的⼤⼩和⽐例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

8. src和href的区别是什么？

  • src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如 js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以js脚本一般是放在底部而不是头部。
  • href是指向网络资源所在位置的超链接，用来建立当前元素或文档之间的连接，当浏览器识别到它指向的文件时，就会并行加载资源，不会停止对当前文档的处理。

9. img的srcset的作用是什么？（追问）

可以设计响应式图⽚，我们可以使⽤两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择 正确的⼀个资源。
srcset 定义了我们允许浏览器选择的图像集，以及每个图像的⼤⼩。
sizes 定义了⼀组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图⽚尺⼨是最佳选择。 所以，有了这些属性，浏览器会：
    查看设备宽度
    检查 sizes 列表中哪个媒体条件是第⼀个为真
    查看给予该媒体查询的槽⼤⼩
    加载 srcset 列表中引⽤的最接近所选的槽⼤⼩的图像
<img src="clock-demo-thumb-200.png" alt="Clock" srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" sizes="(min-width: 600px) 200px, 50vw">

10. 还有哪个标签能起到跟srcset相似作用？（追问）

picture 元素通过包含零或多个 source 元素和⼀个 img 元素来为不同的显示/设备场景提供图像版本。浏览器 会选择最匹配的⼦ source 元素，如果没有匹配的，就选择 img元素的 src 属性中的URL。然后，所选图像呈现 在 img 元素占据的空间中

<picture>
<source 
    srcset="/media/examples/surfer-240-200.jpg" 
    media="(min-width: 800px)"
> 
<img src="/media/examples/painted-hand-298-332.jpg" /> 
</picture>

11. script中defer和async的区别是什么？

正常模式：正常模式下，浏览器解析html过程中，当遇到script脚本的时候会立即加载并执行。
async模式：async模式下，浏览器解析html过程中，遇到script脚本的时候会立即加载，与此同时浏览器会继续解析html,当script脚本加载完毕的时候，浏览器停止解析html，执行js脚本，执行完js脚本以后浏览器继续解析HTML。这种模式不保证执行顺序，对于有前后依赖的情况不推荐使用。
defer模式：defer模式下，浏览器解析html过程中，遇到script脚本的时候也会异步加载script脚本，与async不同之处在于加载完script脚本之后不会立即执行，而是等html解析完之后再执行脚本。
下面的图可以更好的帮助理解：

微信截图_20210511162526.png

绿线代表解析html过程，蓝线代表加载js脚本过程，红线代表执行js过程

12. 有几种前端存储的方式？

cookie/localStorage/sessionStorage/Web SQL/IndexedDB

13. 这些方式的区别是什么？（追问）

cookies：在HTML5之前本地存储的主要方式，优点是兼容性好，请求头自带cookie方便，缺点是大小只有4k，自动请求头加上cookie浪费流量，每个domain限制20个cookie，使用起来麻烦需要自行封装。

localStorage：HTML5新增的api，特点是以键值对的形式存储，操作方便，存储量可达到5MB，除非手动删除否则永远存在，兼容IE8+

sessionStorage：和localStorage都是HTML5新增的api，以键值对的形式存储，大小为5M,不同之处在于它不会永久存储，当浏览器或者标签页关闭的时候数据会自动消失，属于会话级别的存储方式

Web SQL：2010年被w3c标准废弃的一种本地数据库数据存储方式

IndexedDB: 是被正式纳入html5标准的数据库存储方案，它是NoSQL数据库，用键值对进行存储，可以进行快速读取操作，非常适合web场景，同时用javascript 进行操作会非常方便

css面试题

1. css选择器的优先级是怎么样的？

CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器

在具体的计算层面，优先级是由A、B、C、D的值来决定的，其中他们的值计算规则如下：

  • A的值等于1的前提是有内联样式出现，否则A = 0;
  • B的值等于ID选择器出现的次数
  • C的值等于类选择器出现的次数
  • D的值等于标签选择器出现的次数 就⽐如下⾯的选择器，它不存在内联样式，所以A=0,不存在id选择器B=0,存在⼀个类选择器C=1,存在三个标签选择器 D=3，那么最终计算结果为: {0, 0, 1 ,3}
ul ol li .red { ... }

按照这个结算⽅式，下⾯的计算结果为: {0, 1, 0, 0}

#red { }

我们的⽐较优先级的⽅式是从A到D去⽐较值的⼤⼩，A、B、C、D权重从左到右，依次减⼩。判断优先级时，从左到 右，⼀⼀⽐较，直到⽐较出最⼤值，即可停⽌。 ⽐如第⼆个例⼦的B与第⼀个例⼦的B相⽐，1>0,接下来就不需要⽐较了，第⼆个选择器的优先级更⾼。

2. link和@import有什么区别？

link属于xthml标签，而@import是css提供的 页面被加载时，link会同时被加载，而@import引用的css会等页面被加载完再加载 import是ie5以上才能识别，而link是xhtml标签，无兼容性问题

3. 有哪些方式可以隐藏页面元素？

4. em/px/rem区别？

5. 块级元素水平垂直居中有哪些方式？

6. css有几种定位方式？

7. 为什么有时候人们用tranlate来改变位置而不是定位？

8. 如何理解z-index?

9. 如何理解层叠上下文？

10. 清除浮动有哪些方式？

11. 谈谈对css-sprites的理解？

12. 谈谈对媒体查询的理解？

13. 谈谈对盒模型的理解？

14. 标准盒模型和怪异盒模型有什么区别？

15. 谈谈对bfc的理解？

16. 伪类和伪元素的区别？

17. 对flex的理解以及使用？

18. 关于css的动画与过渡问题？

js面试题

  • js基础

  1. 谈谈对原型、原型链的理解？

  2. 如何判断是否是数组？

  3. es6模块commonjs模块有什么区别？

  4. 如何在js中实现不可变对象？

  5. js中的参数是按照什么方式传递的？

  6. js有哪些类型？

  7. 为什么会有BigInt的提案？

  8. null和undefined的区别是什么？

  9. 0.1+0.2为什么不等于0.3？

  10. 类型转换的规则有哪些？

  11. 类型转换的原理是什么？

  • js机制

  1. 什么是变量提升？

  2. 谈谈对事件循环机制（eventloop）的理解？

  3. 谈一谈对this的了解？

  4. 箭头函数的this指向哪里？

  5. 理解闭包吗？

  • js内存

  1. js的垃圾回收机制是怎么做的？

  2. js的基本类型和复杂类型是存储到哪里的？

  • 异步

  1. 对promise的理解？

  2. generator函数？

  3. async/await的理解？

  4. async/await相比于promise的优势？

vue面试题

  1. 谈谈对MVVM的理解？

  2. vue的生命周期？

  3. 异步请求适合在哪个生命周期调用？

  4. vue组件如何通信？

  5. computed和watch有什么区别？

  6. vue是如何实现双向数据绑定的？

  7. Proxy和Object.defineProperty的优劣对比？

  8. 你是如何理解vue的响应式系统的？

  9. 既然vue通过数据劫持可以精准探测数据变化，为什么还需要虚拟dom进行diff检测差异？

  10. vue为什么没有类似react中shouldComponentUpdate的生命周期？

  11. vue中的key有什么用？

react面试题

  1. react最新的生命周期是怎样的？

  2. react的请求应该放在哪个生命周期中？

  3. setState到底是同步还是异步？

  4. react组件之间是怎么实现通信的？

  5. react有哪些性能优化的手段？

  6. react如何进行组件/逻辑复用？

  7. mixin、hoc、render props、react-hooks的优劣如何？

  8. 你是如何理解fiber的？

  9. 谈谈你对Time Slice的理解？

  10. redux的工作流程？

  11. redux与mobx的区别？

  12. redux中如何进行异步操作？

  13. redux异步中间件之间的优劣？

webpack

  1. webpack与grunt/gulp的不同？

  2. webpack/rollup/parcel优劣？

  3. 有哪些常见的loader？

  4. 有哪些常见的plugin?

  5. loader和plugin的不同？

  6. 分别介绍bundle,chunk,module是什么？

  7. webpack的构建流程是什么？

  8. 是否写过loader和plugin?描述一下编写loader和plugin的思路？

  9. webpack的热更新是如何做到的？说明其原理？

  10. 如何用webpack来优化前端性能？

  11. 如何提高webpack的打包速度？

  12. 怎么配置单页应用？怎么配置多页应用？

算法

1.如何分析时间复杂度？

当问题规模即要处理的数据增长时，基本操作要重复执行的次数也必定会增长，那我们关心的是这个执行次数以什么样的数量级增长。

我们用大O来表示一下常见的时间复杂度量级：

常数阶O(1) 线性阶O(n) 对数阶O(logn) 线性对数阶O(nlogn) 平方阶O(n2) 还有更复杂的指数阶和阶乘阶这种比较极端的复杂度量级，就不讨论了。

常数阶O(1)：
就是不管数据规模n如何增长，计算时间是不变的。
举个简单的例子：
const increment = n++;

线性阶O(n):
线性复杂度，随着数据规模n的增长，计算时间也会随着n线性增长。
最典型的例子就是线性查找：
const linearSearch = (arr, target) => { 
    for (let i = 0; i < arr.length; i++) { 
        if (arr[i] === target) {
            return i 
        } 
    } 
    return -1 
}

对数复杂度O(logn):
对数复杂度，随着问题规模n的增长，计算时间也会随着n对数级增长。
典型的例子是二分查找法。

function binarySearch(arr, target) { 
    let max = arr.length - 1 
    let min = 0 
    while (min <= max) { 
            let mid = Math.floor((max + min) / 2) 
            if (target < arr[mid]) { 
                    max = mid - 1 
            } else if (target > arr[mid]) { 
                    min = mid + 1 
            } else { 
                    return mid 
            } 
    }
    return -1 
}


平⽅级复杂度O（n2）：
平⽅级复杂度，典型情况是当存在双重循环的时候，即把 O(n) 的代码再嵌套循环⼀遍，它的时间复杂度就是 O(n²) 了，代表应⽤是冒泡排序算法。

2.排序算法以及对应的复杂度？

微信截图_20210517173037.png

3.排序代码具体怎么实现？

4.冒泡排序

let arr = [4, 3, 2, 1];
function mpSort(arr) {
        for(var i = 0; i < arr.length - 1; i++) {
                for(var j = 0; j < arr.length - i - 1; j++) {
                        if(arr[j] > arr[j+1]) {
                                let temp = arr[j + 1];
                                arr[j+1] = arr[j];
                                arr[j] = temp;
                        }
                }
        }
        console.log(arr);
}
mpSort(arr);

5.插入排序

let arr = [5, 4, 3, 2, 1];
function insertSort(arr) {
        for (var i = 1; i < arr.length; i++) {
                var key = arr[i];
                for(var j = i - 1; key < arr[j]; j--) {
                        arr[j + 1] = arr[j];
                }
                arr[j + 1] = key;
        }
        console.log(arr)
}
insertSort(arr);

6.快速排序

let arr = [5, 4, 3, 2, 1];
function quickSort(arr) {
    if(arr.length <= 1) return arr;
    let pivotIndex = Math.floor(arr.length/2);
    let pivot = arr.splice(pivotIndex, 1)[0];
    let left = [];
    let right = [];
    for(var i = 0; i < arr.length; i++) {
            if (arr[i] >= pivot) {
                    right.push(arr[i]);
            } else {
                    left.push(arr[i]);
            }
    }
    return quickSort(left).concat([pivot], quickSort(right));
}
let result = quickSort(arr);
console.log(result);

7.希尔排序

8.归并排序

安全面试题

  1. 有哪些可能引起前端安全的问题？

  2. xss分为哪几类？

  3. 如何预防xss?

  4. csrf是什么？

  5. csrf的攻击类型？

  6. 如何预防csrf?

  7. 网络劫持有哪几种？

  8. 如何应对网络劫持？

  9. https一定是安全的吗？

  10. 中间人攻击？

浏览器

  1. 常见的浏览器内核有哪些？

  2. 浏览器的主要组成部分是什么？

  3. 浏览器是如何渲染UI的？

  4. 浏览器是如何解析css选择器的？

  5. Dom Tree是如何构建的？

  6. 浏览器重绘与重排的区别？

  7. 如何触发重绘和重排？

  8. 如何避免重绘或者重排？

  9. 前端如何实现即时通讯？

  10. 什么是浏览器同源策略？

  11. 如何实现跨域？

avatar
文章
阅读
粉丝