面试准备
HTML
1.浏览器页面有哪三层构成，分别是什么，作用是什么?
结构层、表示层、行为层（HTML/CSS/JS）
2.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）
回答1： （1）、 声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
3.HTML5有哪些新特性、移除了哪些元素？
Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
结构性元素主要负责web上下文结构的定义
section：在 web 页面应用中，该元素也可以用于区域的章节描述。
header：页面主体上的头部， header 元素往往在一对 body 元素中。
footer：页面的底部（页脚），通常会标出网站的相关信息。
nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。
article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分，确保内容的有效分割。
aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。
code：表示一段代码块。
dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
meter：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值。
progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
command：用来处理命令按钮。
4.你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
a、 IE: trident 内核
b、 Firefox ： gecko 内核
c、 Safari:webkit 内核
d、 Opera: 以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核
e、 Chrome:Blink( 基于 webkit ， Google 与 Opera Software 共同开发 )
5.HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?
(1)行内元素
a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体 ( 不推荐 )
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码 ( 在引用源码的时候需要 )
* dfn - 定义字段
* em - 强调
* font - 字体设定 ( 不推荐 )
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线 ( 不推荐 )
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
(2)块元素 (block element)
* address - 地址
* blockquote - 块引用
* center - 居中对齐块
* dir - 目录列表
* div - 常用块级容易，也是 css layout 的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块 (map)
* object - object对象
* script - 客户端脚本
(3)空元素 ( 在 HTML[1] 元素中，没有内容的 HTML 元素被称为空元素 )
<br/> //换行
<hr> //分隔线
<input> //文本框等
<img> //图片
<link> <meta>
6.请你描述一下 cookies，sessionStorage 和 localStorage 的区别?cookie、session？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
简而言之，sessionStorage : 是浏览器关闭即结束存储； localStorage : 永久存储，除非手动删除； cookie : 存储量比较小，会传到服务器，其余俩个不会。
2. 思考一下服务端如何识别特定的客户？这个时候Cookie就登场了。每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie 来实现Session跟踪的，第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Session ID，以后每次请求把这个会话ID发送到服务器，我就知道你是谁了。有人问，如果客户端的浏览器禁用了 Cookie 怎么办？一般这种情况下，会使用一种叫做URL重写的技术来进行会话跟踪，即每次HTTP交互，URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户。
3. Cookie其实还可以用在一些方便用户的场景下，设想你某次登陆过一个网站，下次登录的时候不想再次输入账号了，怎么办？这个信息可以写到Cookie里面，访问网站的时候，网站页面的脚本可以读取这个信息，就自动帮你把用户名给填了，能够方便一下用户。这也是Cookie名称的由来，给用户的一点甜头。
所以，总结一下：
Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。
7.说说你对HTML语义化的理解?
(1)什么是 HTML 语义化？
<基本上都是围绕着几个主要的标签，像标题（ H1~H6 ）、列表（ li ）、强调（ strong em ）等等 >
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
(2)为什么要语义化？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；
用户体验：例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
(3) 语义化标签
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> SM:用来在页面中表示一套结构完整且独立的内容部分
<aslde></aside> SM:主题的附属信息 ( 用途很广，主要就是一个附属内容 ) ，如果 article 里面为一篇文章的话，那么文章的作者以及信息内容就是这篇文章的附属内容了
<figure></figure>SM:媒体元素，比如一些视频，图片啊等等
<datalist></datalist>
SM:选项列表，与 input 元素配合使用，来定义 input 可能的值
<details></details>
SM:用于描述文档或者文档某个部分的细节 ~ 默认属性为 open~
ps:配合 summary 一起使用
8.link和@import的区别?
XML/HTML代码
<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />
XML/HTML代码
<style type='text/css' media='screen'>
@import url('CSS文件 ');
</style>
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。
9.HTML5 应用程序缓存和浏览器缓存有什么区别？
应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML 、 CSS 、图片以及 JavaScript 。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：
<!doctype html>
<html manifest=”example.appcache”>
…..
</html>
与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。
10.css选择器
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:hover, li:nth-child）
选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级
11.常见浏览器兼容问题与解决方案
(1)浏览器兼容问题一：不同浏览器的标签默认的padding不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里 *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
(2)浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
12.block、inline、inline-block区别
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。父元素没内容会高度塌陷，可以设置高度来解决
(1)、使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
(2)、使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto;
(3)、使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
13.请你说说em与rem的区别？
rem
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的天猫tmall就使用这种办法
em
文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)
em（font size of the element）是指相对于父元素的字体大小的单位。它与rem之间其实很相似，区别在。（相对是的HTML元素的字体大，默认16px）
em与rem的重要区别： 它们计算的规则一个是依赖父元素另一个是依赖根元素计算
14.内联与块级标签有何区别？
行内元素不独占一行，设置宽度和高度无效，垂直方向上的margin，padding设置无效。
15.如何解决多个元素重叠问题？
z-index属性，整数数字大的显示在上面
16.http和https
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
Https加密
对称加密和非对称加密结合方式
浏览器使用Https的URL访问服务器，建立SSL链接。
服务器收到SSL链接，发送非对称加密的公钥A返回给浏览器
浏览器生成随机数，作为对称加密的密钥B
浏览器使用公钥A，对自己生成的密钥B进行加密，得到密钥C
浏览器将密钥C，发送给服务器。
服务器用私钥D对接受的密钥C进行解密，得到对称加密钥B。
浏览器和服务器之间可以用密钥B作为对称加密密钥进行通信。
17.http请求方式
2.Get：向特定资源发出请求（请求指定页面信息，并返回尸体主题）
3.Post：向指定资源提交数据进行处理请求（提交表单、上传文件），有可能导致新的资源的建立或原有资源的修改
4.Put 向指定资源位置上上传其最新内容（从客户端向服务器传送的数据取代指定文档的内容）
5.Head 与服务器索与get请求一致的相应，响应体不会返回，获取包含在消息头中额度原信息（与get请求类似，返回的相应中没有具体内容，用于获取报头）
6.Delect 请求服务器删除request-URL所标示的资源（请求服务器删除页面）
7.Trace 回显服务器收到的请求，用于测试和诊断
8.Connect HTTP/1.1协议中能够将连接改为管道方式的代理服务器
18.BOM属性对象方法
(1)location对象
location.href-- 返回或设置当前文档的URL
location.search -- 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash -- 返回URL#后面的内容，如果没有#，返回空
location.host -- 返回URL中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL中的主域名部分，例如dreamdu.com
location.pathname -- 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol -- 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() -- 重载当前页面
(2)history对象
history.go() -- 前进或后退指定的页面数 history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页
(3)Navigator对象
navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie
19.说一下web worker
如何创建web worker：
检测浏览器对于web worker的支持性
创建web worker文件（js，回传函数等）
创建web worker对象
20.GET和POST的区别
get请求在url中传递的参数是有长度限制的，而post没有。
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式
get请求会浏览器主动cache，而post支持多种编码方式。
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET产生一个TCP数据包；POST产生两个TCP数据包。
21.浏览器缓存
强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。
协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match
-
浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
-
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
1.Expires（http1.0）
缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。
2.Cache-Control（http1.1）
cache-control可以组合多种指令，常见的有max-age、public、no-cache、no-store等等
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：如果协商缓存生效，服务器返回304notmodified
1.Last-Modified和If-Modified-Since
浏览器下一次请求这个资源，浏览器检测到有 Last-Modified这个header，于是添加If-Modified-Since这个header，值就是Last-Modified中的值；服务器再次收到这个资源请求，会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，如果没有变化，返回304和空的响应体，直接从缓存读取，如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间，说明文件有更新，于是返回新的资源文件和200
2.ETag和If-None-Match
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致
1.首先在浏览器地址栏中输入url
2.浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，直接显示页面内容；如果没有，跳到第三步；
3.域名解析，获取相应的IP地址
4.浏览器向服务器发送tcp连接，与浏览器建立三次握手
5.发送HTTP请求
6.服务器处理请求并返回HTTP报文
7.浏览器解析渲染页面
23.Cookie和Session的认知，Cookie有哪些限制？
2. cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
24.css flex布局
25.js动画和css动画
26.visibility=hidden, opacity=0，display:none差别
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
1、浏览器不会生成属性为display: none;的元素。
2、display: none;不占据空间（毕竟都不熏染啦），所以动态改变此属性时会引起重排。
27.元素垂直居中
参考回答：
法二：元素绝对定位，top:50%，margin-top：-（高度/2）
法三：高度不确定用transform：translateY（-50%）
法四：父元素table布局，子元素设置vertical-align:center;
28.css内容溢出
text-overflow属性，值为clip是修剪文本；ellipsis为显示省略符号来表被修剪的文本；string为使用给定的字符串来代表被修剪的文本。
overflow-x/overflow-y:
visible:默认值。表示不剪切容器中的任何内容，不添加滚动条，元素将被剪切为包含对象的窗口大小，而且clip属性将失效
auto：在需要时剪切内容并添加滚动条，
hidden：内容溢出容器时，所有内容都将隐藏，而且不显示滚动条
scroll：不管内容有没有溢出容器，overflow-x都会显示横向滚动条，overflow-y都会显示纵向滚动条
no-display：当内容溢出容器时不显示内容，此时类似于添加了display：none、
no-content：当内容溢出容器时不显示内容，类似于添加了visibility：hidden；
29.inline-block、inline和block的区别；为什么img是inline还可以设置宽高
Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符
Inline-block：能设置宽度高度，margin/padding水平垂直方向 都有效，前后无换行符.img既是行内元素 又是置换元素（Replaced element） 。 所谓置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
30.css硬币旋转效果
31.说说盒子模型
标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
怪异盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
32.相对布局和绝对布局，position:relative和obsolute。
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
33.css预处理器有什么
less,sass
34.类的创建和继承
35.回调地狱怎么解决
promise、generator、async/await
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数，只会还可以用ten/catch进行
36.前端中的事件流
事件流是浏览器中页面接收到事件的顺序，首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。
接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。
37.事件委托
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。
38.图片懒加载，预加载
39.mouseover和mouseenter的区别
mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
40.js new操作做了什么事情
41.改变函数内部this指针的指向函数（bind，apply，call的区别）
通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。
42.js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
offsetHeight：表示可视区域的高度，包含了border和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框border的厚度，在未指定的情况下一般为0
scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。
43.js拖拽功能的实现
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。需要的朋友可以参考下 如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 1.onmousedown：鼠标按下事件 2.onmousemove：鼠标移动事件 3.onmouseup：鼠标抬起事件 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
44.ajax解决浏览器缓存问题
在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
在URL后面加上一个随机数： "fresh=" + Math.random()。
在URL后面加上时间搓："nowtime=" + new Date().getTime()。
如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。
45.垃圾回收机制
分代回收，2、增量GC，目的是通过对象的使用频率，存在时长来区分新生代和老生代对象，多回收新生代区，少回收老生代区，减少每次遍历的时间，从而减少GC的耗时
回收方法：
引用计次，当对象被引用的次数为零时进行回收，但是循环引用时，两个对象都至少被引用了一次，因此导致内存泄漏，
标记清除
46.对象深度克隆
function deepClone(obj){
var newObj= obj instanceof Array ? []:{};
for(var item in obj){
var temple= typeof obj[item] == 'object' ? deepClone(obj[item]):obj[item];
newObj[item] = temple;
}
return newObj;
}
47.将原生的ajax封装成promise
48.两列等高布局
49.js控制一次加载一张图片
<script type="text/javascript"> var obj=new Image(); obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg"; obj.onload=function(){
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>
50.进程和线程
线程，是进程的一部分，一个没有线程的进程可以被看作是单线程的。线程有时又被称为轻权进程或轻量级进程，也是 CPU 调度的一个基本单位。
51.token
52.跨域解决办法
1.通过使用Jsonp解决跨域问题.
JSONP：即JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧方案。
<script src="http://api.douban.com/v2/movie/top250?callback=test"></script>
JSONP需要后端配合返回指定格式的数据。
2.CORS，服务器配置服务端文件加上header('Access-Control-Allow-Origin: *');
3.服务器反向代理
location.hash
Window.name
postMessage
53.tcp、udp、四次挥手
54.vue双向绑定原理
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)
55.Fetch和Ajax比有什么优缺点？
56.ajax返回的状态
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
57.事件循环
58.promise
59.arguments
60.箭头函数和function的区别
let func = value => value;
相当于
let func = function (value) {
return value;
};
箭头函数与普通函数的区别在于：
1、箭头函数没有this，所以需要通过查找作用域链来确定this的值，这就意味着如果箭头函数被非箭头函数包含，this绑定的就是最近一层非箭头函数的this，
2、箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象
3、不能通过new关键字调用，同样也没有new.target值和原型
61.js轮播实现
如果有两个轮播，可封装一个轮播组件，供两处调用
62.promise和await/async的关系
63.转换下划线命名到驼峰命名
64.vue生命周期
Vue实例有一个完整的生命周期，也就是从开始创建(new Vue())、初始化数据、编译模板、挂载Dom(mounted)、渲染→更新→渲染(updated)、销毁等一系列过程(onDestory)，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
65.说一下什么是virtual dom
用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
66.js语言的特性
1.获取当前时间
var myDate = new Date();
2.获取时间中的年月日时分秒
myDate.getYear(); // 获取当前年份(2位) myDate.getFullYear(); // 获取完整的年份(4位,1970-????) myDate.getMonth(); // 获取当前月份(0-11,0代表1月) myDate.getDate(); // 获取当前日(1-31) myDate.getDay(); // 获取当前星期X(0-6,0代表星期天) myDate.getTime(); // 获取当前时间(从1970.1.1开始的毫秒数) myDate.getHours(); // 获取当前小时数(0-23) myDate.getMinutes(); // 获取当前分钟数(0-59) myDate.getSeconds(); // 获取当前秒数(0-59) myDate.getMilliseconds(); // 获取当前毫秒数(0-999) myDate.toLocaleDateString(); // 获取当前日期 var mytime=myDate.toLocaleTimeString(); // 获取当前时间 myDate.toLocaleString( ); // 获取日期与时间
69.map.(parseInt)方法详解
70.img的属性alt 与 title的区别
在HTML文档编辑img标签中，alt即是起到替代img无法显示时候的描述作用，告诉人这里是什么；而title是对图片进行描述的主题，无论图片是否显示，只要有img标签存在，当鼠标指到img所在位置时，title内容就会浮现
71.html标签 —— 块级元素
72.event对象中 target和currentTarget 属性的区别。
通过event.target可以获得触发事件的元素；event.currentTarget返回绑定事件的元素
https://www.cnblogs.com/yzhihao/p/9398917.html
