CSDN话题挑战赛第2期
参赛话题：面试宝典

前请提要

今年我的第一个面试是在我们本地的二线城市，当时我高兴极了，作为一个专升本的同学，这一路的经历并不平凡，从专科时候选修的web课程到自学vue，到专科被本地公司录取，并在3个月内转正，再到拿到本科录取通知，主动请辞工作，我一直在充实的生活环境里成长，在本科阶段我一边修学课程，一边做兼职项目，再到从一点英语底子没有，在1年时间内考下了英语四级，我很开心，一路的努力都有了自己想要的答案；这不，从各种投递渠道，我拿到了本地中型公司的面试通知；

面试流程

线上叮叮面试

人事与我单独交流

1. 互相打招呼
2. 说了我为什么拿到了面试（实践经历丰富）
3. 问我是否准备好，拉入技术负责人

技术负责人开始面试，人事旁听

面试题

面试题一：

你熟悉的框架是什么？

问题剖析：

这里面试官会考究我们所用框架是否符合公司需求及未来发展

问题解答：

我回答了vue，也是我最熟练的框架，这里不是说能制作基本的业务就行了，扩展讲了vue的生态;

面试题二：

说说你对cookies，sessionStorage和localStorage的理解

问题剖析：

这个题在面试前我就背了，而且印象很深，所以 古人云 凡事预则立，不预则废； 云的很有道理，像这类关键技术常用技术，你不会就是你实践不到位了

问题解答：

共同点：都是保存在浏览器端，且是同源的。

cookies是为了标识⽤户⾝份⽽存储在⽤户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传,sessionstorage和localstorage不会⾃动把数据发给服务器，仅在本地保存。

存储⼤⼩的限制不同。cookie保存的数据很⼩，不能超过4k，⽽sessionstorage和localstorage保存的数据⼤，可达到5M。

数据的有效期不同。cookie在设置的cookie过期时间之前⼀直有效，即使窗⼝或者浏览器关闭。sessionstorage仅在浏览器窗⼝关
闭之前有效。localstorage始终有效，窗⼝和浏览器关闭也⼀直保存，⽤作长久数据保存。

作⽤域不同。cookie在所有的同源窗⼝都是共享；sessionstorage不能共享，即使同⼀页⾯；localstorage在所有同源

就这样我几乎把细节都说了出来，面试官欣慰的点了头，最后又问了一些vue的基础知识，总体面试难度不难，面试结果是未通过，也许是我的薪资要的太高了；

个人经验总结

充分准备，再去面试；准备好你拿的出手的项目，最好是经过部署的，上线的，而后要认清自己，到底去那里最合适

资料总结/刷题指南

最后我在这里准备了一些我的面试资料，就是初期网上搜集的一些；大家参考； 这个是html格式，我总结下来拿手机的html查看器方便手机背；

