HTML
-
必考:你是如何理解 HTML 语义化的?
- 举例法
HTML 语义化就是使用正确的标签(总结)段落就写 p 标签,标题就写 h1 标签,文章就写article标签,视频就写video标签,等等。 - 阐述法
首先讲以前的后台开发人员使用table布局,然后讲美工人员使用div+css布局,最后讲专业的前端会使用正确的标签进行页面开发。
- 举例法
meta viewport 是做什么用的,怎么写?
举例法
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
这个标签内的内容表示啥意思呢? name为viewport表示供移动设备使用. content定义了viewport的属性.
- width表示移动设设备下显示的宽度为设备宽度(device-width)
- height表示移动设设备下显示的宽度为设备高度.
- user-scalable表示用户缩放能力, no表示不允许.
- initial-scale表示设备与视口的缩放比率
- maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.
- 上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.
然后逐个解释每个单词的意思。
你用过哪些 HTML 5 标签?
举例法
平时如果只用div写页面你就完了,把你平时用到的html5标签列举出来即可,但是要注意如果这个标签的用法比较复杂,你要先看一下MDN的文档再说这个标签;如果你说出一个标签,却不知道它有哪些API,那么你就会被扣分H5 是什么?
阐述法
搜一下知乎就知道了,H5表示移动端页面,反正不是HTML5。
CSS
必考:两种盒模型分别说一下。
举例:
content-box:width == 内容区宽度
border-box:width == 内容区宽度 + padding 宽度(不管 IE *{boxsizing:borderbox;})
然后说你平时喜欢用border box,因为更好用。必考:如何垂直居中?
背代码 https://jscode.me/t/topic/1936必考:flex 怎么用,常用属性有哪些?
看 MDN,背代码。必考:BFC 是什么?
[块级格式化上下文]它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
- 背 BFC 触发条件,MDN 写了。
- 浮动元素(元素的 float 不是 none)
- 绝对定位元素(元素的 position 为 absolute 或 fixed)
- 行内块元素
- overflow 值不为 visible 的块元素
- 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
-
CSS 选择器优先级
- 背人云亦云的答案(错答案、已过时):https://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html
- 看面试官脸色行事
- 方方给的三句话
- 越具体优先级越高
- 同样优先级写在后面的覆盖写在前面的
- !important 优先级最高,但是要少用
-
清除浮动说一下
背代码.clearfix:after{ content: ''; display: block; /*或者 table*/ clear: both; } .clearfix{ zoom: 1; /* IE 兼容*/ }
原生 JS
必考:ES 6 语法知道哪些,分别怎么用?
举例法
let const 箭头函数 Promise 展开操作符 默认参数 import export,见方方整理的列必考 Promise、Promise.all、Promise.race 分别怎么用?
promise是用来解决两个问题的:
回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象promise可以支持多个并发的请求,获取并发请求中的数据这个promise可以解决异步的问题,本身不能说promise是异步的
- 背代码 Promise 用法
function fn(){
return new Promise((resolve, reject)=>{
成功时调用 resolve(数据)
失败时调用 reject(错误)
})
}
fn().then(success, fail).then(success2, fail2)
- 背代码 Promise.all 用法
Promise.all([promise1, promise2]).then(success1, fail1)
promise1和promise2都成功才会调用success1
- 背代码 Promise.race 用法
Promise.race([promise1, promise2]).then(success1, fail1)
promise1和promise2只要有一个成功就会调用success1
- 必考:手写函数防抖和函数节流
防抖:
- 如果下达该命令后,在t毫秒内再次下达该命令,则取消刚刚下达的命令,只执行新命令
- 最终效果: 对于连续动作(动作间的时间间隔小于t),以最后一次为准
function debounce(fn, wait) {
let timer = null
return function() {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, wait)
}
}
let fn = () => console.log('这里只执行很少次')
fn = debounce(fn, 1000)
document.body.onscroll = fn
节流:
- 从上一次命令结束开始的一定时间范围t内,如果多次连续下达命令,则只执行当前时间段t内第一次命令。
- 最终效果:对于连续动作,会过滤出部分动作,让这些过滤后的动作之间的执行间隔大于等于t
// 节流(一段时间执行一次之后,就不执行第二次)
function throttle(fn, delay){
let canUse = true
return function(){
if(canUse){
fn.apply(this, arguments)
canUse = false
setTimeout(()=>canUse = true, delay)
}
}
}
const throttled = throttle(()=>console.log('hi'), 1000)
throttled()
- 必考:手写AJAX
- 背代码,完整版
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://api.jirengu.com/weather.php', true)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4) {
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//成功了
console.log(xhr.responseText)
} else {
console.log('服务器异常')
}
}
}
xhr.onerror = function(){
console.log('服务器异常')
}
xhr.send()
- 背代码,简化版
var request = new XMLHttpRequest()
request.open('GET', '/a/b/c?name=ff', true)
request.onload = ()=> console.log(request.responseText)
request.send()
- 必考:这段代码里的 this 是什么?
- 背代码
- fn()
this => window/global - obj.fn()
this => obj - fn.call(xx)
this => xx - fn.apply(xx)
this => xx - fn.bind(xx)
this => xx - new Fn()
this => 新的对象 - fn = ()=> {}
this => 外面的 this
- fn()
- 看调用
《this 的值到底是什么?一次说清楚》
- 背代码
- 必考:闭包/立即执行函数是什么?
- 闭包 https://zhuanlan.zhihu.com/p/22486908
「函数」和「函数内部能访问到的变量」(也叫环境)的总和,就是一个闭包。就这么简单。 - 立即执行函数 https://zhuanlan.zhihu.com/p/22465092
- 声明一个匿名函数
- 马上调用这个匿名函数
- 闭包 https://zhuanlan.zhihu.com/p/22486908
造出一个函数作用域,防止污染全局变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念
- 必考:什么是 JSONP,什么是 CORS,什么是跨域?
饥人谷系统班全都有讲,没有报名的同学自己搜文章看
同源策略(Same origin Policy)
浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。
本域指的是?
- 同协议:如都是http或者https
- 同域名:如都是http://jirengu.com/a 和http://jirengu.com/b
- 同端口:如都是80端口
JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数,函数名通过接口传参的方式传给后台,后台解析到函数名后在原始数据上「包裹」这个函数名,发送给前端。换句话说,JSONP 需要对应接口的后端的配合才能实现。
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。 实现方式很简单,当你使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别,代码完全一样。
-
常考:async/await 怎么用,如何捕获异常?
-
常考:如何实现深拷贝?
含义:假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。
背代码,要点:- 递归
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 = {}
}
for(let key in object){
object2[key] = clone(object[key])
}
return object2
}
2. 判断类型
3. 检查环(也叫循环引用)
4. 需要忽略原型
-
常考:如何用正则实现 trim()?
背代码String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g, '') } //或者 function trim(string){ return string.replace(/^\s+|\s+$/g, '') }
-
常考:不用 class 如何实现继承?用 class 又如何实现?
-
背代码,不用 class 这样实现
function Animal(color){ this.color = color } Animal.prototype.move = function(){} // 动物可以动 function Dog(color, name){ Animal.call(this, color) // 或者 Animal.apply(this, arguments) this.name = name } // 下面三行实现 Dog.prototype.__proto__ = Animal.prototype function temp(){} temp.prototye = Animal.prototype Dog.prototype = new temp() Dog.prototype.constuctor = Dog // 这行看不懂就算了,面试官也不问 Dog.prototype.say = function(){ console.log('汪')} var dog = new Dog('黄色','阿黄')
-
背代码,用 class 就简单了
class Animal{ constructor(color){ this.color = color } move(){} } class Dog extends Animal{ constructor(color, name){ super(color) this.name = name } say(){} }
-
-
常考:如何实现数组去重?
- 计数排序变形,背代码
var a = [4,2,5,6,3,4,5] unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { //第一个等同于第二个,splice方法删除第二个 arr.splice(j, 1); j--; } } } return arr; }
- 使用 Set(面试已经禁止这种了,因为太简单)
Array.from(new Set(a))
- 使用 WeakMap(任意类型去重)
放弃:== 相关题目(反着答)
不要背,记不住,太复杂且没有规律送命题:手写一个 Promise
提前写一遍,放在博客里,参考 https://juejin.im/post/5aafe3edf265da238f125c0a
DOM
- 必考:事件委托
-
错误版(但是可能能过)
ul.addEventListener('click', function(e){ if(e.target.tagName.toLowerCase() === 'li'){ fn() // 执行某个函数 } })
bug 在于,如果用户点击的是 li 里面的 span,就没法触发 fn,这显然不对。
-
高级版
function delegate(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 }
思路是点击 span 后,递归遍历 span 的祖先元素看其中有没有 ul 里面的 li。
-
- 曾考:用 mouse 事件写一个可拖曳的 div
参考代码:https://jsbin.com/munuzureya/edit?html,js,output
框架 Vue
-
必考:watch 和 computed 和 methods 区别是什么?
- 思路:先翻译单词,再阐述作用,最后强行找不同。
- 要点:
- computed 和 methods 相比,最大区别是 computed 有缓存:如果 computed 属性依赖的属性没有变化,那么 computed 属性就不会重新计算。methods 则是看到一次计算一次。
- watch 和 computed 相比,computed 是计算出一个属性(废话),而 watch 则可能是做别的事情(如上报数据)
-
必考:Vue 有哪些生命周期钩子函数?分别有什么用?
- 钩子在文档全都有,看红色的字。
- 把名字翻译一遍就是满分
- 要特别说明哪个钩子里请求数据,答案是 mounted
-
必考:Vue 如何实现组件间通信?
- 父子组件:使用 v-on 通过事件通信
- 爷孙组件:使用两次 v-on 通过爷爷爸爸通信,爸爸儿子通信实现爷孙通信
- 任意组件:使用 eventBus = new Vue() 来通信,eventBus.emit 是主要API
http://js.jirengu.com/nujic/1/edit?html,js,output - 任意组件:使用 Vuex 通信
-
必考:Vue 数据响应式怎么做到的?
- 答案在文档《深入响应式原理》
- 要点
- 使用 Object.defineProperty 把这些属性全部转为 getter/setter
- Vue 不能检测到对象属性的添加或删除,解决方法是手动调用 Vue.set 或者 this.$set
必考:Vue.set 是做什么用的?
如果在实例创建之后添加新的属性到实例上,它不会触发视图更新,但是使用vue.set或者this.$set的方式可以使得新添加的属性也是响应式的,并触发视图更新。仅此而已。
-
Vuex 你怎么用的?
- 背下文档第一句:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
- 说出核心概念的名字和作用:State/Getter/Mutation/Action/Module
-
VueRouter 你怎么用的?
- 背下文档第一句:Vue Router 是 Vue.js 官方的路由管理器。
- 说出核心概念的名字和作用:History 模式/导航守卫/路由懒加载
- 说出常用 API:router-link/router-view/this.router.replace/this.$route.params
this.$router.push('/user-admin') this.$route.params
路由守卫是什么?
导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
简单的说,导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,这就是导航守卫。
HTTP
- 必考:HTTP 状态码知道哪些?分别什么意思?
200 OK 正常返回信息
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Moved Permanently 请求的网页已临时移动到新位置。
- 302重定向只是暂时的重定向,搜索引擎会抓取新的内容而保留旧的地址,因为服务器返回302,所以,搜索搜索引擎认为新的网址是暂时的。
- 而301重定向是永久的重定向,搜索引擎在抓取新的内容的同时也将旧的网址替换为了重定向之后的网址。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。- 2xx 表示成功
- 3xx 表示需要进一步操作
- 4xx 表示浏览器方面出错
- 5xx 表示服务器方面出错
- 完整参考 http://www.runoob.com/http/http-status-codes.html
- 大公司必考:HTTP 缓存有哪几种?
- 需要详细的了解 ETag、CacheControl、Expires 的异同
- 参考 https://imweb.io/topic/5795dcb6fb312541492eda8c
- 答题要点:
- ETag 是通过对比浏览器和服务器资源的特征值(如MD5)来决定是否要发送文件内容,如果一样就只发送 304(not modified)
- Expires 是设置过期时间(绝对时间),但是如果用户的本地时间错乱了,可能会有问题
- CacheControl: max-age=3600 是设置过期时长(相对时间),跟本地时间无关。
- 必考:GET 和 POST 的区别
- 错解,但是能过面试
- GET在浏览器回退时是无害的,而POST会再次提交请求。
- GET产生的URL地址可以被加入收藏栏,而POST不可以。
- GET请求会被浏览器主动cache,而POST不会,除非手动设置。
- GET请求只能进行url编码,而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
- GET请求在URL中传送的参数是有长度限制的,而POST么有。
- 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
- GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
- GET参数通过URL传递,POST放在Request body中。
- 正解
就一个区别:语义——GET 用于获取资源,POST 用于提交资源。 - 想装逼请参考 https://zhuanlan.zhihu.com/p/22536382
- 错解,但是能过面试
- Cookie V.S. LocalStorage V.S. SessionStorage V.S. Session
- Cookie V.S. LocalStorage
- 主要区别是 Cookie 会被发送到服务器,而 LocalStorage 不会
- Cookie 一般最大 4k,LocalStorage 可以用 5Mb 甚至 10Mb(各浏览器不同)
- LocalStorage V.S. SessionStorage
- LocalStorage 一般不会自动过期(除非用户手动清除),而 SessionStorage 在回话结束时过期(如关闭浏览器)
- Cookie V.S. Session
- Cookie 存在浏览器的文件里,Session 存在服务器的文件里
- Session 是基于 Cookie 实现的,具体做法就是把 SessionID 存在 Cookie 里
- Cookie V.S. LocalStorage
Webpack
-
必考
:有哪些常见 loader 和 plugin,你用过哪些?
loader:
- file-loader:把文件输出到一个文件夹中,在代码中通过相对URL引用输入的文件。
- url-loader:和file类似,但能在文件很小的情况下以base64方式把文件内容注入到代码中。
- image-loader:加载并压缩图片文件。
- babel-loader:把ES6转换为ES5。
- css-loader:加载CSS,支持模块化、压缩、文件导入等特性。
- style-loader:把CSS代码注入到JavaScript中,通过DOM操作去加载CSS。
- eslint-loader:通过ESlint检查JavaScript代码。
plugin:
- define-plugin:定义环境变量。
- commons-chunk-plugin:提取公共代码。
- uglifyjs-webpack-plugin:缩小(压缩优化)js文件
英语题:loader 和 plugin 的区别是什么?
Loader直译为"加载器"。Webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件也打包的话,就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
Plugin直译为"插件"。Plugin可以扩展webpack的功能,让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。必考:如何按需加载代码?
通过import()语句来控制加载时机,webpack内置了对于import()的解析,会将import()中引入的模块作为一个新的入口在生成一个chunk。 当代码执行到import()语句时,会去加载Chunk对应生成的文件。
- 必考:如何提高构建速度?
- 多入口情况下,使用CommonsChunkPlugin来提取公共代码
- 通过externals配置来提取常用库
- 利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译,再通过DllReferencePlugin将预编译的模块加载进来。
- 使用Happypack 实现多线程加速编译
- 使用webpack-uglify-paralle来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
- 使用Tree-shaking和Scope Hoisting来剔除多余代码
- 转义出的文件过大怎么办?
XSS 是什么?
跨站脚本攻击(Cross Site Scripting),为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意的Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的
什么是 CSRF?如何预防?
CSRF:Cross Site Request Forgery(跨站点请求伪造)。
CSRF 攻击者在用户已经登录目标网站之后,诱使用户访问一个攻击页面,利用目标网站对用户的信任,以用户身份在攻击页面对目标网站发起伪造用户操作的请求,达到攻击目的。
CSRF 攻击实例
避免方法:
CSRF 漏洞进行检测的工具,如 CSRFTester、CSRF Request Builder...
验证 HTTP Referer 字段
添加并验证 token
添加自定义 http 请求头
敏感操作添加验证码
使用 post 请求