前端面试押题整理

Posted 2020-12-28 nolaaaaa

html 押题
1 （必考） 你是如何理解 HTML 语义化的？
2 第一种举例，段落用 p，边栏用 aside，主要内容用 main 标签
3 第二种 最开始是 php 后端写 HTML，不会 CSS，于是就用 table 来布局。table 使用展示表格的。严重违反了 HTML 语义化。
4 后来有了专门的写 CSS 的前端，他们会使用 DIV + CSS 布局，主要是用 float 和绝对定位布局。稍微符合了 HTML 语义化。
5 再后来，前端专业化，知道 HTML 的各个标签的用法，于是会使用恰当的标签来展示内容，而不是傻傻的全用 div，会尽量使用 h1、ul、p、main、header 等标签
6 语义化的好处是已读、有利于SEO等。
7
第三种：对面试官说请看我的博客 https://zhuanlan.zhihu.com/p/32570423
8 meta viewport 是做什么用的，怎么写？
9 死背：
10 控制页面在移动端不要缩小显示。
11 侃侃而谈 一开始，所有页面都是给PC准备的，乔布斯推出 iPhone 3GS，页面是不适应手机屏幕的，所以乔布斯的工程师想了一个办法，默认把手机模拟成 980px，页面缩小。
12 后来，智能手机普及，这个功能在部分网站不需要了，所以我们就用 meta:vp 让手机不要缩小我的网页。
13
14 canvas 元素是干什么的？
15 项目丢给他。
16 看 MDN 的 canvas 入门手册 。
CSS 押题
1 （必考） 说说盒模型。
* 举例：
* content-box: width == 内容区宽度
* border-box: width == 内容区宽度 + padding 宽度 + border 宽度
2 css reset 和 normalize.css 有什么区别？
* 考英文：
* reset 重置，之前的样式我不要，a{color: red;}，抛弃默认样式
* normalize 让所有浏览器的标签都跟标准规定的默认样式一致，各浏览器上的标签默认样式基本统一。
3 （必考）如何居中？
* 平时总结：
* 水平居中：
* 内联：爸爸身上写 text-align:center;
* 块级：margin-left: auto; margin-right: auto;
* 垂直居中： https://jscode.me/t/topic/1936
4 选择器优先级如何确定？
* 选择器越具体，优先级越高。 #xxx 大于 .yyy
* 同样优先级，写在后面的覆盖前面的。
* color: red !important; 优先级最高。
5 BFC 是什么？
* 举例：
* overflow:hidden 清除浮动。（方方总是用 .clearfix 清除浮动，坚决不用 overflow:hidden 清除浮动）
* overflow:hidden 取消父子 margin 合并。 http://jsbin.com/conulod/1/edit?html,css,js,output （方方用 padding-top: 1px;）
6 如何清除浮动？
* overflow: hidden （方方反对）
* .clearfix 清除浮动写在爸爸身上 .clearfix::after{
* content: ‘’; display: block; clear:both;
* }
* .clearfix{
* zoom: 1; /* IE 兼容 /
}
*
JS 押题
1 JS 有哪些数据类型？
2 string number bool undefined null object symbol
3 object 包括了数组、函数、正则、日期等对象
4 一旦出现（数组、函数、正则、日期、NaN）直接0分
5 （必考） Promise 怎么使用？
* then $.ajax(…).then(成功函数, 失败函数)
*
* 链式 then $.ajax(…).then(成功函数, 失败函数).then(成功函数2, 失败函数2)
*
* 如何自己生成 Promise 对象 function xxx(){
* return new Promise(function(resolve, reject){
* setTimeout(()=>{
* resolve() 或者 reject()
* },3000)
* })
* }
* xxx().then(…)
*
6 （必考） AJAX 手写一下？ let xhr = new XMLHttpRequest()
7 xhr.open(‘POST’, ‘/xxxx’)
8 xhr.onreadystatechange = function(){
9 if(xhr.readyState === 4 && xhr.status === 200){
10 console.log(xhr.responseText)
11 }
12 }
13 xhr.send(‘a=1&b=2‘)
14
15 （必考）闭包是什么？
function (){
16 var n = 0
17 return function(){
18 n += 1
19 }
20 }
21
22 let adder = ()
23 adder() // n === 1
24 adder() // n === 2
25 console.log(n) // n is not defined
26
正确参考： https://zhuanlan.zhihu.com/p/22486908
27 （必考）这段代码里的 this 是什么？
* fn() 里面的 this 就是 window
* fn() 是 strict mode，this 就是 undefined
* a.b.c.fn() 里面的 this 就是 a.b.c
* new F() 里面的 this 就是新生成的实例
* () => console.log(this) 里面 this 跟外面的 this 的值一模一样
* 正确参考： https://zhuanlan.zhihu.com/p/23804247
28 （必考）什么是立即执行函数？使用立即执行函数的目的是什么？
;(function (){
29 var name
30 }())
31 ;(function (){
32 var name
33 })()
34 !!!!!!!function (){
35 var name
36 }()
37 ~function (){
38 var name
39 }()
40
造出一个函数作用域，防止污染全局变量
ES 6 新语法
{
41 let name
42 }
43
44 async/await 语法了解吗？目的是什么？
function returnPromise(){
45 return new Promise( function(resolve, reject){
46 setTimeout(()=>{
47 resolve(‘fuck‘)
48 },3000)
49 })
50 }
51
52 returnPromise().then((result)=>{
53 result === ‘fuck‘
54 })
55
56 var result = await returnPromise()
57 result === ‘fuck‘
58
59
把异步代码写成同步代码。
60 如何实现深拷贝？
* JSON 来深拷贝 var a = {...}
* var b = JSON.parse( JSON.stringify(a) )
*
缺点：JSON 不支持函数、引用、undefined、RegExp、Date……
* 递归拷贝 function clone(object){
* var object2
* if(! (object instanceof Object) ){
* return object
* }else if(object instanceof Array){
* object2 = []
* }else if(object instanceof Function){
* object2 = eval(object.toString())
* }else if(object instanceof Object){
* object2 = {}
* }
* 你也可以把 Array Function Object 都当做 Object 来看待，参考 https://juejin.im/post/587dab348d6d810058d87a0a
* for(let key in object){
* object2[key] = clone(object[key])
* }
* return object2
* }
*
* 环
* RegExp、Date、Set、Symbol、WeakMap
61 如何实现数组去重？
* 计数排序的逻辑（只能正整数） var a = [4,2,5,6,3,4,5]
* var hashTab = {}
* for(let i=0; i<a.length;i++){
* if(a[i] in hashTab){
* // 什么也不做
* }else{
* hashTab[ a[i] ] = true
* }
* }
* //hashTab: {4: true, 2: true, 5: true, 6:true, 3: true}
* console.log(Object.keys(hashTab)) // [‘4‘,‘2‘,‘5‘,‘6‘,‘3‘]
*
* Set 去重 Array.from(new Set(a))
*
* WeakMap 任意类型去重
62 如何用正则实现 string.trim() ？ function trim(string){
63 return string.replace(/^s+|s+$/g, ‘‘)
64 }
65
66 JS 原型是什么？
* 举例
* var a = [1,2,3]
* 只有0、1、2、length 4 个key
* 为什么可以 a.push(4) ，push 是哪来的？
* a.proto === Array.prototype
* push 就是沿着 a.proto 找到的，也就是 Array.prototype.push
* Array.prototype 还有很多方法，如 join、pop、slice、splice
* Array.prototype 就是 a 的原型（proto）
* 参考： https://zhuanlan.zhihu.com/p/23090041
67 ES 6 中的 class 了解吗？
* 把 MDN class 章节看完
* 记住一个例子
68 JS 如何实现继承？
* 原型链
function Animal(){
* this.body = ‘肉体‘
* }
* Animal.prototype.move = function(){
*
* }
*
* function Human(name){
* Animal.apply(this, arguments)
* this.name = name
* }
* // Human.prototype.__proto__ = Animal.prototype // 非法
*
* var f = function(){}
* f.prototype = Animal.prototype
* Human.prototype = new f()
*
* Human.prototype.useTools = function(){}
*
* var frank = new Human()
*
*
* extends 关键字 class Animal{
* constructor(){
* this.body = ‘肉体‘
* },
* move(){}
* }
* class Human extends Animal{
* constructor(name){
* super()
* this.name = name
* },
* useTools(){}
* }
* var frank = new Human()
*
69 == 相关题目直接反着答（放弃）
DOM 押题
1 DOM 事件模型是什么？
* 冒泡
* 捕获
* 如果这个元素是被点击的元素，那么捕获不一定在冒泡之前，顺序是由监听顺序决定的 。
2 移动端的触摸事件了解吗？
* touchstart touchmove touchend touchcancel
* 模拟 swipe 事件：记录两次 touchmove 的位置差，如果后一次在前一次的右边，说明向右滑了。
3 事件委托是什么？有什么好处？
* 假设父元素有4个儿子，我不监听4个儿子，而是监听父元素，看触发事件的元素是哪个儿子，这就是事件委托。
* 可以监听还没有出生的儿子（动态生成的元素）。省监听器。
function listen(element, eventType, selector, fn){
* element.addEventListener(eventType, e=>{
* if(e.target.matches(selector)){
* fn.call(el, e, el)
* }
* })
* }// 有 bug 但是可以应付面试官的事件委托
*
function listen(element, eventType, selector, fn) {
* element.addEventListener(eventType, e => {
* let el = e.target
* while (!el.matches(selector)) {
* if (element === el) {
* el = null
* break
* }
* el = el.parentNode
* }
* el && fn.call(el, e, el)
* })
* return element
* } // 工资 12k+ 的前端写的事件委托
* listen(ul, ‘click‘, ‘li‘, ()=>{})
*
* ul>li5>span

HTTP 押题
1 HTTP 状态码知道哪些？
2 301 和 302 的区别是什么？
* 301 永久重定向，浏览器会记住
* 302 临时重定向
3 HTTP 缓存怎么做？
* Cache-Control: max-age=300
* http://cdn.com/1.js?v=1 避开缓存
4 Cache-Control 和 Etag 的区别是什么？
5 Cookie 是什么？Session 是什么？
* Cookie
* HTTP响应通过 Set-Cookie 设置 Cookie
* 浏览器访问指定域名是必须带上 Cookie 作为 Request Header
* Cookie 一般用来记录用户信息
* Session
* Session 是服务器端的内存（数据）
* Session 一般通过在 Cookie 里记录 SessionID 实现
* SessionID 一般是随机数
6 LocalStorage 和 Cookie 的区别是什么？
* Cookie 会随请求被发到服务器上，而 LocalStorage 不会
* Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右
7 （必考）GET 和 POST 的区别是什么？
* 参数。GET 的参数放在 url 的查询参数里，POST 的参数（数据）放在请求消息体里。
* 安全（扯淡）。GET 没有 POST 安全（都不安全）
* GET 的参数（url查询参数）有长度限制，一般是 1024 个字符。POST 的参数（数据）没有长度限制（扯淡，4~10Mb 限制）
* 包。GET 请求只需要发一个包，POST 请求需要发两个以上包（因为 POST 有消息体）（扯淡，GET 也可以用消息体）
* GET 用来读数据，POST 用来写数据，POST 不幂等（幂等的意思就是不管发多少次请求，结果都一样。）
8 （必考）怎么跨域？JSONP 是什么？CORS 是什么？postMessage 是什么？
* JSONP
* CORS
* postMessage 看一下 MDN
Vue 押题
1 （必考）Vue 有哪些生命周期钩子函数？
* 看文档： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
2 （必考）Vue 如何实现组件通信？
* 父子通信（使用 Prop 传递数据、使用 v-on 绑定自定义事件）
* 爷孙通信（通过两对父子通信，爷爸之间父子通信，爸儿之间父子通信）
* 兄弟通信（new Vue() 作为 eventBus）
3 Vuex 的作用是什么？
* 看文档、博客 https://vuex.vuejs.org/zh-cn/intro.html
4 VueRouter 路由是什么？
* 看文档、博客
5 Vue 的双向绑定是如何实现的？有什么缺点？
* 看文档， 深入响应式原理
6 Computed 计算属性的用法？跟 Methods 的区别。
7 https://zhuanlan.zhihu.com/p/33778594
算法押题
1 排序算法（背诵冒泡排序、选择排序、计数排序、快速排序、插入排序、归并排序）
2 二分查找法
3 翻转二叉树
把上面三个背一下，算法题必过。
安全押题
1 什么是 XSS 攻击？如何预防？
* 举例 div.innerHTML = userComment // userComment 内容是
* // 恶意就被执行了，这就是 XSS
*
* 预防
* 不要使用 innerHTML，改成 innerText，script 就会被当成文本，不执行
* 如果你一样要用 innerHTML，字符过滤
* 把 < 替换成 <
* 把 > 替换成 >
* 把 & 替换成 &
* 把 ‘ 替换成 ‘
* 把 ‘ 替换成 "
* 代码 div.innerHTML = userComment.replace(/>/g, ‘<’).replace…
* 使用 CSP Content Security Policy
2 什么是 CSRF 攻击？如何预防？
* 过程
* 用户在 qq.com 登录
* 用户切换到 hacker.com（恶意网站）
* hacker.com 发送一个 qq.com/add_friend 请求，让当前用户添加 hacker 为好友。
* 用户在不知不觉中添加 hacker 为好友。
* 用户没有想发这个请求，但是 hacker 伪造了用户发请求的假象。
* 避免
* 检查 referer，qq.com 可以拒绝来自 hacker.com 的请求
* csrf_token 来解决
Webpack 题
1 转译出的文件过大怎么办？
* 使用 code split
* 写法 import(‘xxx’).then(xxx=>{console.log(xxx)})
* xxx 模块就是按需加载的
2 转译速度慢什么办？
3 写过 webpack loader 吗？
* http://www.alloyteam.com/2016/01/webpack-loader-1/
发散题
1 从输入 URL 到页面展现中间发生了什么？
* DNS 查询 DNS 缓存
* 建立 TCP 连接（三次握手）连接复用
* 发送 HTTP 请求（请求的四部分）
* 后台处理请求
* 监听 80 端口
* 路由
* 渲染 HTML 模板
* 生成响应
* 发送 HTTP 响应
* 关闭 TCP 连接（四次挥手）
* 解析 HTML
* 下载 CSS（缓存
* 解析 CSS
* 下载 JS（缓存
* 解析 JS
* 下载图片
* 解析图片
* 渲染 DOM 树
* 渲染样式树
* 执行 JS
2 你没有工作经历吗？
* 一开始就问，可以拜拜。
* 中间问最后问，他想压价。
* 解法：用项目打动它：你看下我的作品，跟一年经验的前端差距大吗？你们团队一年工作经验的前端，写的出来我这样的作品吗？凭我的作品，我觉得我可以胜任贵司的工作。
3 你遇到过最难的问题是什么？
https://www.zhihu.com/question/35323603/answer/338796153
4 你的期望薪资是多少？
5 你想要的工资 加 1000~2000。
6 （任何你不会的问题）
* 承认不会
* 询问详细细节：你问的是不是XXX方面的知识？请问你想问的是哪方面知识？
* 根据面试官的回答，向有利于自己的方向引导话题。
刁钻代码题
1 map加parseInt
[1,2,3].map(parseInt)
2
3 parseInt(1,0, array) // 1
4 parseInt(2,1, array) // NaN
5 parseInt(3,2, array) // NaN
6
7 a.x = a = {} var a = {n:1};
8 var b = a;
9 a.x = a = {n:2};
10
问 a.x 是多少？
11 (a ==1 && a== 2 && a==3) 可能为 true 吗？a = {
12 value: 0,
13 toString(){
14 a.value += 1
15 return a.value
16 }
17 }