!DOCTYPE有什么作⽤？标准模式与混杂模式如何区分？它们有何意义?
告诉浏览器使⽤哪个版本的HTML规范来渲染⽂档。
DOCTYPE不存在或形式不正确会导致HTML⽂档以混杂模式呈现。
⾏内元素
a span img input select label i b
块级元素
div ul ol li dl dt dd h1 p
浏览器内核有哪些
Safari：Webkit
Chrome:现在是Blink内核
IE：Trident内核
360，猎豹浏览器：IE+chrome双内核
浏览器内核工作原理
渲染引擎:负责解析html/xhtml/图形等文件，渲染网页，不同的内核渲染结果有差异
JS引擎：解析和执⾏javascript来实现⽹页的动态效果。
HTML5有哪些新特性
新增加了图像、位置、存储、多任务等功能。
canvas ，video，audio，语义化标签，nav，article，表单控件：calender,date,time...
HTML语义化
没有样式时可以让页⾯呈现出清晰的结构。
有利于SEO和搜索引擎建⽴良好沟通，有助于爬⾍抓取更多的信息
可以增强可读性
cookies，sessionStorage和localStorage
共同点：都是保存在浏览器端，且是同源的。
cookies是为了标识⽤户⾝份⽽存储在⽤户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传,sessionstorage和localstorage不会⾃动把数据发给服务器，仅在本地保存。
存储⼤⼩的限制不同。cookie保存的数据很⼩，不能超过4k，⽽sessionstorage和localstorage保存的数据⼤，可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前⼀直有效，即使窗⼝或者浏览器关闭。sessionstorage仅在浏览器窗⼝关闭之前有效。localstorage始终有效，窗⼝和浏览器关闭也⼀直保存，⽤作长久数据保存。
作⽤域不同。cookie在所有的同源窗⼝都是共享；sessionstorage不能共享，即使同⼀页⾯；localstorage在所有同源
.label属性
label标签⽤来定义表单控件间的关系
for:对焦表单id
accesskey:热键对焦
浏览器内多个标签页之间的通信
WebSocket
也可以调⽤ localstorge、cookies 等本地存储⽅式。 localstorge 在另⼀个浏览上下⽂⾥被添加、修改或删除时，它都会触发⼀个
a标签
:link,未被访问时
:visited,访问后
:hover,悬浮时
:active,鼠标点击-松开期间
⽹页验证码
区分⽤户是计算机还是⼈的程序;防止恶意攻击，如分布式拒绝服务攻击(DDoS)
标签语义
视觉样式标签：b i u s
语义样式标签：strong em ins del code
xhtml/html
html元素必须正确嵌套，不能乱
html属性必须是⼩写的
html属性值必须加引号；
图片格式
jpg是有损压缩格式，体积小
png是⽆损压缩格式，8位，24位
svg是可缩放的矢量图形，基于xml,高分辨率
webp同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式,为了减少文件大小
div+css 的布局
⽅便改版和SEO
表现与结构相分离
页⾯加载速度更快、结构化清晰
meta viewport
viewport是虚拟窗口，在移动端浏览器下出现
meta viewport 标签的作⽤是让当前 viewport 的宽度等于设备的宽度，同时不允许⽤户进⾏⼿动缩放
Canvas
Canvas 元素⽤于在⽹页上绘制图形，该元素标签强⼤之处在于可以直接在 HTML 上进⾏图形操作。包括不限于验证码生成，动画效果
cssend
css盒子模型
content,padding,border,margin
Sass、scss、less
同属于动态样式语言，比css多出很多功能（如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等）
Sass是一款css预处理语言,sass是靠缩进表示嵌套关系,与css规范不符，所以不被广为接受
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。
scss一款css预处理语言,SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能,语法与css3相同，后缀.scss
SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种
scss是sass的一个升级版本，完全兼容sass之前的功能
LESS，精简样式表，语法与scss大同小异,变量声明上less-@,scss-$
引入外部文件 scss: import 开题必须为_，less则与css引入无异
sass的安装需要Ruby环境，是在服务端处理的，而less是需要引入less.js来处理less代码输出css到浏览器
在一般前端项目里面使用 yarn add less yarn add less-loader添加到对应的项目里面
css层叠样式表
流布局，float改变流
css画三角形 ：div的width和height为0，只用边框宽来填充，边框样式设置为实线“solid”；然后顶部边框设置颜色，剩下的三个边框的颜色设置为透明“transparent”值即可。
css实现元素垂直居中 ： table布局（vertical-align:middle），flex 布局, absolute绝对定位+translate, 行内元素 line-height 布局
css样式优先级：！important > style 1000 >Id 100 > class 10 > tag 1 
display:none ; 彻底消失，会引发页面重排
visibility:hidden; 单纯隐藏，位置还在，和opacity:0一样
BFC
块级格式化上下文,独立渲染区域，规定了内部box如何布局，并且与这个区域外部毫不相干
作用：避免margin重叠；自适应两栏布局；清除浮动。
触发：float的值不是none；position的值不是static或者relative；display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex；overflow的值不是visible。
px、em、rem、vh、vw
px物理像素，绝对单位；
em相对于自身字体大小，自身没有会向上寻找，相对单位
rem相对于html的字体大小，相对单位
vh,屏幕高度
vw,屏幕宽度
css可继承的属性
可继承的属性：文本类：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color；
字体类：font、font-family、font-weight、font-size、font-style
visibility、caption-side、border-collapse、border-spacing
scss是什么 :css的预编译语言
先装css-loader、node-loader、sass-loader等加载器模块；
style标签加上lang属性 ，例如：lang=”scss”
JSONP的原理
jsonp是使用方法回调的原理
function showjson(json){alert(json.url);}
 js
