HTML、CSS
[1]说几个关于HTML5和CSS3的新特性
关于HTML5，语义化，离线更新ServiceWorker，PostMessages、WebSocket、WebRTC
关于CSS3，Flex弹性盒布局、媒体查询、动效（Transform、Transtion、Animation）、预编译
[2]水平/垂直居中、页面布局的几种解决方案及优缺点
水平/垂直居中
已知宽:margin:0 auto;(position:absolute;top:50%;left:50%;transform: translate(50%,50%))
未知宽(flexbox):justify-content: center;align-items: center;
页面布局
浮动，需要清除浮动
绝对定位，脱离文档流影响页面结构
flex，实用性强
表格，(display:table/table-cell)
网格，(display:grid;grid-template-rows:100px;grid-template-columns:auto)
[3]谈一谈CSS盒模型
box-sizing:content-box/border-box;
标准模型，content-box，content
IE模型，border-box，content+padding+border
[4]对创建块级格式化上下文的理解
BFC元素垂直方向边距重叠
BFC区域不与浮动元素重叠（可用作清除浮动）
独立容器，里外元素互不影响
浮动元素参与高度计算
创建BFC(有float;postion值非static||reletive;display:table;overflow非hidden)
[5]CSS选择器权重计算
内联—id—class/伪类/属性—元素/伪元素
1000—-100—-10—-1
JS
[1]JS有哪些变量类型和内置对象
变量类型:String、Number、Boolean、null、undefined、Symbol
内置对象:Object、Array、Date、RegExp、Function、Boolean、Number、String
typeof可以用来判断变量的基本类型
instanceof可以用来判断实例的构造函数
[2]对作用域链的理解
执行上下文定义了变量、函数的运行环境隶属于那个对象，例如所有的全局变量、全局函数都是在window对象内
作用域链即是自由变量的向上查找，检查当前作用域是否存在这个自由变量，如果没有就向上查找
[3]谈一谈闭包、如何创建一个闭包
闭包就是指有权访问另一个函数作用域中的变量的函数
创建一个闭包可讲函数作为函数的返回值或参数传递
坏处就是会造成内存泄漏，不会被垃圾回收
（PS：这里看情况可以展开讲垃圾回收的机制）
分标记清除和引用计数，V8新增一个ScavengeGC算法，维护两个空间（一个闲置、一个使用，清理非存活，复制呼互换）
[4]对原型链的理解
实例对象属性的向上查找，检查当前对象是否有该属性，如果没有就向它的构造函数原型上找
可用instanceof判断其构造函数
最顶层应是null，这也解释了为什么typeof null为Object
[5]JS中如何实现继承
原型链可以作为链接对象之间的桥梁，那么做继承就是利用这个桥梁
为构造函数的原型上增加属性，那么其所有的实例都将拥有这个属性
那么说回es6中的extends本质上也应该是用原型链实现的
[6]new操作符具体做了什么
创建一个新对象
this指向这个对象
执行代码即对this赋值
返回this
[7]JS中this怎么用
指向最后调用的那个对象
在箭头函数中默认指向其第一个父级对象
可用call、apply、bind改变this指向
其中call可以接受一个参数列表、apply只接受一个参数数组、bind返回的是一个函数
[8]说一说ajax的过程
1
2
3
4
5
6
7
8
| let xml = new XMLHttpRequest()
xml.open('GET','xxx;',true)
xml.send()
xml.onreadystatechange()=>{
if(xml.readyState===4&&xml.status===200){
}
}
|
Http状态码
[9]什么是跨域如何解决及每个方案的优缺点
浏览器有同源策略限制，不允许ajax访问其他域接口
协议、域名、端口都要一致
跨域
[10]谈谈你对ES6的理解
新增块级作用域，使变量更加可控
新增Object.assign()、拓展运算符，可用做浅拷贝
新增Promise对象，使用异步解决callhell
新增Set(可用作数组去重)、Map(只能用stinrg做key)数据结构
解构赋值、模版字符串使操作对象、字符串更加便利
Proxy、Reflect为对象架设一层‘拦截’、监听修改
Interator遍历器(调用指针next方法)
Generator异步(内部为一个指针对象即Interator遍历器)
async/await同步写法异步执行
模块化
[11]用过哪些设计模式
单例
工厂
代理
观察者
略，暂时不展开
[12]TS跟JS有什么区别
TS为JS超集、可以认为是JS未来发展的趋势、遵循的新一代ECMA规范
增加静态类型检查、更加严谨
[13]如何实现深浅拷贝
浅拷贝:Object.assign()、展开运算符
深拷贝:JSON.parse(JSON.stringify()),lodash(_.cloneDeep())
[14]谈谈对JS运行机制和eventLoop的理解
JS自始至终是一个单线程，同一时间只能做一件事
eventLoop即事件轮询、宏任务/微任务
执行栈中优先执行宏任务、在空闲时执行微任务(requestIdleCallback、react16中fiber架构也用的这个api)
[15]谈一谈对JS异步的理解
代码不易读、但避免了回调地狱
几种解决方案:
jQuery Deferred
Promise
async/await
Generator
浏览器
[1]描述下从浏览器地址输入url到显示页面的整个过程
DNS解析，将域名转ip并向上查找服务器，中间可以做DNS多级缓存（负载均衡）
通过ip向服务器发起TCP连接，三次握手
发送HTTP请求，请求报文（请求行、请求头、空行、请求体）
服务器处理请求并返回HTTP报文，响应报文（响应行、响应头、空行、响应体）
（PS:http缓存，从响应头/请求头中可以得出last-Modify/if-Modify-since、ETag/if-None-Match、Cache-Control/Expires）
浏览器解析渲染页面，这里进行render树的构建，dom树->css树->layout/reflow(计算)->Painting
连接结束，四次挥手
[2]谈cookie、localStorage、sessionStorage区别
cookie会在http请求中携带，会在服务器和客户端间传递，所以cookie会有大小限制，不能超过4k，而且存在在设定的path下
sessionStorage和localStorage只会存在本地，大小要比cookie大，其中sessionStorage是仅在当前的会话窗口有效，不是所有窗口都可以共享数据的。其它两个是真个浏览器都可以数据共享
[3]对性能优化知道哪些
网络层，减少请求（合并js/css、雪碧图、base64图片）、压缩体积（js/css压缩、gzip）、做缓存（DNS缓存、CDN预解析、http缓存）
渲染层，结构尽量扁平化、DOM优化（事件代理）、避免重排重绘
[4]对安全性的理解
XSS防止脚本注入，加入一些转译
CSRF防止请求伪造，加入hash/token验证等
密码加盐
[5]关于HTTP协议类
状态码
http缓存
管线化
持久连接
[6]谈一谈对事件机制的理解
捕获冒泡，window<->document<->html<->body<->elem
event.preventDefault()阻止默认事件
event.stopPropagation()阻止冒泡（防止父级元素响应）
event.stopImmediatePropagation()注册两个事件，a,b;在a中加该事件，可阻止b的注册事件触发
event.currentTarget事件委托，环形事件注册，将子元素代理到父元素的事件上，当触发时需要获取当前绑定的事件的对象（父级元素）
event.target//IE 中event.sourceElement
获取当前触发的目标对象(子级元素）
DOM0(onclick)、DOM2(addEventLisener(‘click’),true捕获/false冒泡)、DOM3(addEventLisener(‘keyup’))
自定义事件
1
2
3
| let eve = new Event('custom')/CustomEvent('custom',params)
$('div').addEventLisener('custom',()=>{})
$('div').dispatchEvent(eve)
|
[7]如何管理路由
hash模式
history模式
略
框架
[1]谈一谈对MVVM的理解
MVC与MVVM
设计模式为观察者模式
这里的ViewModle就是data->Observer、Dep、Watcher->view
（这里以Vue举例子）讲三要素
响应式原理，Object.defineProperty和Proxy/Reflect
模版引擎，就是将模版字符串转化为JS对象
render函数负责渲染差异（这里有一diff算法，比较前后帧的差异）
[2]如何进行服务端渲染SSR（对SEO的理解）
与SPA单页应用对比，更友好的SEO、内容更快到达
部署的服务器需要处于Node server环境下，会占用更多CPU资源
在nuxt内部的整个执行流程中，最先经过的是状态管理中actions中的nuxtServerInit函数
然后会经过middleware里的中间件函数，此时，还没有进行数据获取和页面渲染，所以我们可以在中间件函数中执行一些进入路由前的逻辑，比如用户权限判断
之后开始获取页面数据，asyncData和data的结果基本相同，我们可以直接调用server的接口，比如理由axios发送http请求获取页面所需的原始数据，然后以对象的形式return出去，此时，Vue对象还没有实例化，所以asyncData里无法调用到this
fetch里主要用作填充状态树（store）数据，nuxt中页面一旦跳转，整个vuex状态树就会被重置，这相当于不同页面下vuex独立，nuxt提供了一个api，nuxtServerInit，可以传入两个参数对象，commit、req，这样store中就有了用户鉴权的信息
这些全部做完以后，开始实例化Vue对象，这里的逻辑和单页应用是一样的，在组装好整个页面应用之后，nuxt.js会将这个应用返回至前端。注意，这里返回的不是单纯的页面，而是应用。此时的页面局部spa应用的一些性质，比如数据监听双向绑定
页面来到前端后，开始执行mount的相关逻辑
[3]对某框架源码有过了解没（问框架原理）
200行实现一个简易的React
[4]说一说对组件化、模块化开发的理解
高内聚、低耦合
提高代码复用率、降低代码耦合性
[5]了解Vuex/Redux吗
Vuex，维护一个store
[6]参与过上线/回滚整套流程吗
4个环境，开发、测试、预发布、线上
2个分支，新需求开发分支、稳定版修复bug分支
工具
[1]用过什么打包工具
rollup，JS模块打包工具
Webpack，项目打包构建工具
[2]如何管理项目
git
[3]对项目架构方面有什么看法
暂略
Nodejs
