如果您想了解前端面试准备笔记之html和css(03)和前端面试css问题的知识，那么本篇文章将是您的不二之选。我们将深入剖析前端面试准备笔记之html和css(03)的各个方面，并为您解答前端面试c
如果您想了解前端面试准备笔记之html和css(03)和前端面试css问题的知识，那么本篇文章将是您的不二之选。我们将深入剖析前端面试准备笔记之html和css(03)的各个方面，并为您解答前端面试css问题的疑在这篇文章中，我们将为您介绍前端面试准备笔记之html和css(03)的相关知识，同时也会详细的解释前端面试css问题的运用方法，并给出实际的案例分析，希望能帮助到您！
本文目录一览：
前端面试准备笔记之html和css(03)（前端面试css问题）
01. HTML页面的加载顺序
html文档是自上而下加载的。
- head标签中遇到script>标签时，如果引用了外部脚本就下载，否则就直接执行(此时控制权交给js引擎(解释器))，执行完毕后再将控制权交给渲染引擎。
- head完毕后，开始解析body中的代码，此时如果遇到script>,同样会将控制权交给js引擎。
- 当body中的代码全部执行完毕，并且整个页面的css样式加载完毕，css会重新渲染整个页面的html元素。
- 所以，script>标签写在标签靠后的位置较好，因为js会操作html元素，如果在body之前写js逻辑会造成找不到页面元素。
- 图片或视频的加载是异步的，也就是说在加载css和dom过程中，加入出现图片链接，浏览器会额外去下载这个图片，不会阻塞后面的资源解析，但是图片的加载却受css样式的影响，图片加载完成之前，css必须加载完成。
- 如果遇到script>中有错误语法，会直接报错并忽略该script>块的执行，而跳到下一个script>块执行。
- 外部样式和外部脚本也是异步加载的，加载外部文件的时候，不会阻塞后面dom的解析，外部脚本执行没有async、defer的属性时，会被外部样式阻塞，也就是说要等到外部css加载完才会执行外部脚本，添加async或defer就不会受到阻塞。
02. 页面加载的时候调用js方法
<body onl oad='queryServer()'>
</body>
03. a 标签中target属性使用
target属性规定在何处打开链接文档。以下是4个保留的目标名称用作特殊的文档重定向操作:
- _blank 在新窗口中打开被链接文档。
- _self 默认。在相同的框架中打开被链接文档。
- _parent 在父框架集中打开被链接文档。
- _top 在整个窗口中打开被链接文档。
- framename 在指定的框架中打开被链接文档。
04. 与浏览列表有关的对象
- History 对象包含用户访问过的URL
- Location 对象包含有关当前的URL的信息
- Window 对象表示浏览器中打开的窗口
- Navigator 对象包含有关浏览器的信息
05. 背景图和img标签之间的区别？
- 背景图会等到html加载完后才开始加载，img标签属于html一部分，会在html结构加载的时候加载。
- 背景图加载失败或找不到路径的时候，不会显示图片标记。
- img标签在加载失败或找不到路径的时候，会显示一个撕裂的图标。
- 数据图就是从后台获取的图片，一般用img标签显示，其他的一般用背景图显示。
06. iframe 与 frame
优点：
- 优点是程序调入静态页面比较方便，页面与程序分离。
缺点：
- 样式/脚本需要额外链入，会增加请求。
- 首页如果用iframe，搜索引擎最讨厌的，即使网站再好也不会有好的名次。
- 调用外部页面，需要额外的调用css，给页面带来额外的请求次数。
- iframe会给页面带来冲击，只要可能，不要使用iframe。
- iframe加载资源的时候可能会用光所有的可用连接欸，从而阻塞主页面的资源加载。
iframe和frame的区别:
- frame不能脱离frameSet单独使用，iframe可以;
- frame不能放在body中.
- frame与iframe两者基本功能相似，不过iframe比frame具有更多的灵活性。
- frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌框架，可以用一个HTML文档嵌入在一个HTML显示。
2017 前端面试准备 - 收藏集 - 掘金
一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金
最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ...
收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金
从原博客迁移过来（有更改），并将保持更新。 关于JavaScript，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。这篇文章记录了一些有价值的问题。 1. 对象字面值不能正确解析 问题：{a:1}.a报错，错误Uncaught SyntaxErro...
前端开发面试题总结之——JAVASCRIPT（三） - 前端 - 掘金
相关知识点 数据类型、运算、对象、function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步加载、模板引擎、前端MVC、前端MVVM、路由、模块化、Http、Canvas、jQuery、ECMAS...
前端开发面试题总结之——JAVASCRIPT（二） - 前端 - 掘金
相关知识点 数据类型、运算、对象、function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步加载、模板引擎、前端MVC、前端MVVM、路由、模块化、Http、Canvas、jQuery、ECMAS...
前端开发面试题总结之——JAVASCRIPT（一） - 前端 - 掘金
相关知识点 数据类型、运算、对象、function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步加载、模板引擎、前端MVC、前端MVVM、路由、模块化、Http、Canvas、...
前端开发面试题总结之——HTML - 前端 - 掘金
相关知识点 web标准、 web语义化、 浏览器内核、 兼容性、 html5... 题目&答案 Doctype作用？严格模式与混杂模式如何区分？它们有何意义?（1）<!DOCTYPE>声明位于HTML文档中的第一行，处于<h...
几个让我印象深刻的面试题 (一) - 前端 - 掘金
分享几个我遇到的认为不错的面试题...
一个普通本科在校生的前端学习之路 - 阅读 - 掘金
原创 西安前端交流会:卡农 ovenzeze@qq.com转载注明出处 西安前端交流会：www.wdshare.org 这是初级群（西安初级前端群：4983126）里边的一次分享，整理...
从培训班出来之后找工作的经历，教会了我这五件事 - 掘金
这是 Medium 上的一篇文章（已有 5900 个赞），讲的是国外一个培训出来的程序员，用三个月时间，找到了一份年薪 12 万美元的工作，并从中得到的五个忠告的故事。 我觉得他总结得很好，尤其是心态和方法，非常值得学习。对正在找工作的同学非常有用。 想收到更...
面试 -- 网络 HTTP - 掘金
现在面试门槛越来越高，很多开发者对于网络知识这块了解的不是很多，遇到这些面试题会手足无措。本篇文章知识主要集中在 HTTP 这块。文中知识来自 《图解 HTTP》与维基百科，若有错误请大家指出。文章会持续更新。 面试 -- 网络 TCP/IP 了解 Web ...
27款优质简洁的个人简历打包下载 - 工具资源 - 掘金
Clean Resume Template Blog Media Kit Template - 2 Page Blog Media Kit Template - 2 Page Blog Media Kit Template - 3 Page Resum...
技术 | 前端面试题（一）：递归解析 - 前端 - 掘金
我和阿里巴巴的同事守雌将为大家带来一个系列专题：前端面试题解析，一周更新两篇，也许答案可能不是最优的，但是也可以给你提供解决问题的思路。面试题力求实战，期望对于找工作的你，温故而知新的你，能有所帮助。 递归基本上是一个必考的算法题，它是实现程序计算过...
征服 JavaScript 面试：什么是闭包 - 前端 - 掘金
“征服 JavaScript 面试”是我写的一系列文章，来帮助面试者准备他们在面试 JavaScript 中、高级职位中将可能会遇到的一些问题。这些问题我自己在面试中也经常会问。 在我面试时问出的一系列问题里，闭包通常是我问的第一个或最后一个问题。坦白地说，...
谈谈面试与面试题 - 前端 - 掘金
起因，某日电话面试之后满心郁闷的我发了两条微博： 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin ...
17 年 2 月面试经验 | _striveg blog - Android - 掘金
前言 小插曲：我年前就开始投简历，投了很长时间没人联系，结果年后回来一看，尼玛，电话写错了。 又到了一年一度换工作的时候，我也不例外，因为去年一年都在乙方公司工作，自己不是很喜欢，因此想换家公司。由于目前还在职，因此只面试了四家...
前端面试常见问题按知识点分类整理 - 前端 - 掘金
前端面试常考问题分类整理汇总 目录 ...
从一道面试题，到 “我可能看了假源码” - 前端 - 掘金
今天想谈谈一道前端面试题，我做面试官的时候经常喜欢用它来考察面试者的基础是否扎实，以及逻辑、思维能力和临场表现，题目是：“模拟实现ES5中原生bind函数”。也许这道题目已经不再新鲜，部分读者也会有思路来解答。社区上关于原生bind的研究也很多，比如用它来实现...
1月前端面试记 - 掘金
背景 我于16.12.18辞职，之前有过一年左右的前端工作经验。从12月26号开始到1月9号先后面试了微信，百度，阿里巴巴uc，唯品会以及深圳腾讯等几家公司，特此总结与各位共勉。 微信 由于我已经毕业工作过，所以去微信面试是走的社招。微信社招极其严格，共八轮面...
前端面试经典问题：CSS 中居中的几种方式 - 前端 - 掘金
作为面试常客，学会这些，面试多点把握，同学间逼格升高周五，老大说他面试了一个问题，是css居中的问题，然后我们在这边就讨论了一番，周末嗨玩，尾巴上想起这件事，特来总结，希望能帮助到求职和学习的朋友！参考了这篇文章，快速传送门内容都是我手敲实践过的可靠！ ...
技术 | 前端面试题（二）：自定义事件 - 前端 - 掘金
我和阿里巴巴的同事守雌将为大家带来一个系列专题：前端面试题解析，一周更新两篇，也许答案可能不是最优的，但是也可以给你提供解决问题的思路。面试题力求实战，期望对于找工作的你，温故而知新的你，能有所帮助。 关于事件，我想这也是前端面试中必问的一道题，除了...
CSS 并不简单 -- 一道微信面试题的实践 - 前端 - 掘金
本系列会持续分享本人学习到的CSS知识点、技巧和效果展示。如有错误，希望您能指出。 前段时间有一位大牛分享的几道微信的面试题，其中一道是求一个HTML元素的background-color的题...
CSS 面试题解答 - 前端 - 掘金
问：什么是CSS reset 在不同浏览器之间，默认样式有着诸多差异和问题，而为了在不同浏览器之间具备相同的视觉效果，开发人员往往会在样式表文件中引入一段CSS代码，如http://meyerweb.com/eric/tool...
44 个 JavaScript 变态题解析 - 前端 - 掘金
原题来自: http://javascript-puzzlers.he... 读者可以先去做一下感受感受. 当初笔者的成绩是 21/44... 当初笔者做这套题的时候不仅怀疑智商, 连人生都...
JavaScript 面试题：重复输出一个给定的字符串 - 前端 - 掘金
本文的思路主要来自《Three ways to repeat a string in JavaScript》，但是我对内容作了很多修改和补充。 其实这是可以作为一道很好的面试题，可以考察开发人员的综合能力。 面试题： 重复输出一个给定的字符串（str第一个...
Excuse me？这个前端面试在搞事！ - 前端 - 掘金
金三银四搞事季，前端这个近年的热门领域，搞事气氛特别强烈，我朋友小伟最近就在疯狂面试，遇到了许多有趣的面试官，有趣的面试题，我来帮这个搞事 boy 转述一下。 以下是我一个朋友的故事，真的不是我。 ...
最近遇到的前端面试题 (2017.02.23 更新版) - 前端 - 掘金
个人博客已上线，欢迎前去访问评论！无媛无故 - wangchloe的个人博客 以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。 ...
献给前端求职路上的你们（上） - 前端 - 掘金
在放大镜中寻找你 前言 我是一名前端开发，从2016年6月毕业到如今步入工作，期间也面试了一些公司，参考过一些面试文档，学习了一些面试宝典，掌握了一些面...
一道 JS 面试题所引发的 "血案"，透过现象寻本质，再从本质看现象 - 前端 - 掘金
觉得本人写的不算很烂的话，可以登录关注一下我的GitHub博客，新手写东西写的不好之处，还望见谅，毕竟水平有限，写东西只为交流提高，一起学习，还望大神多加指点，指出纰漏，和提出宝贵的意见，博客会坚持写下去。 今天同学去面试，做了两道面试题,全部做错了，发过来给...
2018前端面试准备
前端面试常见问题按知识点分类整理
前端面试常考问题整理，按模块知识点分类，持续完善中... Front-end-Developer-Questions by Modules and knowledge
前端面试经典问题：CSS 中居中的几种方式
面试中经常遇到的面试题之一，居中布局，特来总结
几个让我印象深刻的面试题 (一)
分享几个我遇到的认为不错的面试题
27款优质简洁的个人简历打包下载
优质简洁的个人简历打包
前端开发面试题总结之——JAVASCRIPT（一）
前端面试系列之 JavaScript，还有两篇
44 个 JavaScript 变态题解析
读者可以先去做一下感受感受. 当初笔者的成绩是 21/44...
当初笔者做这套题的时候不仅怀疑智商, 连人生都开始怀疑了....
不过, 对于基础知识的理解是深入编程的前提. 让我们一起来看看这些变态题到底变态不变态吧!
技术 | 前端面试题（二）：自定义事件
我和阿里巴巴的同事守雌将为大家带来一个系列专题：前端面试题解析，一周更新两篇，本篇主要讲如何实现自定义事件。
前端开发面试题总结之——JAVASCRIPT（二）
前端开发面试题总结之—JavaScript，一共三篇
前端开发面试题总结之——HTML
前端开发面试题，本文主要讲述的是 HTML 相关的面试题。面试相关的我整理成收藏集欢迎关注。
收集 JavaScript 各种疑难杂症的问题集锦
关于 JavaScript，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。这篇文章记录了一些有价值的问题。
一道 JS 面试题所引发的 "血案"，透过现象寻本质，再从本质看现象
由一道面试题想到拓展的，分析问题的方法
CSS 面试题解答
什么是 CSS reset？CSS 性能优化？浮动的原理和工作方式，会产生什么影响呢，要怎么处理？CSS 权重？
Excuse me？这个前端面试在搞事！
金三银四搞事季，前端这个近年的热门领域，搞事气氛特别强烈，我朋友小伟最近就在疯狂面试，遇到了许多有趣的面试官，有趣的面试题，我来帮这个搞事 boy 转述一下。
前端开发面试题总结之——JAVASCRIPT（三）
前端开发面试题总结之 JavaScript，一共三篇
1月前端面试记
背景 我于16.12.18辞职，之前有过一年左右的前端工作经验。从12月26号开始到1月9号先后面试了微信，百度，阿里巴巴uc，唯品会以及深圳腾讯等几家公司，特此总结与各位共勉。 微信 由于我已经毕业工作过，所以去微信面试是走的社招。微信社招极其严格，共八轮面试，总体来说我基本…
一道面试题引发的对 javascript 类型转换的思考
通过一道面试题，详细描述了 javascript 类型转换的相关内容，对 javascript 进阶有所帮助。
献给前端求职路上的你们（上）
我是一名前端开发，从2016年6月毕业到如今步入工作，期间也面试了一些公司，参考过一些面试文档，学习了一些面试宝典，掌握了一些面试、笔试技巧和经验，所以就总结了一些优质的前端面试题以及面试要点，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，才能形成自己的知识链，以不变应万变，万不可投机取巧，只求面试过关哦！
征服 JavaScript 面试：什么是闭包
征服 JavaScript 面试：什么是闭包
一个普通本科在校生的前端学习之路
今天我分享的内容主要是关于前端初学者的学习路线和一些建议，还有自己在准备校招过程中的一点经验。
CSS 并不简单 -- 一道微信面试题的实践
本系列会持续分享本人学习到的 CSS 知识点、技巧和效果展示。如有错误，希望您能指出。
从培训班出来之后找工作的经历，教会了我这五件事
这是 Medium 上的一篇文章（已有 5900 个赞），讲的是国外一个培训出来的程序员，用三个月时间，找到了一份年薪 12 万美元的工作，并从中得到的五个忠告的故事。 我觉得他总结得很好，尤其是心态和方法，非常值得学习。对正在找工作的同学非常有用。 想收到更多最新、最专业的前…
最近遇到的前端面试题 (2017.02.23 更新版)
最近整理的前端面试题，希望能对大家有帮助。转载自：http://www.jianshu.com/p/3944...
17 年 2 月面试经验 | _striveg blog
个人面试几家的面试题和一点小感悟
面试 -- 网络 HTTP
现在面试门槛越来越高，很多开发者对于网络知识这块了解的不是很多，遇到这些面试题会手足无措。本篇文章知识主要集中在 HTTP 这块。文中知识来自 《图解 HTTP》与维基百科，若有错误请大家指出。文章会持续更新。 面试 -- 网络 TCP/IP 了解 Web 及网络基础 对端传输…
从一道面试题，到 “我可能看了假源码”
今天想谈谈一道前端面试题
技术 | 前端面试题（一）：递归解析
我和阿里巴巴的同事守雌将为大家带来一个系列专题：前端面试题解析，一周更新两篇，也许答案可能不是最优的，但是也可以给你提供解决问题的思路。
谈谈面试与面试题
Winter 对于前端面试的一些看法。
2019前端面试之html5
html5新增特性
- 语义化标签
- 表单新特性
- 视频和音频canva画布
- svg画图
- 地理位置
- 为鼠标提供的拖放api
- webwroker
- storage
- websocker
常见块级标签
- div,p,h1-h5,hr,menu,ol,ul,dl,dt,dd,table,from
常见行内标签
- span,a,b,strong,i,em,br,textarea,select,u(下划线)
常见行内块标签
- input,img,
link和@import的区别
- link属于xml标签，@import属于css的一种形式>
- 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，一边下载一边浏览梦之都网页时，就会出现上述问
- 兼容性的差别，@import只支持IE5以上的浏览器
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
浏览器内核的理解?
- 渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
- js引擎：解析和执行javaScript来实现网页动态效果
常见浏览器内核？
- IE内核：Thrident
- chorme内核：blink
- safair内核：webkit
- opera内核：Presto
- firefox内核：Gecko
2019前端面试准备
1.html
1）什么是html
超文本标记语言，一个网页文件
2）DOCTYPE有什么作用
告诉浏览器使用哪个版本的HTML规范来渲染文档
3）介绍一下你对浏览器内核的理解，常见的浏览器内核有哪些
主要分成两个部分：渲染引擎和JS引擎。
渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。
JS引擎：解析和执行JavaScript来实现网页的动态效果。
常见的浏览器内核：
Trident：IE，360，搜过浏览器；
Gecko：Firefox
Blink：Opera；
Webkit：Safari，Chrome
4）html5的新特性
01 添加语义标签 header footer
02 增强型表单 placeholder required
03 视频和音频
04 canvas绘图
05 svg绘图
06 地理定位
07 web storage
08 websocket
09 拖放api
10 web worker
5）简述一下src与href的区别
01 href 是指向网络资源所在位置，建立和当前文档之间的链接，用于超链接。
02 src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
2.css
1）垂直居中几种方式
01.display: flex
.outer {
display: flex;
align-items: center;
justify-content: center;
}
02.absolute + transform
.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
03.absolute + margin: auto
.outer {
position: relative
}
.inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
2）常见布局
body {
display: flex;
padding: 0;
margin: 0;
}
.left {
background: blue;
flex: 200px 0 0;
}
.middle {
background: red;
flex: 1;
}
.right {
background: green;
flex: 0 0 200px;
}
3）css3的新特性
01 动画 animation
02 过渡 transition
03 多媒体查询
04 多背景图
05 阴影
06 圆角
07 渐变
08 字体 @font-face
09 转换 （旋转 缩放）
10 flex
4）动画
01 用keyframes创建动画
02 用animation绑定到某个选择器，设置名称和时长
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red;}
100% {background:yellow;}
}
5）清除浮动
01 设置父元素overflow属性为hidden
02 使用clear：both
03 在浮动元素后面添加一个空标签
04 使用伪元素：after
6）px，em，rem 的区别
px像素 相对长度单位。像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem也是相对长度单位，但相对的是HTML根元素。只修改根元素就成比例地调整所有字体大小
7）盒子模型
盒子模型包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分
3.js
1）基本类型和引用类型
基本类型：
01 类型：number string undefined null boolean
02 基本类型的值是不可变得
03 基本类型的比较是值的比较
04 基本类型的变量是存放在栈内存的
引用类型：
01 引用类型的值是可变的
02 引用类型值可添加属性和方法
03 引用类型存储的是地址（指针）。当你创建了一个引用类型的时候，计算机会在堆内存中帮我们开辟一个空间来存放值，栈区内存保存变量标识符和指向堆内存中该对象的指针，也可以说是该对象在堆内存的地址。复制对象时，会在栈内存中添加一个指针，跟被复制的指针指向堆内存中相同的一个值，所以修改其中一个对象，另一个都会受到影响
04 引用类型的比较是引用地址的比较
2）typeof和instanceof的区别
typeo
01 检测变量是字符串、数值、布尔值还是undefined的最佳工具。
02 typeof 来获取一个变量是否存在，如果要去使用 if 判断（未声明）则会出错。
instanceof
01 instanceof运算符用来判断用于判断左侧参数是否属于右侧的实例
obj instanceof Object 检测Object.prototype是否存在于参数obj的原型链上。
02 typeof 对于对象来说，除了函数都会显示 object，所以说 typeof 并不能准确判断变量到底是什么类型。如果我们想判断一个对象的正确类型，这时候可以考虑使用 instanceof
([1,2.3]) instanceof Array // true
({}) instanceof Object // true
(new Date) instanceof Date // true
(function(){}) instanceof Function // true
3）typeof null 为什么等于object
原理是这样的，不同的对象在底层都表示为二进制，在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型， null 的二进制表示是全 0，自然前三位也是 0，所以执行 typeof 时会返回“ object ”。100：字符串，数据是字符串。110：布尔类型，数据是布尔值。
4）怎么检测对象类型
Object.prototype.toString.call(obj).slice(8, -1)
5）this
this是对应执行环境。this是在调用时被绑定的，取决于函数的调用方法。
默认绑定、隐式绑定、显示绑定、new 绑定。优先级从低到高。
01.默认绑定：
最常用也是函数调用类型，当只有一个独立函数时，this指向的是window对象
02.隐式绑定
函数调用的位置有上下文环境（对象调用模式，函数是一个对象的方法）
03.显示绑定
显示绑定就是通过apply，call，bind，直接将函数中的this绑定到想要的对象上
04.构造函数模式
创建一个构造函数的实例，构造函数中的this会绑定到这个实例对象上
6）作用域链和闭包
作用域链
作用域分为全局作用域和局部作用域，全局作用域在代码中的任何地方都可以被访问，局部作用域只在固定的代码片段中可以访问到。
每次进入一个新的执行环境，都会创建一个用于搜索变量和函数的作用域链。作用域链是函数被创建的作用域中对象的集合。作用域链可以保证对执行环境有权访问的所有变量和函数的有序访问。标识符解析是沿着作用域一级一级的向上搜索标识符的过程，直到找到标识符（找不到报错）。
作用域优先级：变量 > 普通函数 > 参数 > 提升
闭包
函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。
优点：当全局变量使用，避免全局污染
缺点：容易造成内存泄漏
7）原型与原型链
原型是一个普通的对象，原型对象是构造函数的一个实例，主要用于继承。
在创建对象的时候，都有一个叫做__proto__ 的内置属性，用于指向创建它的构造函数的原型对象，__proto__ 将对象和原型连接起来组成了原型链
对象拥有这样一个原型链以后，当访问对象的属性时，先查找自身是否有该属性，当找不到该属性时，该对象就沿着原型链依次去查找，找不到返回undefined
Object.prototype.__proto__ 是 null，表示 obj 对象原型链的终结
在原型对象上定义方法和属性，是为了被子类继承和使用
Object 是所有对象的爸爸，所有对象都可以通过 __proto__ 找到它
Function 是所有函数的爸爸，所有函数都可以通过 __proto__ 找到它
8）继承
01 原型链继承
function Parent() {
this.name = ''mike'';
}
function Child() {
this.age = 12;
}
Child.prototype = new Parent();
var child = new Child();
alert(child.name) // ''mike''
02 原型式继承
function obj(o) {
function F() { }
F.prototype = o;
return new F();
}
var box = {
name: ''trigkit4'',
arr: [''brother'', ''sister'', ''baba'']
};
var b1 = obj(box);
alert(b1.name);//trigkit4;
9）JS执行底层 略
10）浅拷贝和深拷贝
浅拷贝
let a = {
age: 1
}
let b = Object.assign({}, a) // 或者 let b = { ...a }
浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，两者享有相同的地址，会相互影响
深拷贝
01 JSON.parse(JSON.stringify(object))
缺陷：
会忽略 undefined
会忽略 symbol
不能序列化函数
不能解决循环引用的对象
02 递归
function deepCopy(params) {
var obj;
if (typeof params === ''object'') {
if (Array.isArray(params)) {
obj = [];
for (var i = 0; i < params.length; i++) {
obj.push(arguments.callee(params[i]))
}
} else {
obj = {};
for (var c in params) {
obj[c] = arguments.callee(params[c]);
}
}
} else { return params; }
return obj;
} 11）es6的常用方法
01.let和const var
var：有变量提升，可重复生命，var 在全局作用域下声明变量会导致变量挂载在 window 上
let和const：没有变量提升，不能重复声明
02.箭头函数的 this
001 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
002 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
003 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
03.promise
Promise是一个对象，有then()方法的对象,Promise 是异步编程的一种解决方案。有三种状态
等待中（pending）
完成了 （resolved）
拒绝了（rejected）
这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变
优点：Promise 的写法是回调函数的改进，使用then方法以后，异步任务的两段执行看得更清楚了。then将原来异步函数的嵌套关系转变为链式步骤,很好地解决了回调地狱的问题
缺点：Promise 的最大问题是代码冗余，原来的任务被Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。
04.async await
一个函数如果加上 async ，那么该函数就会返回一个 Promise对象
await等待右侧表达式的结果，这个结果是promise对象或者其他值。
如果它等到的不是一个 promise 对象，那 await 表达式的运算结果就是它等到的东西。
如果它等到的是一个 promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。
优点：代码简洁、几乎和同步代码一样，可读性好
缺点：滥用 await 可能会导致性能问题，因为 await 会阻塞代码
05.字符串模板
let time = `now time is ${new Date}`
06.new Set 数组去重
[...new Set([1,2,3,4,2,3,3])]//[1,2,3,4]
12）ts
支持es6；支持类型检测，减少你在开发阶段犯错误的几率
13）call apply bind
改变this的指向
call 第二个参数接受的是若干个参数列表
apply 第二参数接收的是一个包含多个参数的数组
bind 返回一个函数，需要手动去调用
14）类型转换 略
15）new的原理
在调用 new 的过程中会发生以上四件事情：
新生成了一个对象
链接到原型
绑定 this
返回新对象
代码实现如下
function create(Con, ...args) {
let obj = {}
Object.setPrototypeOf(obj, Con.prototype)
let result = Con.apply(obj, args)
return result instanceof Object ? result : obj
}
16）js垃圾回收机制
js中的内存管理是自动执行的，而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。
定期执行以下“垃圾回收”
01.垃圾回收器获取根并“标记”(记住)它们。
02.然后它访问并“标记”所有来自它们的引用。
03.然后它访问标记的对象并标记它们的引用。所有被访问的对象都被记住，以便以后不再访问同一个对象两次。
04.以此类推，直到有未访问的引用(可以从根访问)为止。
05.除标记的对象外，所有对象都被删除。
17）事件机制
001.window 往事件触发处传播，遇到注册的捕获事件会触发
002.传播到事件触发处时触发注册的事件
003.从事件触发处往 window 传播，遇到注册的冒泡事件会触发
事件代理：
因为冒泡机制，比如既然点击子元素，也会触发父元素的点击事件，那我们完全可以将子元素的事件要做的事写到父元素的事件里，也就是将子元素的事件处理程序写到父元素的事件处理程序中，这就是事件委托。
每当将事件处理程序制定给元素时，运行中的浏览器代码与支持页面交互的JS代码之间就会建立一个连接，而这种连接越多，页面执行起来就越慢。考虑内存和性能问题，为了解决事件处理程序过多的问题，采用事件委托变得很有必要。
18）数组常用方法
01. concat() //连接多个数组，并返回结果
02. join() //把数组分割成字符串 如[1,2].join('','') => "1,2"
03. pop() // 删除并返回数组的最后一个元素
04. pusp() //向数组的末尾添加一个或更多元素，并返回新的长度
05. unshift() //向数组的开头添加一个或更多元素，并返回新的长度
06. shift() // 删除并返回数组的第一个元素
07. sort() // 对数组进行排序
08. reverse() // 颠倒数组
09. toString() // 把数组转为字符串
010. slice(start, [end]) // 返回数组指定元素
011. splice(index, count, [add]) // 从数组中删除指定元素，并返回被删除内容(数组格式) index: 位置；count：删除数量；add：添加元素 可选
012. map filter forEach reduce find some every includes
19）字符串常用方法
01 slice(start, [end]) // 截取字符串
02 substring(start, [stop]) // 截取字符串， 与slice相似，但不允许负的参数；如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
03 substr(start, length) // 截取字符串
04 charAt() // 返回在指定位置的字符
05 concat() //拼接字符串
06 indexOf() // 检索字符串
07 lastIndexOf() // 从后向前检索
08 match() // 找到与正则的匹配 (''match1match2'').match(/\d+/g) => [1,2];
09 replace() // 替换与正则相匹配的值 (''match1match2'').replace(/\d/g, ''||'') => (''match||match||'')
010 search() // 检索与正则匹配的值 (''match1match2'').search(/\d/g) => 5
011 toUpperCase() // 把字符串转为大写
012 toLowerCase() // 把字符串转为小写
013 split(''&'') 字符串按‘&’进行分割
20）对象常用方法
01 Object.keys 获取对象的所有keys值 为数组形式
02 Object.values 获取对象的所有values 为数组形式
03 {}.hasOwnproperty(''key'') 判断对象是否有key属性
04 for(let x in obj) 循环对象
05 Object.assign() 复制并克隆对象,并返回合并后的对象，如果是多个对象参数，那么相同的属性，后边的属性值会覆盖前边的属性值；例如 Object.assign({} , obj)
06 Object.entries() 遍历对象，并返回一个数组，数组的每一个元素是由对象的属性以及属性值组成的数组；
07 Object.create() 创建对象
08 obj.hasOwnProperty(''name'') 判断对象自身属性中是否具有指定的属性。
21）es5和es6去重
es5
[1,1,2,1,2].filter((item, i, arr) => {
return arr.indexOf(item) === i
})es6: [...new Set([1,2,3,3,2])]
22）判断一个字符串中出现次数最多的字符，统计这个次数
var str = ''asdfssaaasdddddddaa'';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '''';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
} 23）求数组的最值
Math.max.apply(null, [1,2,3,4]); Math.max.apply(null,[1,2,3,4]);
24）数组的翻转（非reverse()）
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length) {
var num = arr.pop();
arr2.push(num);
}
console.log(arr2);
4.http
1）状态码
1XX 用于指定客户端相应的某些动作
2XX 用于表示成功
3XX 用于已经移动的文件并且被包含在定位头信息中指定心的地址信息(重定向，为了完成请求，必须进一步执行的动作)
4XX 用于指出客户端错误
5XX 用于支持服务器错误
100 继续；101 分组交换协议
200 ok；201 被创建；202 被采纳；203 非授权信息；204 无内容；205 重置内容；206 部分内容；
300 多选项；301 永久地传递；302 找到；303 参见其他；304 未改动；305 使用代理；307 暂时重定向；
400 错误请求(可能是get请求写成post请求)；401 未授权；402 要求付费；403 禁止；405 不允许的方法；406 不被采纳；407 要求代码授权；408 请求超时；409 冲突；410 过期的；411 要求的长度；412 前提不成立；413 请求实例太大；414 请求url太大；415 不支持的媒体类型；416 无法满足的请求范围；417 失败的预期；
500 内部服务器错误；501 未被使用；502 网关错误；503 不可用的服务；504 网关超时；505 HTTP版本未被支持；
2）解决跨域方法
当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
01 jsonp
利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。
JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性。
02 CORS
CORS要求浏览器和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。
优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP。
03 websocket
WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
04 postMessage
如果两个网页不同源，就无法拿到对方的DOM。HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
出处：https://blog.csdn.net/liangjielaoshi/article/details/83786388
3）三次握手四次挥手
三次握手：
首先 Client 端发送连接请求报文，Server 段接受连接后回复 ACK 报文，并为这次连接分配资源。Client 端接收到 ACK 报文后也向 Server 段发生 ACK 报文，并分配资源，这样 TCP 连接就建立了。
四次挥手：
由于TCP连接是全双工的，因此每个方向都必须单独进行关闭。这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接。收到一个 FIN只意味着这一方向上没有数据流动，一个TCP连接在收到一个FIN后仍能发送数据。首先进行关闭的一方将执行主动关闭，而另一方执行被动关闭。
4）请求方式有哪些 Post 和 Get 的区别
请求方式
01. GET 方法：发送一个请求来取得服务器上的某一资源
02. POST 方法：向 URL 指定的资源提交数据或附加新的数据
03. PUT 方法：跟 POST 方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT 指定了资源在服务器上的位置，而 POST 没有
04. HEAD 方法：只请求页面的首部
05. DELETE 方法：删除服务器上的某资源
06. OPTIONS 方法：它用于获取当前 URL 所支持的方法。如果请求成功，会有一个 Allow 的头包含类似“GET,POST”这样的信息
07. TRACE 方法：TRACE 方法被用于激发一个远程的，应用层的请求消息回路
08.CONNECT 方法：把请求连接转换到透明的 TCP/IP 通道
5）http和https的区别
01. Http 协议运行在 TCP 之上，明文传输，客户端与服务器端都无法验证对方的身份；Https 是身披 SSL(Secure Socket Layer)外壳的 Http，运行于 SSL 上，SSL 运行于 TCP 之上，是添加了加密和认证机制的 HTTP。二者之间存在如下不同：
02. 端口不同：Http 与 Http 使用不同的连接方式，用的端口也不一样，前者是 80，后者是 443；
03. 资源消耗：和 HTTP 通信相比，Https 通信会由于加减密处理消耗更多的 CPU 和内存资源；
04. 开销：Https 通信需要证书，而证书一般需要向认证机构购买；
05. Https 的加密机制是一种共享密钥加密和公开密钥加密并用的混合加密机制。
6）请求过程
折中后的五层协议
01 应用层(dns,http) DNS解析成IP并发送http请求
02 传输层(tcp,udp) 建立tcp连接（三次握手）
03 网络层(IP,ARP) IP寻址
04 数据链路层(PPP) 封装成帧
05 物理层(利用物理介质传输比特流) 物理传输（然后传输的时候通过双绞线，电磁波等各种介质）
简括：
从应用层的发送http请求，到传输层通过三次握手建立tcp/ip连接，再到网络层的ip寻址，再到数据链路层的封装成帧，最后到物理层的利用物理介质传输。
5.webpack
1）什么是webpack，为什么使用webpack // 工作原理；与gulp、grunt有什么区别
webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
2）优缺点
优点
01 专注于处理模块化的项目，能做到开箱即用，一步到位
02 可通过plugin扩展，完整好用又不失灵活
03 使用场景不局限于web开发
04 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
05 良好的开发体验
缺点
只能用于采用模块化开发的项目
3）分别介绍什么是loader?什么是plugin
loader：模块转换器，用于将模块的原内容按照需要转成你想要的内容
plugin：在webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果，是用来自定义webpack打包过程的方式
4）常用的loader
file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码
5）常用的plugin
define-plugin：定义环境变量
terser-webpack-plugin：通过TerserPlugin压缩ES6代码
html-webpack-plugin 为html文件中引入的外部资源，可以生成创建html入口文件
mini-css-extract-plugin：分离css文件
clean-webpack-plugin：删除打包文件
happypack：实现多线程加速编译
6）分别介绍bundle，chunk，module是什么
bundle：是由webpack打包出来的文件，
chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割。
module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块。
7）什么是模块热更新
模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新
8）通过webpack处理长缓存
在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。
9）webpack-dev-server和http服务器如nginx有什么区别
webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，他比传统的http服务对开发更加简单高效。
10）如何提高webpack的构建速度
01 通过externals配置来提取常用库
02 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
03 使用Happypack 实现多线程加速编译
要注意的第一点是，它对file-loader和url-loader支持不好，所以这两个loader就不需要换成happypack了，其他loader可以类似地换一下
04 使用Tree-shaking和Scope Hoisting来剔除多余代码
05 使用fast-sass-loader代替sass-loader
06 babel-loader开启缓存
babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率
可以加上cacheDirectory参数或使用 transform-runtime 插件试试
07 不需要打包编译的插件库换成全局"script"标签引入的方式
比如jQuery插件，react, react-dom等，代码量是很多的，打包起来可能会很耗时
可以直接用标签引入，然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供给模块内部使用相应的变量
08 优化构建时的搜索路径
在webpack打包时，会有各种各样的路径要去查询搜索，我们可以加上一些配置，让它搜索地更快
比如说，方便改成绝对路径的模块路径就改一下，以纯模块名来引入的可以加上一些目录路径
还可以善于用下resolve alias别名 这个字段来配置
还有exclude等的配置，避免多余查找的文件，比如使用babel别忘了剔除不需要遍历的
出处：https://www.jianshu.com/p/bb1e76edc71e
6.正则
正则：也叫做规则，让计算机能够读懂人类的规则
1）常用方法
String对的方法
str.search(/表达式/) 返回匹配到的第一个位置
str.split(/表达式/)
str.match(/表达式/)
str.replace(/表达式/,'''')
RegExp对象方法
/表达式/.test(str) 返回布尔值
/表达式/.exec(str) 返回一个数组，存放匹配的结果，如果未找到匹配，则返回值为null
2）匹配手机号、邮箱、汉字、千分位
验证手机号：/^1[345789]\d{9}/.test(''15662173333'')
验证邮箱：/^\w+@[a-z0-9]+\.[a-z]+$/i
验证汉字：^[\u4e00-\u9fa5],{0,}$
实现千分位：/\B(?=(\d{3})+(?!\d))/g
7.性能优化
1）常用的性能优化方法
01.减少HTTP请求数量
001 将多张图片合并成一张图片
002 合并css和js文件
02.压缩js和css
03.css放顶部，js放底部
浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。
04.去除重复脚本
05.减少DOM操作
06.懒加载
07.减少重排（Reflow）
重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。
08.图标使用iconFont替换
2）输入url的加载过程
01.解析html文件，创建DOM树
自上而下解析，遇到任何样式（link、style）和脚本（script）都会阻塞
001 css加载不会阻塞html文件的解析，但会阻塞dom的渲染
002 css加载会阻塞后面js语句的执行
003 js会阻塞html的解析和渲染
004 没有defer和async标签的script会立即加载并执行
005 有async标签的js，js的加载执行和html的解析和渲染并行
006 有defer标签的js，js的加载和html的解析和渲染并行，但会在html解析完成后执行,在触发DOMContentLoaded事件前执行
007 DOMContentLoaded和onload的区别：DOMContentLoaded在html解析完毕后执行，loload在页面完全加载完成后执行（包括样式和图片）
02.解析css，生成CSSOM，css对象模型
03.dom和css合并，构建渲染树（Render Tree）
04.布局（Layout）和绘制（Paint），重绘（repaint）和重排（reflow/回流）
001 重绘：根据元素的新属性重新绘制，使元素呈现新的外观
002 重排：当渲染树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建
003 重排必定会引发重绘，但重绘不一定会引发重排
3）优雅降级和渐进增强
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
8.vue
1）生命周期
01 在 beforeCreate 钩子函数调用的时候，是获取不到 props 或者 data 中的数据的，因为这些数据的初始化都在 initState 中。然后会执行 created 钩子函数，在这一步的时候已经可以访问到之前不能访问到的数据，但是这时候组件还没被挂载，所以是看不到的。
02 接下来会先执行 beforeMount 钩子函数，开始创建 VDOM，最后执行 mounted 钩子，并将 VDOM 渲染为真实 DOM并且渲染数据。组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件全部挂载完毕，才会执行根组件的挂载钩子。
03 接下来是数据更新时会调用的钩子函数 beforeUpdate 和 updated，分别在数据更新前和更新后会调用。
04 另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated钩子函数，命中缓存渲染后会执行 actived 钩子函数。
05 最后就是销毁组件的钩子函数 beforeDestroy 和destroyed。前者适合移除事件、定时器等等，否则可能会引起内存泄露的问题。
2）常用指令
v-if v-else v-show v-for v-model v-on v-bind v-html
3）组件通
父子间：prod emit
祖父组件和孙组件：$attr和$listeners
其他组件：bus或者vuex
4）watch和computed和method的区别
methods VS computed
对于最终的结果，两种方式确实是相同的。不同的是computed是基于它们的依赖进行缓存的。computed只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比而言，只要发生重新渲染，method 调用总会执行该函数。总之，重新计算开销很大的话请选computed，不希望有缓存的请选methods。
watch VS computed
当你在模板内使用了复杂逻辑的表达式时，你应当使用computed。
watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch
5）vue-router 原理 传参 模式
原理：本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面。
传参：query、params、prods、直接跟在URL后面
模式：Hash 和 istory
Hash 模式只可以更改 # 后面的内容，History 模式可以通过 API 设置任意的同源 URL
History 模式可以通过 API 添加任意类型的数据到历史记录中，Hash 模式只能更改哈希值，也就是字符串
Hash 模式无需后端配置，并且兼容性好。History 模式在用户手动输入地址或者刷新页面的时候会发起 URL 请求，后端需要配置 index.html 页面用于匹配不到静态资源的时候
6）vuex
state getters mutations（应用于同步，commit触发） actions（应用于异步，dispatch触发）
7）mixins
mixins 应该是我们最常使用的扩展组件的方式了。如果多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过 mixins 混入代码。mixins 混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并
8）keep-alive 组件有什么作用
如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。
9）响应式原理
01.vue将data初始化为一个Observer并对对象中的每个值，重写了其中的get、set，data中的每个key，都有一个独立的依赖收集器。
02.在get中，向依赖收集器添加了监听
03.在mount时，实例了一个Watcher，将收集器的目标指向了当前Watcher
04.在data值发生变更时，触发set，触发了依赖收集器中的所有监听的更新，来触发Watcher.update
10）NextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
11）vue react angular 的区别
vue:
优点：
a.简单，容易上手
b.轻量级的框架，且没有依赖
c.能快速的更新dom
d.对模块友好，可以通过npm、bower安装
e.可复用的组件
f.双向数据绑定
缺点：
a.没有angular那么成熟
b.不支持IE8以下
angular：
优点：
a.双向数据绑定
b.模版动能强大，指令丰富
c.可以复用的自定义指令
d.比较完善，包含模版、模块化、路由、过滤器、依赖注入等
e.组件化
缺点：
a.过于臃肿
b.什么都要依赖注入
react：
优点：
a.速度快，通过虚拟DOM更新实际DOM
b.浏览器兼容性好
c.组件化
d.对SEO友好
e.单向响应数据流
缺点：
a.只是个视图，并不完整，如果是大型项目需要配合其它框架，如react-router和readux
12）vue虚拟dom原理
Virual DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用虚拟dom进行diff，算出最小差异，然后再修改真实dom。
优点：
01 将 Virtual DOM 作为一个兼容层，让我们还能对接非 Web 端的系统，实现跨端开发。
02 同样的，通过 Virtual DOM 我们可以渲染到其他的平台，比如实现 SSR、同构渲染等等。
03 实现组件的高度抽象化
缺点：
01. 代码更多，体积更大
02. 内存占用增大
03. 小量的单一的dom修改使用虚拟dom成本反而更高，不如直接修改真实dom快
13）在vue中如何操作dom
使用ref
14）对MVVM的理解
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。
ViewModel是Vue的核心，它是Vue的一个实例。Vue实例是作用在某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。 DOM Listeners和DataBindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；DataBindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
今天的关于前端面试准备笔记之html和css(03)和前端面试css问题的分享已经结束，谢谢您的关注，如果想了解更多关于2017 前端面试准备 - 收藏集 - 掘金、2018前端面试准备、2019前端面试之html5、2019前端面试准备的相关知识，请在本站进行查询。
本文标签：