线程和进程
进程：cpu分配资源的最小单位（是能拥有资源和独立运行的最小单位）
线程：是cpu最小的调度单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
一个进程内有多个线程，执行过程是多条线程共同完成的，线程是进程的部分。
为什么js是单线程
JS是单线程的原因主要和JS的用途有关，JS主要实现浏览器与用户的交互，以及操作DOM
为了避免复杂情况的产生（如多线程操作dom）
HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。
js基本数据类型
string, number, boolean, undefiend, null, symbol
 number、boolean 和 string 有包装对象,代码运行的过程中会找到对应的包装对象，然后包装对象把属性和方法给了基本类型，然后包装对象被系统进行销毁。
内存泄漏
闭包(全局变量和局部变量问题)：能够读取其他函数内部变量的函数。
function f1(){var n=999;   function f2(){alert(n);    // 999}}
意外的全局变量
遗忘的定时器
js数组对象操作
数组合并：arr1.concat(arr2, ······)
对象合并:Object.assign()
et obj1 = {name: '温情'}let obj2 = {age: '22'}const newObj = Object.assign({}, obj1, obj2);
作用域，什么是作用域链
规定变量和函数的可使用范围称为作用域
查找变量或者函数时，需要从局部作用域到全局作用域依次查找，这些作用域的集合称作用域链。
js异步编程
回调函数(callback)；存在地狱回调问题，难以维护
事件监听。不取决于代码执行顺序
Promise
Generator
生成器 async/await,是ES7提供的一种解决方案。
堆内存，栈内存
栈内存主要用于存储各种基本类型的变量
堆内存主要负责像对象Object这种变量类型的存储
判断类型
typeof 判断基本类型，null属于object
instanceof不能检测基本数据类型，它是用来判断个实例是否属于某种类型
跨域
JSONP：jsonp就利用了script标签进行跨域取得数据，不能解决post
ajax实现跨域:dataType:'jsonp', //=> 执行jsonp请求
CORS跨域资源共享,服务端设置Access-Control-Allow-Origin就可以开启CORS,不安全
Nginx反向代理
脚手架配置跨域，将服务端域模拟为本地域
js内置对象
数据封装类对象：Object、Array、Boolean、Number 和 String其他对象：Function、Arguments、Math、Date、RegExp、Error....
防抖和节流
函数防抖当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次 : 输入搜索
函数节流当持续触发事件时，保证在一定时间内只调用一次事件处理函数
防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行
代码区别就在于if这里是清除定时器还是直接return终止函数
apply(),call(),bind()
apply（）和call（）都是每个函数或对象都拥有的非继承的方法。都是用来改变this的指向的
db理解为作用域
obj.myFun.call(db,'成都','上海')；　　　　 // 德玛 年龄 99  来自 成都去往上海obj.myFun.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海  obj.myFun.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海obj.myFun.bind(db,['成都','上海'])();　　 // 德玛 年龄 99  来自 成都, 上海去往 undefined
all 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔
apply 的所有参数都必须放在一个数组
bind 除了返回是函数以外，它 的参数和 call 一样。
setImmediate
setImmediate表示立即执行，它是宏任务，回调函数会被放置到事件循环的check阶段。
在应用中如果大量的计算型任务，它是不适合放在主线程中执行的，因为计算任务会阻塞主线程，主线程一旦被阻塞，其他任务就需要等待，
for-in,for-of
for in 和 for of 都可以循环数组,for in 遍历数组(下标)、遍历对象(key)，而for of 遍历数组和对象的值
for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array
for in适合遍历对象，for of适合遍历数组。
for in遍历的是数组的索引，对象的属性，以及原型链上的属性。
'js-end'
vue 与 react 框架核心价值
组件化，嵌入开发
数据视图分离，数据驱动视图 利用vdom
关注于业务数据
为什么使用vue
渐进式框架 ：有极高的维护和扩展特性
与现代化工具链，第三方库整合良好
MVVM设计模式 ：双向数据绑定，数据-视图分离
体积小，市场成熟
有成熟的构建工具支持
vdom (virtual dom) 虚拟dom
虚拟DOM，DOM树的虚拟表现。因为改变真实dom代价太大，会引发dom重排
React / Vue 项目时为什么要在列表组件中写 key
key 是给每一个 vnode 的唯一 id,可以依靠 key,更准确,更快的拿到 oldVnode 中对应的 vnode 节点
vdom key的作用
key最好为唯一标识
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】的差异比较，也就是diff算法，比较无差异的节点不需要更新