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