Z_Xshan

web前端面试题（必背面试题）

css系列

面试官：说说你对盒子模型的理解

一、是什么

所有元素都可以有像盒子一样的平面空间和外形

一个盒子由四部分组成：context ,padding,margin,border

content：实际内容，显示文本和图像

padding:内边距，清除内容周边的区域，内边距是透明的，不能取负值，受盒子的background属性影响

margin:外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

下面来段代码：



  盒子模型

当我们在浏览器查看元素时，却发现元素的大小变成了240px

这是因为，在CSS中，盒子模型可以分成：

W3C 标准盒子模型
IE 怪异盒子模型

默认情况下，盒子模型为W3C 标准盒子模型

二、标准盒子模型

标准盒子模型，是浏览器默认的盒子模型

盒子总宽度 = width + padding + border + margin;
盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border值

所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

三、IE 怪异盒子模型

盒子总宽度 = width + margin;
盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值

Box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

box-sizing: content-box|border-box|inherit:

content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
inherit 指定 box-sizing 属性的值，应该从父元素继承

回到上面的例子里，设置盒子为 border-box 模型



  盒子模型

这时，盒子所占据的宽度为200px

面试官：css选择器有哪些？优先级？哪些属性可以继承？

一、选择器

CSS选择器是CSS规则的第一部分

它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

选择器所选择的元素，叫做“选择器的对象”

关于css属性选择器常用的有：

id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素

还有一些使用频率相对没那么多的选择器：

伪类选择器

:link ：选择未被访问的链接              
:visited：选取已被访问的链接            
:active：选择活动链接                   
:hover ：鼠标指针浮动在上面的元素        
:focus ：选择具有焦点的                 
:first-child：父元素的首个子元素

伪元素选择器

:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

属性选择器

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

在CSS3中新增的选择器有如下：

层次选择器（p~ul），选择前面有p元素的每个ul元素
伪类选择器

:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与  不匹配的所有元素

属性选择器

[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

二、优先级

!important >内联 > ID选择器 > 类选择器 > 标签选择器

三、继承属性

在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

关于继承属性，可以分成：

字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体

文本系列属性

text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

元素可见性

visibility

表格布局属性

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

列表属性

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

引用

quotes：设置嵌套引用的引号类型

光标属性

cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的

无继承的属性

display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after

面试官:元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

一、背景

在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素

居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类：

居中元素（子元素）的宽高已知
居中元素宽高未知

二、实现方式

实现元素水平垂直居中的方式：

利用定位+margin:auto
利用定位+margin:负值
利用定位+transform
table布局
flex布局
grid布局

利用定位+margin:auto

先上代码：

父级设置为相对定位，子级绝对定位，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高

这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了

利用定位+margin:负值

绝大多数情况下，设置父元素为相对定位，子元素移动自身50%实现水平垂直居中

初始位置为方块1的位置
当设置left、top为50%的时候，内部子元素为方块2的位置
设置margin为负数时，使内部子元素到方块3的位置，即中间位置

这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作

但是该方案需要知道子元素自身的宽高，但是我们可以通过下面transform属性进行移动

利用定位+transform

实现代码如下：

translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%

这种方法其实和最上面被否定掉的margin负值用法一样，可以说是margin负值的替代方案，并不需要知道自身元素的宽高

table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

flex弹性布局

还是看看实现的整体代码：

css3中了flex布局，可以非常简单实现垂直水平居中

这里可以简单看看flex布局的关键属性作用：

display: flex时，表示该容器内部的元素将按照flex进行布局
align-items: center表示这些元素将相对于本容器水平居中
justify-content: center也是同样的道理垂直居中

grid网格布局

这里看到，gird网格布局和flex弹性布局都简单粗暴

面试官：怎么理解回流跟重绘？什么场景下会触发？

一、是什么

在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变

当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来

当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了回流

二、如何触发

回流触发时机

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

还有一些容易被忽略的操作：获取一些特定属性的值

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流

除此还包括getComputedStyle方法，原理是一样的

重绘触发时机

触发回流一定会触发重绘

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）

除此之外还有一些其他引起重绘行为：

颜色的修改
文本方向的修改
阴影的修改

浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列

当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据

因此浏览器不得不清空队列，触发回流重绘来返回正确的值

三、如何减少

我们了解了如何触发回流和重绘的场景，下面给出避免回流的经验：

如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
避免设置多项内联样式
应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
避免使用 CSS 的 JavaScript 表达式

在使用 JavaScript 动态插入多个节点时, 可以使用DocumentFragment. 创建后一次插入. 就能避免多次的渲染性能

但有时候，我们会无可避免地进行回流或者重绘，我们可以更好使用它们

例如，多次修改一个把元素布局的时候，我们很可能会如下操作

const el = document.getElementById('el')
for(let i=0;i<10;i++) {
    el.style.top  = el.offsetTop  + 10 + "px";
    el.style.left = el.offsetLeft + 10 + "px";
}

每次循环都需要获取多次offset属性，比较糟糕，可以使用变量的形式缓存起来，待计算完毕再提交给浏览器发出重计算请求

// 缓存offsetLeft与offsetTop的值
const el = document.getElementById('el')
let offLeft = el.offsetLeft, offTop = el.offsetTop

// 在JS层面进行计算
for(let i=0;i<10;i++) {
  offLeft += 10
  offTop  += 10
}

// 一次性将计算结果应用到DOM上
el.style.left = offLeft + "px"
el.style.top = offTop  + "px"

我们还可避免改变样式，使用类名去合并样式

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

使用类名去合并样式

前者每次单独操作，都去触发一次渲染树更改（新浏览器不会），

都去触发一次渲染树更改，从而导致相应的回流与重绘过程

合并之后，等于我们将所有的更改一次性发出

我们还可以通过通过设置元素属性display: none，将其从页面上去掉，然后再进行后续操作，这些后续操作也不会触发回流与重绘，这个过程称为离线操作

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

离线操作后

let container = document.getElementById('container')
container.style.display = 'none'
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'
...（省略了许多类似的后续操作）
container.style.display = 'block'

面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？

一、是什么

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

描述响应式界面最著名的一句话就是“Content is like water”

大白话便是“如果将屏幕看作容器，那么内容就像水一样”

响应式网站常见特点：

同时适配PC + 平板 + 手机等
标签导航在接近手持终端设备时改变为经典的抽屉式导航
网站的布局会根据视口来调整模块的大小和位置

二、实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

媒体查询 
  CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表 
  使用@Media查询，可以针对不同的媒体类型定义不同的样式，如： 
  @media screen and (max-width: 1920px) { ... } 
  当视口在375px - 600px之间，设置特定字体大小18px 
  @media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
} 
  通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片 
  比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现 
  百分比 
  通过百分比单位 " % " 来实现响应式的效果 
  比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果 
  height、width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素： 
   
    子元素的top/left和bottom/right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度
  
    子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
  
    子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
  
    border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度
  
   
  可以看到每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式 
  vw/vh 
  vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一 
  与百分比布局很相似，在以前文章提过与%的区别，这里就不再展开述说 
  rem 
  在以前也讲到，rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px 
  可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值，如下： 
   
  @media screen and (max-width: 414px) {
  html {
    font-size: 18px
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 12px
  }
} 
  为了更准确监听设备可视窗口变化，我们可以在css之前插入script标签，内容如下： 
  //动态为根元素设置字体大小
function init () {
    // 获取屏幕宽度
    var width = document.documentElement.clientWidth
    // 设置根元素字体大小。此时为宽的10等分
    document.documentElement.style.fontSize = width / 10 + 'px'
}

//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init) 
  无论设备可视窗口如何变化，始终设置rem为width的1/10，实现了百分比布局 
  除此之外，我们还可以利用主流UI框架，如：element ui、antd提供的栅格布局实现响应式 
   三、总结 
  响应式布局优点可以看到： 
   
   面对不同分辨率设备灵活性强 
   能够快捷解决多设备显示适应问题 
   
  缺点： 
   
   仅适用布局、信息、框架并不复杂的部门类型网站 
   兼容各种设备工作量大，效率低下 
   代码累赘，会出现隐藏无用的元素，加载时间加长 
   其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 
   一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 
   
  面试官：如果要做优化，CSS提高性能的方法有哪些？ 
  一、前言 
  css主要是用来完成页面布局的，像一些细节或者优化， 
  减少css嵌套，最好不要套三层以上。 
  不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。 
  建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。 
  不用css表达式，css表达式对性能的浪费可能是超乎你的想象的 
  二、实现方式 
  实现方式有很多种，主要有如下： 
   
   内联首屏关键CSS 
   异步加载CSS 
   资源压缩 
   合理使用选择器 
   减少使用昂贵的属性 
   不要使用@import 
   
  内联首屏关键CSS 
  在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染 
  而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染 
  所以，CSS内联使用使渲染时间提前 
  注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式 
  异步加载CSS 
  在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容 
  前面加载内联代码后，后面的外部引用css则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下： 
  // 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling ); 
   
   
   设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS 
   
   
   
   通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet 
   
   
  资源压缩 
  利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间 
  合理使用选择器 
  css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下： 
   
   先找到h3标签元素 
   然后去除祖先不是.content的元素 
   最后去除祖先不是#markdown的元素 
   
  如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高 
  所以我们在编写选择器的时候，可以遵循以下规则： 
   
   不要嵌套使用过多复杂选择器，最好不要三层以上 
   使用id选择器就没必要再进行嵌套 
   通配符和属性选择器效率最低，避免使用 
   
  减少使用昂贵的属性 
  在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能 
  不要使用@import 
  css样式文件有两种引入方式，一种是link元素，另一种是@import 
  @import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时 
  而且多个@import可能会导致下载顺序紊乱 
  比如一个css文件index.css包含了以下内容：@import url("reset.css") 
  那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css 
  面试官:说说JavaScript中的数据类型？存储上的差别？ 
  js的数据类型分为两类，一个是基本数据类型，一个是引用数据类型 
  基本数据类型有undefined、null、boolean、number、string、symbol 
  引用数据类型有 object 
  在js的执行过程中，主要有三种数据类型内存空间，分别是代码空间，栈空间，堆空间，其中的代码空间主要是存储可执行代码的，原始类型的数据值都是直接保存在栈中的，引用数据类型的值是存放在堆空间中的， 原始数据类型存储的是变量的值，而引用数据类型存储的是其在堆空间中的地址 
  JavaScript系列  
  面试官:typeof 与 instanceof 区别 
  一、typeof 
  typeof 对于原始数据类型来说，除了null都可以正确的显示类型 
  使用方法如下： 
  typeof operand
typeof(operand) 
  operand表示对象或原始值的表达式，其类型将被返回 
  举个例子 
  typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof console // 'object'
typeof console.log // 'function' 
  从上面例子，前6个都是基础数据类型。虽然typeof null为object，但这只是JavaScript 存在的一个悠久 Bug，不代表null就是引用数据类型，并且null本身也不是对象 
  所以，null在 typeof之后返回的是有问题的结果，不能作为判断null的方法。如果你需要在 if 语句中判断是否为 null，直接通过===null来判断就好 
  同时，可以发现引用类型数据，用typeof来判断的话，除了function会被识别出来之外，其余的都输出object 
  如果我们想要判断一个变量是否存在，可以使用typeof：(不能使用if(a)， 若a未声明，则报错) 
  if(typeof a != 'undefined'){
    //变量存在
} 
   二、instanceof 
   instanceof 可以正确显示数据类型， 因为它是通过对象的原型链来进行判断的， 
  使用如下： 
  object instanceof constructor 
  object为实例对象，constructor为构造函数 
  构造函数通过new可以实例对象，instanceof能判断这个对象是否是之前那个构造函数生成的对象 
  // 定义构建函数
let Car = function() {}
let benz = new Car()
benz instanceof Car // true
let car = new String('xxx')
car instanceof String // true
let str = 'xxx'
str instanceof String // false 
   关于instanceof的实现原理，可以参考下面： 
  function myInstanceof(left, right) {
    // 这里先用typeof来判断基础数据类型，如果是，直接返回false
    if(typeof left !== 'object' || left === null) return false;
    // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
    let proto = Object.getPrototypeOf(left);
    while(true) {                  
        if(proto === null) return false;
        if(proto === right.prototype) return true;//找到相同原型对象，返回true
        proto = Object.getPrototypeof(proto);
    }
} 
   也就是顺着原型链去找，直到找到相同的原型对象，返回true，否则为false  
  三、区别  
  typeof与instanceof都是判断数据类型的方法，区别如下： 
   
    typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值
  
    instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型
  
    而typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断
  
   
  可以看到，上述两种方法都有弊端，并不能满足所有场景的需求 
  如果需要通用检测数据类型，可以采用Object.prototype.toString，调用该方法，统一返回格式“[object Xxx]”的字符串 
  如下 
  Object.prototype.toString({})       // "[object Object]"
Object.prototype.toString.call({})  // 同上结果，加上call也ok
Object.prototype.toString.call(1)    // "[object Number]"
Object.prototype.toString.call('1')  // "[object String]"
Object.prototype.toString.call(true)  // "[object Boolean]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call(null)   //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
Object.prototype.toString.call(/123/g)    //"[object RegExp]"
Object.prototype.toString.call(new Date()) //"[object Date]"
Object.prototype.toString.call([])       //"[object Array]"
Object.prototype.toString.call(document)  //"[object HTMLDocument]"
Object.prototype.toString.call(window)   //"[object Window]"
 
  了解了toString的基本用法，下面就实现一个全局通用的数据类型判断方法 
  function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    // 先进行typeof判断，如果是基础数据类型，直接返回
    return type;
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}
 
  使用如下 
  getType([])     // "Array" typeof []是object，因此toString返回
getType('123')  // "string" typeof 直接返回
getType(window) // "Window" toString返回
getType(null)   // "Null"首字母大写，typeof null是object，需toString来判断
getType(undefined)   // "undefined" typeof 直接返回
getType()            // "undefined" typeof 直接返回
getType(function(){}) // "function" typeof能判断，因此首字母小写
getType(/123/g)      //"RegExp" toString返回 
  面试官:说说你对闭包的理解？闭包使用场景 
  闭包就是可以访问其他函数内部变量的函数，我们通常用它来定义私有化的变量和方法，创建一个闭包最简单的方法就是在一个函数内创建一个函数，它有三个特性是 函数内可以再嵌套函数，内部函数可以访问外部的方法和变量，方法和变量不会被垃圾回收机制回收， 
  一、是什么 
  闭包最简单的方法就是在一个函数内创建一个函数，闭包让你可以在一个内层函数中访问到其外层函数的作用域 
  二、使用场景 
  任何闭包的使用场景都离不开这两点： 
   
   创建私有变量 
   延长变量的生命周期 
   
   
   一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在词法环境依然存在，以达到延长变量的生命周期的目的 
   
  创建私有变量：好比vue里的data 每个data都是一个闭包所以他们互不干扰 
  三、优缺点 
  它的优点就是可以实现封装和缓存，缺点就是可能会造成内存泄漏的问题 
  面试官：bind、call、apply 区别？如何实现一个bind? 
  关于call、apply、bind函数，它们主要用来改变this指向的 
  call的用法 
  fn.call(thisArg, arg1, arg2, arg3, ...) 
  调用fn.call时会将fn中的this指向修改为传入的第一个参数thisArg；将后面的参数传入给fn,并立即执行函数fn。 
  let obj = {
        name: "xiaoming",
        age: 24,
        sayHello: function (job, hobby) {
            console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);
        }
    }
    obj.sayHello('程序员', '看美女'); // 我叫xiaoming,今年24岁。我的工作是: 程序员，我的爱好是: 看美女。


    let obj1 = {
        name: "lihua",
        age: 30
    }
    // obj1.sayHello(); // Uncaught TypeError: obj1.sayHello is not a function
    obj.sayHello.call(obj1, '设计师', '画画'); // 我叫lihua,今年30岁。我的工作是: 设计师，我的爱好是: 画画。
 
  apply的用法 
  apply(thisArg, [argsArr]) 
  fn.apply的作用和call相同：修改this指向，并立即执行fn。区别在于传参形式不同，apply接受两个参数，第一个参数是要指向的this对象，第二个参数是一个数组，数组里面的元素会被展开传入fn,作为fn的参数。 
  bind的用法 
  bind(thisArg, arg1, arg2, arg3, ...) 
  fn.bind的作用是只修改this指向，但不会立即执行fn；会返回一个修改了this指向后的fn。需要调用才会执行:bind(thisArg, arg1, arg2, arg3, ...)()。bind的传参和call相同。 
  obj.sayHello.bind(obj1, '设计师', '画画'); // 无输出结果

obj.sayHello.bind(obj1, '设计师', '画画')(); // 我叫lihua,今年30岁。我的工作是: 设计师，我的爱好是: 画画。 
  bind、call、apply的区别 
  1、相同点
 三个都是用于改变this指向；
 接收的第一个参数都是this要指向的对象；
 都可以利用后续参数传参。
 2、不同点
 call和bind传参相同，多个参数依次传入的；
 apply只有两个参数，第二个参数为数组；
 call和apply都是对函数进行直接调用，而bind方法不会立即调用函数，而是返回一个修改this后的函数。  
  面试官：说说你对事件循环的理解 
  一、是什么 
  JavaScript是一门单线程的语言,在JavaScript中，所有的任务都可以分为 
   
    同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行
  
    异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等
  
   
  同步任务与异步任务的运行流程图如下： 
   
   从上面我们可以看到，同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就事件循环 
  二、宏任务与微任务 
  微任务 
  一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前 
  常见的微任务有： 
   
    Promise.then
  
    MutaionObserver
  
    Object.observe（已废弃；Proxy 对象替代）
  
    process.nextTick（Node.js）
  
   
  宏任务 
  宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合 
  常见的宏任务有： 
   
   script (可以理解为外层同步代码) 
   setTimeout/setInterval 
   UI rendering/UI事件 
   postMessage、MessageChannel 
   setImmediate、I/O（Node.js） 
   
  这时候，事件循环，宏任务，微任务的关系如图所示 
   
   三、async与await 
  async 
  async 是异步的意思，await则可以理解为 async wait。所以可以理解async就是用来声明一个异步方法，而 await是用来等待异步方法执行 
  async函数返回一个promise对象，下面两种方法是等效的 
  function f() {
    return Promise.resolve('TEST');
}

// asyncF is equivalent to f!
async function asyncF() {
    return 'TEST';
} 
  await 
  正常情况下，await命令后面是一个 Promise对象，返回该对象的结果。如果不是 Promise对象，就直接返回对应的值 
  async function f(){
    // 等同于
    // return 123
    return await 123
}
f().then(v => console.log(v)) // 123 
  不管await后面跟着的是什么，await都会阻塞后面的代码  
  async function fn1 (){
    console.log(1)
    await fn2()
    console.log(2) // 阻塞
}

async function fn2 (){
    console.log('fn2')
}

fn1()
console.log(3) 
  上面的例子中，await 会阻塞下面的代码（即加入微任务队列），先执行 async外面的同步代码，同步代码执行完，再回到 async 函数中，再执行之前阻塞的代码 
  所以上述输出结果为：1，fn2，3，2 
  面试官：DOM常见的操作有哪些？ 
  一、DOM 
  任何 HTML或XML文档都可以用 DOM表示为一个由节点构成的层级结构 
  
    
        content
    
 
  上述结构中，div、p就是元素节点，content就是文本节点，title就是属性节点 
  二、操作 
  DOM操作才能有助于我们理解框架深层的内容 
  下面就来分析DOM常见的操作，主要分为： 
   
   创建节点 
   查询节点 
   更新节点 
   添加节点 
   删除节点 
   
  创建节点 
  createEleme 
  创建新元素，接受一个参数，即要创建元素的标签名 
  const divEl = document.createElement("div"); 
  createTextNode 
  创建一个文本节点 
  const textEl = document.createTextNode("content"); 
  获取节点 
  querySelector 
  传入任何有效的css 选择器，即可选中单个 DOM元素（首个）： 
  document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span') 
  如果页面上没有指定的元素时，返回 null 
  关于获取DOM元素的方法还有如下，就不一一述说 
  document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');  仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');   返回所有匹配的元素
document.documentElement;  获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all[''];  获取页面中的所有元素节点的对象集合型 
  更新节点 
  innerHTML 
  不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树 
  // 获取...
var p = document.getElementById('p');
// 设置文本为abc:
p.innerHTML = 'ABC'; // ABC
// 设置HTML:
p.innerHTML = 'ABC RED XYZ';
// ...
的内部结构已修改 
  innerText、textContent 
  两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本 
   添加节点 
  innerHTML 
  如果这个DOM节点是空的，例如，
，那么，直接使用innerHTML = 'child'就可以修改DOM节点的内容，相当于添加了新的DOM节点 
  如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点 
  appendChild 
  把一个子节点添加到父节点的最后一个子节点 
  举个例子 
  
    JavaScript
    
        Java
        Python
        Scheme
    
    
     
   现在HTML结构变成了下面 
  

    Java
    Python
    Scheme
    JavaScript  
 
  上述代码中，我们是获取DOM元素后再进行添加操作，这个js节点是已经存在当前文档树中，因此这个节点首先会从原先的位置删除，再插入到新的位置 
  如果动态添加新的节点，则先创建一个新的节点，然后插入到指定的位置 
  const list = document.getElementById('list'),
const haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell); 
  insertBefore 
  把子节点插入到指定的位置，使用方法如下： 
  parentElement.insertBefore(newElement, referenceElement)
 
  子节点会插入到referenceElement之前 
  删除节点 
  删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉 
  // 拿到待删除节点:
const self = document.getElementById('to-be-removed');
// 拿到父节点:
const parent = self.parentElement;
// 删除:
const removed = parent.removeChild(self);
removed === self; // true 
  删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置 
  面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？ 
  一、是什么  
  BOM (Browser Object Model)，浏览器对象模型，提供了内容与浏览器窗口进行交互的对象 
   其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新 
   二、window 
  Bom的核心对象是window，它表示浏览器的一个实例 
  在浏览器中 即是浏览器窗口的一个接口，又是全局对象 
  三、location 
  window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。 
  四、navigator  
  navigator 对象主要用来获取浏览器的属性，区分浏览器类型。属性较多，且兼容性比较复杂 
   五、screen 
  保存的是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度 
  六、history 
  history对象主要用来操作浏览器URL的历史记录，可以通过参数向前，向后，或者向指定URL跳转 
  面试官：Javascript本地存储的方式有哪些？区别及应用场景？ 
  javaScript本地缓存的方法我们主要讲述以下四种： 
   
   cookie 
   sessionStorage 
   localStorage 
   indexedDB 
   
  cookie 
  Cookie，用户发送请求时会携带cookie到服务端，服务端会判断cookie来识别用户，cookie存储一般不超过 4KB 的小型文本数据，但是cookie在每次请求中都会被发送，如果不使用 HTTPS并对其加密，其保存的信息很容易被窃取， 
  localStorage 
  HTML5新方法，IE8及以上浏览器都兼容 
  特点 
   
   生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的 
   存储的信息在同一域中是共享的 
   当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。 
   大小：5M（跟浏览器厂商有关系） 
   localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡 
   受同源策略的限制 
   
  sessionStorage 
  sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据 
  扩展的前端存储方式  
  indexedDB是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。 
  面试官：什么是防抖和节流？有什么区别？如何实现？ 
  一、是什么 
  本质上是优化高频率执行代码的一种手段 
  为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率 
  定义 
   
   节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效 
   防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时 
   
  一个经典的比喻: 
  电梯第一个人进来后，15秒后准时运送一次，这是节流 
  电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖 
  二、区别 
  相同点： 
   
   都可以通过使用 setTimeout 实现 
   目的都是，降低回调执行频率。节省计算资源 
   
  不同点： 
   
   函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能 
   函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次 
   
  面试官:如何通过js判断一个数组？ 
  1.通过instanceof判断 
  instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置，返回一个布尔值 
   
    2.通过constructor判断 
  实例的构造函数属性constructor指向构造函数，通过constructor属性可以判断是否为一个数组 
    3.通过Object.prototype.toString.call()判断 
  Object.prototype.toString.call()可以获取到对象的不同类型 
   
    4.通过Array.isArray()判断 
  Array.isArray()用于确定传递的值是否是一个数组，返回一个布尔值 
   
   面试官：说说你对作用域链的理解？ 
   一、作用域 
  我们一般将作用域分成： 
   
    全局作用域
  
    函数作用域
  
    块级作用域
  
   
  二、作用域链 
   function fn(){
            let age=18;
            function inner(){
                // 函数内访问变量时，优先使用自己内部声明变量
                // 如果没有，尝试访问外部函数作用域的变量
                // 如果外部函数作用域也没有这个变量，继续往下找
                // 知道找到全局，如果全局都没有，就报错
                let count=100;
                console.log(count);
                console.log(age);
                console.log(name);
            }
            inner()
        }
        fn() 
  如上图： 
   
   inner函数访问自身的变量时，没有找到。则访问外部中的变量，还是没有找到就往全局找 
   这样一层一层形成的链叫做作用域链 
   当然全局还没有找到最外面一层是null 会报错 
   
  面试官：什么是浏览器缓存？ 
  浏览器缓存就是把一个已经请求过的web资源（如html页面，图片，JS，数据）拷贝一份放在浏览器中。缓存会根据进来的请求保存输入内容的副本。当下一个请求到来的时候，如果是相同的URL，浏览器会根据缓存机制决定是直接使用副本响应访问请求还是向源服务器再次发起请求。 
  使用缓存的原因 
  （1）减少网络带宽消耗 
  （2）降低服务器压力 
  （3）减少网络延迟 
  浏览器的缓存机制 
  过期机制：指的是缓存副本的有效期。一个缓存的副本必须满足以下条件，浏览器会认为它是有效的，足够新的： 
  1.含有完整的过期时间控制头信息（HTTP协议报头），并且仍在有效期内 
  2.浏览器已经使用过这个缓存的副本，并且会在一个会话中已经检查过新鲜度(即服务器上的资源是否发生改变)
 满足以上两种情况的一种，浏览器会直接从缓存中获取副本进行渲染 
  校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag),它可以用来作为浏览器再次请求过程中的校验标识，如果发现校验标识不匹配，说明资源已经被修改或者过期，浏览器需要重新获取资源内容。 
  浏览器缓存的控制 
  （1）使用meta标签
 Web开发者可以在HTML页面的节点中加入标签，代码如下： 
    
 
  上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器上拉取。但是这种禁用缓存的形式很有限：
 1.仅有IE才能识别这段meta标签的含义，其他主流浏览器仅识别”Cache-Control:no-store”的meta标签
 2.在IE中识别到该meta标签的含义，并不一定会在请求字段中加上Pragma,但的确会让当前页面每次都发起新请求（仅限页面，页面上的资源则不受影响） 
  (2)使用缓存有关的HTTP消息报头
 在HTTP请求和响应的消息报头中，常见与缓存有关的消息报头有： 
   
    
   不同字段间的比较： 
  在配置Last-Modified/Etag的情况下，浏览器再次访问统一的URI资源，还是会发送请求到服务器询问文件是否已经修改，如果没有，服务器只发送一个304给浏览器，告诉浏览器直接从自己的本地缓存取数据，如果修改过，那就将整个数据重新发送给浏览器。 
  Cache-Control/Expires则不同，如果检测到本地的缓存还在有效的时间范围内，浏览器直接使用本地副本，不会发送任何请求。两者一起使用的时候，Cache-Control/Expires的优先级要高于Last-Modified/Etag。 
  即当当地副本根据Cache-Control/Expires发现还在有效期内，则不会再次发送请求去服务器询问修改时间（Last-Modified）或者实体标识符(Etag)了。
 一般情况下，使用Cache-Control/Expires会配合Last-Modified/Etag一起使用，因为即使浏览器设置缓存时间，当用户点击“刷新”按钮时，浏览器会忽略缓存继续向服务器发送请求，这是Last-Modified/Etag将能够很好的利用304，从而减少响应开销。 
  浏览器向服务器请求资源的过程 
   
   关于缓存的两个概念 
   强缓存：
 用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为。
 协商缓存：
 用户发送请求，发送到服务器之后，由服务器判定是否从缓存中获取资源。
 两者共同点：客户端获取的数据最后都是熊客户端的缓存中取得。
 两者区别：从名字就可以看出，强缓存不与服务器发生交互，而协商缓存则需要需服务器发生交互。 
  面试官：什么是原型和原型链？ 
  一、原型 
   
   ①所有引用类型都有一个__proto__(隐式原型) 属性，属性值是一个普通对象 
   ②所有函数都有一个prototype(原型),属性值是一个普通对象 
   ③所有引用类型的__proto__属性指向他的构造函数的prototype 
   
  var a = [1,2,3];
a.__proto__ === Array.prototype; // true 
   二、原型链 
   
   当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。 
   
  举例，有以下代码 
  function Parent(month){
    this.month = month;
}

var child = new Parent('Ann');

console.log(child.month); // Ann

console.log(child.father); // undefined 
  在child中查找某个属性时，会执行下面步骤：  
   
   访问链路为： 
   
   
    ①一直往上层查找，直到到null还没有找到，则返回undefined
 ②Object.prototype.__proto__ === null
 ③所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象 
   
   面试官：JS中null和undefined的区别 
   
    相同点
 　if 判断语句中，两者都会被转换为false
     都是是 JavaScript 基本类型之一 
    不同点
  
   
              Number转换的值不同Number(null)输出为0, Number(undefined)输出为NaN 
  Undefined，当声明的变量还未被初始化时，变量的默认值为undefined。
 Null，null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。 
  面试官：JS中的“use strict” 严格模式 
   
   JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。 
   严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。 
   严格模式对正常的 JavaScript 语义做了一些更改： 
   消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
 消除代码运行的一些不安全之处，保证代码运行的安全。
 提高编译器效率，增加运行速度。
 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class,enum,export, extends, import, super 不能做变量名 
   
  面试官：同步与异步的区别 
  同步：同步是指一个进程在执行某个请求的时候，如果该请求需要一段时间才能返回信息，那么这个进程会一直等待下去，直到收到返回信息才继续执行下去。 
  异步：异步是指进程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态，当有信息返回的时候会通知进程进行处理，这样就可以提高执行的效率了，即异步是我们发出的一个请求，该请求会在后台自动发出并获取数据，然后对数据进行处理，在此过程中，我们可以继续做其他操作，不管它怎么发出请求，不关心它怎么处理数据。 
  打个比方：同步的时候，你在写程序，然后你妈妈叫你马上拖地，你就必须停止写程序然后拖地，没法同时进行。而异步则不需要按部就班，可以在等待那个动作的时候同时做别的动作，打个比方：你在写程序，然后你妈妈让你马上拖地，而这时你就贿赂你弟弟帮你拖地，于是结果同样是拖好地，你可以继续敲你的代码而不用管地是怎么拖 
  面试官：箭头函数与普通函数的区别 
  一，普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。 
  // 具名函数
function func(){
  // code
}
 
// 匿名函数
let func=function(){
  // code
}

// 箭头函数全都是匿名函数
let func=()=>{
  // code
} 
  二、箭头函数不能用于构造函数，不能使用new 
  普通函数可以用于构造函数，以此创建对象实例。 
  三、箭头函数中this的指向不同 
  在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。 
  箭头函数没有prototype(原型)，所以箭头函数本身没有this 
  箭头函数的this指向在定义的时候继承自外层第一个普通函数的this 
  面试官：JS 对象和数组的遍历方法，以及方式的比较 
  一、JS 遍历数组 
  1、for 循环遍历数组 
  // 1、for循环
let arr = ['d', 'a', 'w', 'n'];
for (let i = 0; i < arr.length; i++){
    console.log(arr[i]);
} 
  这种直接使用for循环的方法是最普遍的遍历数组和对象的方法； 
  2、使用for ……in 遍历数组 
  //2、for……in 循环
let arr = ['d', 'a', 'w', 'n'];
for (let key in arr) {
    console.log(arr[key]);
} 
  3、for……of 遍历数组 
  //3、for……of 遍历数组
let arr = ['d', 'a', 'w', 'n'];
for (let value of arr) {
    console.log(value);
} 
  es6新出的方法，for…of ，值得注意的是，for…of 和 for…in不一样，for…in是直接获取数组的索引，而for…of是直接获取的数组的值 
  ES6里引入了一种遍历器(Iterator)机制，为不同的数据结构提供统一的访问机制。只要部署了Iterator的数据结构都可以使用 for ··· of ··· 完成遍历操作 
  它既比传统的for循环简洁，同时弥补了forEach和for-in循环的短板。 
  循环遍历键值对的value，与for in遍历key相反 
  4、forEach 遍历数组 
  //4、forEach遍历数组
let arr = ['d', 'a', 'w', 'n'];
arr.forEach(function (k){
    console.log(k);
}) 
  forEach这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。 
  5、map遍历数组 
  // 5、map 遍历数组
let arr = ['d', 'a', 'w', 'n'];
let res = arr.map(function (item) {
    return item;
})
console.log(res); 
  总结： 
  for…in 遍历（当前对象及其原型上的）每一个key,而 for…of遍历（当前对象上的）每一个value;
 for in 以任意顺序遍历对象的可枚举属性，（最好不要用来遍历数组） 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for…of 循环) 。
 （ES6）for…of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。不能遍历普通对象
 forEach 遍历数组，而且在遍历的过程中不能被终止,必须每一个值遍历一遍后才能停下来
 二、JS 遍历对象 
  1、for……in 循环遍历对象 
  //1、for……in遍历对象
var obj = {
    name: 'dawn',
    age: 21,
    address:'深圳'
}
for (let key in obj) {
    console.log(key+':'+obj[key]);
} 
  2、Object.keys 遍历对象 
  //2、for……of遍历对象
var obj = {
    name: 'dawn',
    age: 21,
    address: '深圳'
}
for (let key of Object.keys(obj)) {
    console.log(key+':'+obj[key]);
} 
  【注意】：for…of不能单独来遍历对象，要结合Object.keys一起使用才行 
  Object.keys()方法会返回一个由一个指定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致。 
  3、Object.getOwnPropertyNames(obj) 遍历对象 
  //3、Object.getOwnPropertyNames(obj) 遍历对象
var obj = {
    name: 'dawn',
    age: 21,
    address: '深圳'
}
Object.getOwnPropertyNames(obj).forEach(function (key){
    console.log(key+':'+obj[key]);
}) 
  返回一个数组，包含对象自身的所有属性（包含不可枚举属性） 遍历可以获取key和value  
  面试官：如何解决跨域问题 
  一、什么是跨域?跨域是如何产生的? 
   
   同源策略: 
   
   
   浏览器内置的规则！是浏览器提供的一种安全机制，限制来自不同源的数据。如果当前页面的URL地址和Ajax的请求地址不同源，浏览器不允许得到服务器的数据； 
   
   
   同源:、 
   
   
   协议 http||https、域名和 port端口 都相同则同源，只要有一项不同就是不同源  不同源就跨域 
   
   二、如何解决跨域? 
  1.JSONP 
  注意： 
   
   JSONP和json没有任何关系
 JSONP需要前后台配合 
   
   1.实现原理: 
   
    
   **走获取文件资源script这个方式** 
   JSONP实现跨域请求的原理简单的说，就是动态创建


//数组的拷贝/合并


let aa = [1,2,3,4,5]
let bb = [...aa]
bb[1] = 999
console.log(bb)



let aa = [1,2,3,4,5]
let bb = [9,9,9]
console.log([...aa,...bb])


注意：


const arr1 = ['a', 'b',[1,2]];  //这里数组中的数组是浅拷贝，即拷贝的地址值
const arr2 = ['c'];
const arr3  = [...arr1,...arr2]
arr1[2][0] = 9999 // 修改arr1里面数组成员值
console.log(arr3) // 影响到arr3,['a','b',[9999,2],'c']


//扩展运算符可以与解构赋值结合起来，用于生成数组

//注：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错


const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []


//可以将字符串转化为真正的数组


console.log([..."hello"])


//定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组


let aa = new Map([
    ["name","貂蝉"],
    ["age",12],
    ["like","跳舞"]
])
console.log([...aa.keys()])


//如果对没有 Iterator 接口的对象，使用扩展运算符，将会报错


const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object


//补充：原生具备 Iterator 接口的数据结构如下。

- Array
- Map
- Set
- String
- TypedArray
- 函数的 arguments 对象
- NodeList 对象

### 2.构造函数新增的方法

1.Array.from()

将两类对象转为真正的数组：类似数组的对象和可遍历`（iterable）`的对象（包括 `ES6` 新增的数据结构 `Set` 和 `Map`）（对象也可以）


let aaa = new Map([
    ['name','貂蝉'],
    ["age",12],
    ["like","跳舞"]
])
console.log(Array.from(aaa))


2.Array.of()

//用于将一组值，转换为数组。

//注：

//没有参数的时候，返回一个空数组

//当参数只有一个的时候，实际上是指定数组的长度

//参数个数不少于 2 个时，`Array()`才会返回由参数组成的新数组


面试官：谈谈你对ES6的理解

新增模板字符串（为JavaScript提供了简单的字符串插值功能）
箭头函数
for-of（用来遍历数据—例如数组中的值。）
arguments对象可被不定参数和默认参数完美代替。
ES6将promise对象纳入规范，提供了原生的Promise对象。
增加了let和const命令，用来声明变量。
增加了块级作用域。
let命令实际上就增加了块级作用域。
还有就是引入module模块的概念

面试官：模块化
使用一个技术肯定是有原因的，那么使用模块化可以给我们带来以下好处

解决命名冲突
提供复用性
提高代码可维护性

立即执行函数

在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题

(function(globalVariable){
   globalVariable.test = function() {}
   // ... 声明各种变量、函数都不会污染全局作用域
})(globalVariable)
AMD 和 CMD
鉴于目前这两种实现方式已经很少见到，所以不再对具体特性细聊
CommonJS 
exports 和 module.exports 用法相似，但是不能对 exports 直接赋值。因为 var exports = module.exports 这句代码表明了 exports 和 module.exports享有相同地址，通过改变对象的属性值会对两者都起效，但是如果直接对 exports 赋值就会导致两者不再指向同一个内存地址，修改并不会对 module.exports 起效
// a.js
module.exports = {
    a: 1
}
// or
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1
ES Module

ES Module 是原生实现的模块化方案，与 CommonJS 有以下几个区别


CommonJS 支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案
CommonJS 是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
CommonJS 在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是 ES Module 采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
ES Module 会编译成 require/exports来执行的

// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}
扩展：vue3跳转路由实现动画效果
在router-view套上标签


      

 .v-enter, v-leave-to中的css一般相同，一个是进入时过渡（动画）的初始样式，一个是离开过渡（动画）结束时的样式。
.v-enter-active ，v-leave-active 中的css一般相同，一般都是用于定义过渡（动画）的过程时间，延迟和曲线函数。当然离开的过渡（动画）的过程时间，延迟和曲线函数和进入的可以是不同的。

面试官：Vue2和vue3的区别？

 在vue3中新增了composition-api,入口就是setup函数，在组件创建之前，props被解析之后执行
 
 在vue3中不在支持过滤器filters
 
 在vue3中移除了$on、$off、$once、$destroy方法
 
 自定以指令的命名必须v自定以指令名
 
 自定义指令的钩子函数新增了created、beforeUpdate、beforeUnmount,移除了update; bind---->beforeMount inseted--->mounted componentUpdated--->updated unbind---->unmounted
 
 全局属性的挂载和使用

 vue2可以直接在vue的原型上挂载
 
 vue3是app.config.globalProperites上挂载自定以属性
 
 通过引入getCurrentInstance函数中proxy来获取
 

 vue-router路由的使用

 编程式导航的路由跳转：引入了useRouter函数，通过函数的返回值调用push
 
 获取路由参数的时候引入了useRoute函数，通过useRoute函数获取
 

 vuex的使用

 创建store对象时，vue2是new Vue.Store(),vue3createStore()
 
 在组件中使用vuex中的state中的数据时，vue3中引入useStore函数
 


面试官：Symbol是什么，有什么作用？
Symbol是ES6引入的第七种原始数据类型（说法不准确，应该是第七种数据类型，Object不是原始数据类型之一，已更正），所有Symbol()生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问
// symbol第一种使用方法
        const level=Symbol('level')
        const student={
            name:'小明',
            age:2,
            [level]:'优秀'
        }
        for (let i in student){
            console.log(i); // name,age
        }

        // symbol第二种使用方法
        const students={
            name:'小黑',
            age:3,
            [Symbol('level')]:'游戏',
            [Symbol('level')]:'有钱',
        }
        // 如何获取symbol的值
        let symList=Object.getOwnPropertySymbols(students)
        console.log(symList,'ss');//[Symbol(level), Symbol(level)] 
        
        for (let i of symList){
            console.log(students[i]);//有钱，游戏
        }
        let list=[1,2,3,4,5,6]
        console.log(students[Symbol.iterator]); //undefined
        console.log(list[Symbol.iterator]);//ƒ values() { [native code] }
        // 如果对象有Symbol.iterator这个属性
        //这个对象就可以使用for...of遍历
题。对象中Symbol()属性不能被for...in遍历，但是也不是私有属性
面试官：Iterator迭代器

Iterator（迭代器）是一种接口，也可以说是一种规范。为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

 Iterator语法：
const obj = {
    [Symbol.iterator]:function(){}
}

[Symbol.iterator] 属性名是固定的写法，只要拥有了该属性的对象，就能够用迭代器的方式进行遍历。


迭代器的遍历方法是首先获得一个迭代器的指针，初始时该指针指向第一条数据之前，接着通过调用 next 方法，改变指针的指向，让其指向下一条数据
每一次的 next 都会返回一个对象，该对象有两个属性

value 代表想要获取的数据
done 布尔值，false表示当前指针指向的数据有值，true表示遍历已经结束


Iterator 的作用有三个：

创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
不断调用指针对象的next方法，直到它指向数据结构的结束位置。


每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。


对象没有布局Iterator接口，无法使用for of 遍历。下面使得对象具备Iterator接口


一个数据结构只要有Symbol.iterator属性，就可以认为是“可遍历的”
原型部署了Iterator接口的数据结构有三种，具体包含四种，分别是数组，类似数组的对象，Set和Map结构

为什么对象（Object）没有部署Iterator接口呢？

一是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定。然而遍历遍历器是一种线性处理，对于非线性的数据结构，部署遍历器接口，就等于要部署一种线性转换
对对象部署Iterator接口并不是很必要，因为Map弥补了它的缺陷，又正好有Iteraotr接口

面试题：Generator

Generator 是 ES6中新增的语法，和 Promise 一样，都可以用来异步编程。Generator函数可以说是Iterator接口的具体实现方式。Generator 最大的特点就是可以控制函数的执行。


function* 用来声明一个函数是生成器函数，它比普通的函数声明多了一个*,*的位置比较随意可以挨着 function 关键字，也可以挨着函数名
yield 产出的意思，这个关键字只能出现在生成器函数体内，但是生成器中也可以没有yield 关键字，函数遇到 yield 的时候会暂停，并把 yield 后面的表达式结果抛出去
next作用是将代码的控制权交还给生成器函数

function *foo(x) {
  let y = 2 * (yield (x + 1))
  let z = yield (y / 3)
  return (x + y + z)
}
let it = foo(5)
console.log(it.next())   // => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}
上面这个示例就是一个Generator函数，我们来分析其执行过程：

首先 Generator 函数调用时它会返回一个迭代器
当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield (x + 1) 处，所以返回 5 + 1 = 6
当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参，yield 永远返回 undefined。此时 let y = 2 * 12，所以第二个 yield 等于 2 * 12 / 3 = 8
当执行第三次 next 时，传入的参数会传递给 z，所以 z = 13, x = 5, y = 24，相加等于 42

yield实际就是暂缓执行的标示，每执行一次next()，相当于指针移动到下一个yield位置



总结一下，Generator函数是ES6提供的一种异步编程解决方案。通过yield标识位和next()方法调用，实现函数的分段执行

遍历器对象生成函数，最大的特点是可以交出函数的执行权

function 关键字与函数名之间有一个星号；
函数体内部使用 yield表达式，定义不同的内部状态；
next指针移向下一个状态


这里你可以说说 Generator的异步编程，以及它的语法糖 async 和 awiat，传统的异步编程。ES6 之前，异步编程大致如下


回调函数
事件监听
发布/订阅


传统异步编程方案之一：协程，多个线程互相协作，完成异步任务。

// 使用 * 表示这是一个 Generator 函数
// 内部可以通过 yield 暂停代码
// 通过调用 next 恢复执行
function* test() {
  let a = 1 + 2;
  yield 2;
  yield 3;
}
let b = test();
console.log(b.next()); // >  { value: 2, done: false }
console.log(b.next()); // >  { value: 3, done: false }
console.log(b.next()); // >  { value: undefined, done: true }
从以上代码可以发现，加上 *的函数执行后拥有了 next 函数，也就是说函数执行后返回了一个对象。每次调用 next 函数可以继续执行被暂停的代码。以下是 Generator 函数的简单实现
// cb 也就是编译过的 test 函数
function generator(cb) {
  return (function() {
    var object = {
      next: 0,
      stop: function() {}
    };

    return {
      next: function() {
        var ret = cb(object);
        if (ret === undefined) return { value: undefined, done: true };
        return {
          value: ret,
          done: false
        };
      }
    };
  })();
}
// 如果你使用 babel 编译后可以发现 test 函数变成了这样
function test() {
  var a;
  return generator(function(_context) {
    while (1) {
      switch ((_context.prev = _context.next)) {
        // 可以发现通过 yield 将代码分割成几块
        // 每次执行 next 函数就执行一块代码
        // 并且表明下次需要执行哪块代码
        case 0:
          a = 1 + 2;
          _context.next = 4;
          return 2;
        case 4:
          _context.next = 6;
          return 3;
		// 执行完毕
        case 6:
        case "end":
          return _context.stop();
      }
    }
  });
}
面试官：H5新增了哪些特性

1.语义化标签
 HTML5新增的语义化标签主要有：
 
、、、、、、
 2.form表单增强
 Input的type新属性：number、data、month、week、time、email、url、color等；
 Input标签新增加的特有属性
 3.视频和音频
 
面试官： 介绍一下grid网格布局

Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列，如一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的。
 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。
 总体兼容性还不错。
 同样，Grid 布局属性可以分为两大类：
 容器属性，
 项目属性


关于容器属性有如下：

1.display：文章开头讲到，在元素上设置display：grid 或 display：inline-grid 来创建一个网格容器
 display：grid 则该容器是一个块级元素
 display: inline-grid 则容器元素为行内元素
2.grid-template-columns 属性，grid-template-rows 属性
 grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高
3.grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
 grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式
 grid-row-gap: 10px 表示行间距是 10px
 grid-column-gap: 20px 表示列间距是 20px
 grid-gap: 10px 20px 等同上述两个属性
4.grid-template-areas 属性
 用于定义区域，一个区域由一个或者多个单元格组成
 grid-template-areas: 'a a a'
                      'b b b'
                      'c c c';
5.grid-auto-flow 属性
 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
6.justify-items 属性， align-items 属性， place-items 属性
 justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）
 .container {
   justify-items: start | end | center | stretch;
   align-items: start | end | center | stretch;
 }
7.justify-content 属性， align-content 属性， place-content 属性
 justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）
 .container {
   justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
   align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
 }
8.grid-auto-columns 属性和 grid-auto-rows 属性
 有时候，一些项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格
 比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。超出的部分就是隐式网格
 而grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高


 关于项目属性，有如下：

1.grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性
 grid-column-start 属性：左边框所在的垂直网格线
 grid-column-end 属性：右边框所在的垂直网格线
 grid-row-start 属性：上边框所在的水平网格线
 grid-row-end 属性：下边框所在的水平网格线
例子：
 
 
 

     1

     2

     3

 

2.grid-area 属性
 grid-area 属性指定项目放在哪一个区域，与上述讲到的grid-template-areas搭配使用。
3.justify-self 属性、align-self 属性以及 place-self 属性
 justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
 align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
 .item {
   justify-self: start | end | center | stretch;
   align-self: start | end | center | stretch;
 }这两个属性都可以取下面四个值。
 start：对齐单元格的起始边缘。
 end：对齐单元格的结束边缘。
 center：单元格内部居中。
 stretch：拉伸，占满单元格的整个宽度（默认值）

面试官： 说说React Jsx转换成真实DOM过程？
一、是什么
react通过将组件编写的JSX映射到屏幕，以及组件中的状态发生了变化之后 React会将这些「变化」更新到屏幕上
在前面文章了解中，JSX通过babel最终转化成React.createElement这种形式，例如：

  
  

 会被bebel转化成如下：
React.createElement(
  "div",
  null,
  React.createElement("img", {
    src: "avatar.png",
    className: "profile"
  }),
  React.createElement(Hello, null)
);
在转化过程中，babel在编译时会判断 JSX 中组件的首字母：
当首字母为小写时，其被认定为原生 DOM 标签，createElement 的第一个变量被编译为字符串
当首字母为大写时，其被认定为自定义组件，createElement 的第一个变量被编译为对象
最终都会通过RenderDOM.render(...)方法进行挂载，如下：
ReactDOM.render(,  document.getElementById("root"));

1.使用React.createElement或JSX编写React组件，实际上所有的 JSX 代码最后都会转换成React.createElement(...) ，Babel帮助我们完成了这个转换的过程。 
2.createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象 3.ReactDOM.render将生成好的虚拟DOM渲染到指定容器上，其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化，最终转换为真实DOM

 面试官：css中，有哪些方式可以隐藏页面元素？区别?
通过css实现隐藏元素方法有如下：

 display:none
 

特点：元素不可见，不占据空间，无法响应点击事件

 visibility:hidden
 

特点：元素不可见，占据页面空间，无法响应点击事件

 opacity:0
 

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件

 设置height、width模型属性为0
 

特点：元素不可见，不占据页面空间，无法响应点击事件

 position:absolute（将元素移出可视区域）
 

特点：元素不可见，不影响页面布局

 clip-path：通过裁剪的形式
 .hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
 

特点：元素不可见，占据页面空间，无法响应点击事件
区别：
关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：




display: none
visibility: hidden
opacity: 0




页面中
不存在
存在
存在


重排
会
不会
不会


重绘
会
会
不一定


自身绑定事件
不触发
不触发
可触发


transition
不支持
支持
支持


子元素可复原
不能
能
不能


被遮挡的元素可触发事件
能
能
不能



 面试官：说说你对http的了解：
超文本传输协议（Hypertext Transfer Protocol，HTTP），是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议
它可以拆成三个部分：
1.超文本：HTTP 传输的内容是「超⽂本」。它就是超越了普通⽂本的⽂本，它是⽂字、图⽚、视频等的混合体，最关键有超链接，能从⼀个超⽂本跳转到另外⼀个超⽂本。（如HTML） 2.传输：HTTP 协议是⼀个双向协议。 我们在上⽹冲浪时，浏览器是请求⽅ A ，百度⽹站就是应答⽅ B。双⽅约定⽤ HTTP 协议来通信，于是浏览器把请求数据发送给⽹站，⽹站再把⼀些数据返回给浏览器，最后由浏览器渲染在屏幕，就可以看到图⽚、视频了。 3.协议：HTTP 是⼀个⽤在计算机世界⾥的协议。它使⽤计算机能够理解的语⾔确⽴了⼀种计算机之间交流通信的规范（两个以上的参与者），以及相关的各种控制和错误处理⽅式（⾏为约定和规范）。
优点：
HTTP 最凸出的优点是「简单、灵活和易于扩展、应⽤⼴泛和跨平台」。
缺点: 
⽆状态 明⽂传输  不安全 HTTP ⽐较严重的缺点就是不安全
面试官：Vue 组件 data 为什么必须是函数
每个组件都是 Vue 的实例。 组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他
面试官：web常见的攻击方式有哪些？如何防御？
1.XSS，跨站脚本攻击，允许攻击者将恶意代码植入到提供给其它用户使用的页面中 XSS涉及到三方，即攻击者、客户端与Web应用，根据攻击的来源，XSS攻击可以分成： 存储型 反射型 DOM 型
XSS的预防： （1）输入过滤，避免 XSS 的方法之一主要是将用户输入的内容进行过滤。对所有用户提交内容进行可靠的输入验证，包括对 URL、查询关键字、POST数据等，仅接受指定长度范围内、采用适当格式、采用所预期的字符的内容提交，对其他的一律过滤。(客户端和服务器都要) （2）输出转义 例如： 往 HTML 标签之间插入不可信数据的时候，首先要做的就是对不可信数据进行 HTML Entity 编码 HTML 字符实体 （3）使用 HttpOnly Cookie 将重要的cookie标记为httponly，这样的话当浏览器向Web服务器发起请求的时就会带上cookie字段，但是在js脚本中却不能访问这个cookie，这样就避免了XSS攻击利用JavaScript的document.cookie获取cookie。
2.CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求 利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目
CSRF的预防： CSRF通常从第三方网站发起，被攻击的网站无法防止攻击发生，只能通过增强自己网站针对CSRF的防护能力来提升安全性 防止csrf常用方案如下： 阻止不明外域的访问 同源检测 Samesite Cookie 提交时要求附加本域才能获取的信息 CSRF Token 双重Cookie验证  
3.SQL注入 Sql 注入攻击，是通过将恶意的 Sql查询或添加语句插入到应用的输入参数中，再在后台 Sql服务器上解析执行进行的攻击
预防方式如下： 严格检查输入变量的类型和格式 过滤和转义特殊字符 对访问数据库的Web应用程序采用Web应用防火墙  

面试官：为什么 0.1 + 0.2 != 0.3

原因，因为 JS 采用 IEEE 754双精度版本（64位），并且只要采用 IEEE 754的语言都有该问题

我们都知道计算机是通过二进制来存储东西的，那么 0.1 在二进制中会表示为 
// (0011) 表示循环
0.1 = 2^-4 * 1.10011(0011)

我们可以发现，0.1 在二进制中是无限循环的一些数字，其实不只是 0.1，其实很多十进制小数用二进制表示都是无限循环的。这样其实没什么问题，但是 JS采用的浮点数标准却会裁剪掉我们的数字。


IEEE 754 双精度版本（64位）将 64 位分为了三段

第一位用来表示符号
接下去的 11 位用来表示指数
其他的位数用来表示有效位，也就是用二进制表示 0.1 中的 10011(0011)


那么这些循环的数字被裁剪了，就会出现精度丢失的问题，也就造成了 0.1 不再是 0.1 了，而是变成了 0.100000000000000002

0.100000000000000002 === 0.1 // true


那么同样的，0.2 在二进制也是无限循环的，被裁剪后也失去了精度变成了 0.200000000000000002

0.200000000000000002 === 0.2 // true


所以这两者相加不等于 0.3 而是 0.300000000000000004

0.1 + 0.2 === 0.30000000000000004 // true


那么可能你又会有一个疑问，既然 0.1 不是 0.1，那为什么 console.log(0.1) 却是正确的呢？


因为在输入内容的时候，二进制被转换为了十进制，十进制又被转换为了字符串，在这个转换的过程中发生了取近似值的过程，所以打印出来的其实是一个近似值，你也可以通过以下代码来验证


console.log(0.100000000000000002) // 0.1
 解决方法
parseFloat((0.1 + 0.2).toFixed(10)) === 0.3 // true
面试官： 注册事件

通常我们使用 addEventListener 注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值 useCapture 参数来说，该参数默认值为 false ，useCapture 决定了注册的事件是捕获事件还是冒泡事件。对于对象参数来说，可以使用以下几个属性


capture：布尔值，和 useCapture 作用一样
once：布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
passive：布尔值，表示永远不会调用 preventDefault


一般来说，如果我们只希望事件只触发在目标上，这时候可以使用 stopPropagation来阻止事件的进一步传播。通常我们认为 stopPropagation 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。

node.addEventListener(
  'click',
  event => {
    event.stopImmediatePropagation()
    console.log('冒泡')
  },
  false
)
// 点击 node 只会执行上面的函数，该函数不会执行
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

面试官：什么是 MVVM？比之 MVC 有什么区别？
首先先来说下 View 和 Model

View 很简单，就是用户看到的视图
Model 同样很简单，一般就是本地数据和数据库中的数据


基本上，我们写的产品就是通过接口从数据库中读取数据，然后将数据经过处理展现到用户看到的视图上。当然我们还可以从视图上读取用户的输入，然后又将用户的输入通过接口写入到数据库中。但是，如何将数据展示到视图上，然后又如何将用户的输入写入到数据中，不同的人就产生了不同的看法，从此出现了很多种架构设计。


传统的 MVC 架构通常是使用控制器更新模型，视图从模型中获取数据去渲染。当用户有输入时，会通过控制器去更新模型，并且通知视图进行更新



但是 MVC 有一个巨大的缺陷就是控制器承担的责任太大了，随着项目愈加复杂，控制器中的代码会越来越臃肿，导致出现不利于维护的情况。
在 MVVM 架构中，引入了 ViewModel 的概念。ViewModel 只关心数据和业务的处理，不关心 View 如何处理数据，在这种情况下，View和 Model 都可以独立出来，任何一方改变了也不一定需要改变另一方，并且可以将一些可复用的逻辑放在一个 ViewModel 中，让多个 View 复用这个 ViewModel。



以 Vue 框架来举例，ViewModel 就是组件的实例。View 就是模板，Model 的话在引入 Vuex 的情况下是完全可以和组件分离的。
除了以上三个部分，其实在 MVVM 中还引入了一个隐式的 Binder 层，实现了 View 和 ViewModel 的绑定

 




同样以 Vue 框架来举例，这个隐式的 Binder 层就是 Vue 通过解析模板中的插值和指令从而实现 View 与 ViewModel 的绑定。
对于 MVVM来说，其实最重要的并不是通过双向绑定或者其他的方式将 View 与 ViewModel 绑定起来，而是通过 ViewModel 将视图中的状态和用户的行为分离出一个抽象，这才是 MVVM 的精髓

面试官：mixin 和 mixins 区别

mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的

Vue.mixin({
    beforeCreate() {
        // ...逻辑
        // 这种方式会影响到每个组件的 beforeCreate 钩子函数
    }
})


虽然文档不建议我们在应用中直接使用 mixin，但是如果不滥用的话也是很有帮助的，比如可以全局混入封装好的 ajax 或者一些工具函数等等。
mixins 应该是我们最常使用的扩展组件的方式了。如果多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过 mixins 混入代码，比如上拉下拉加载数据这种逻辑等等。
另外需要注意的是 mixins 混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并，具体可以阅读 文档


面试官： computed 和 watch 区别

computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。
watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。
所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed，对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。
另外 computer 和 watch 还都支持对象的写法，这种方式知道的人并不多。

vm.$watch('obj', {
    // 深度遍历
    deep: true,
    // 立即触发
    immediate: true,
    // 执行的函数
    handler: function(val, oldVal) {}
})
var vm = new Vue({
  data: { a: 1 },
  computed: {
    aPlus: {
      // this.aPlus 时触发
      get: function () {
        return this.a + 1
      },
      // this.aPlus = 1 时触发
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
 面试官：Ajax

它是一种异步通信的方法，通过直接由 js 脚本向服务器发起 http 通信，然后根据服务器返回的数据，更新网页的相应部分，而不用刷新整个页面的一种方法。




//1：创建Ajax对象
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本
//2：配置 Ajax请求地址
xhr.open('get','index.xml',true);
//3：发送请求
xhr.send(null); // 严谨写法
//4:监听请求，接受响应
xhr.onreadysatechange=function(){
     if(xhr.readySate==4&&xhr.status==200 || xhr.status==304 )
          console.log(xhr.responsetXML)
}
实现过程
实现 `Ajax`异步交互需要服务器逻辑进行配合，需要完成以下步骤：
- 创建 `Ajax`的核心对象 `XMLHttpRequest`对象
 - 通过 `XMLHttpRequest` 对象的 `open()` 方法与服务端建立连接
 - 构建请求所需的数据内容，并通过`XMLHttpRequest` 对象的 `send()` 方法发送给服务器端
 - 通过 `XMLHttpRequest` 对象提供的 `onreadystatechange` 事件监听服务器端你的通信状态
 - 接受并处理服务端向客户端响应的数据结果
 - 将处理结果更新到 `HTML`页面中
promise 封装实现：
// promise 封装实现：

function getJSON(url) {
  // 创建一个 promise 对象
  let promise = new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();

    // 新建一个 http 请求
    xhr.open("GET", url, true);

    // 设置状态的监听函数
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;

      // 当请求成功或失败时，改变 promise 的状态
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };

    // 设置错误监听函数
    xhr.onerror = function() {
      reject(new Error(this.statusText));
    };

    // 设置响应的数据类型
    xhr.responseType = "json";

    // 设置请求头信息
    xhr.setRequestHeader("Accept", "application/json");

    // 发送 http 请求
    xhr.send(null);
  });

  return promise;
}
 面试官：深入数组
一、梳理数组 API
Array() 和 Array.of() 的区别
Array()
在JavaScript中，数组构造函数是new Array() 或 Array()
let arr = Array(1, 2, 3, 4)
console.log(arr) // 1, 2, 3, 4
console.log(arr.length) // 4
咋一看，好像什么毛病，我们改一下代码，将构造函数的参数设为只有一个数字时：
let arr = Array(4)
console.log(arr) // [empty × 4]
console.log(arr.length) // 4
这时就会发现，我们或许只是想构造一个只有一个数字4的数组，但却构造了一个数组长度为4的数组，怎么解决这个问题呢？
 Array.of()来帮你解决这个问题吧！Array.of()和new Array()功能相同，但当只放入一个数字时，Array.of()会构造一个包含该数字的数组
Array.of()
Array.of ()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
let arr = Array.of(1, 2, 3, 4)
console.log(arr) // [1, 2, 3, 4]
console.log(arr.length) // 4
这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异
let arr = Array.of(4)
console.log(arr) // [4]
console.log(arr.length) // 1
Array.from ()方法详解
1、将类数组对象转换为真正数组：
let arrayLike = {
	    0: 'tom', 
	    1: '65',
	    2: '男',
	    3: ['jane','john','Mary'],
	    'length': 4
	}
	let arr = Array.from(arrayLike)
	console.log(arr) // ['tom','65','男',['jane','john','Mary']]
如果把length去掉 他就成了一个长度为0的数组
就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的 会出现以下情况
let arrayLike = {
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]
会发现结果是长度为4，元素均为undefined的数组
要将一个类数组对象转换为一个真正的数组，必须具备以下条件：
　1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
　2、该类数组对象的属性名必须为数值型或字符串型的数字
　ps: 该类数组对象的属性名可以加引号，也可以不加引号
2、将Set结构的数据转换为真正的数组：

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]
Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]
3、将字符串转换为数组：
let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
4、Array.from参数是一个真正的数组：
console.log(Array.from([12,45,47,56,213,4654,154]))
 改变自身的方法

基于 ES6，会改变自身值的方法一共有 9 个，分别为 pop、push、reverse、shift、sort、splice、unshift，以及两个 ES6 新增的方法 copyWithin 和 fill


// pop方法
var array = ["cat", "dog", "cow", "chicken", "mouse"];
var item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item); // mouse
// push方法
var array = ["football", "basketball",  "badminton"];
var i = array.push("golfball");
console.log(array); 
// ["football", "basketball", "badminton", "golfball"]
console.log(i); // 4
// reverse方法
var array = [1,2,3,4,5];
var array2 = array.reverse();
console.log(array); // [5,4,3,2,1]
console.log(array2===array); // true
// shift方法
var array = [1,2,3,4,5];
var item = array.shift();
console.log(array); // [2,3,4,5]
console.log(item); // 1
// unshift方法
var array = ["red", "green", "blue"];
var length = array.unshift("yellow");
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4
// sort方法
var array = ["apple","Boy","Cat","dog"];
var array2 = array.sort();
console.log(array); // ["Boy", "Cat", "apple", "dog"]
console.log(array2 == array); // true
// splice方法
var array = ["apple","boy"];
var splices = array.splice(1,1);
console.log(array); // ["apple"]
console.log(splices); // ["boy"]
// copyWithin方法
var array = [1,2,3,4,5]; 
var array2 = array.copyWithin(0,3);
console.log(array===array2,array2);  // true [4, 5, 3, 4, 5]
// fill方法
var array = [1,2,3,4,5];
var array2 = array.fill(10,0,3);
console.log(array===array2,array2); 
// true [10, 10, 10, 4, 5], 可见数组区间[0,3]的元素全部替换为10
不改变自身的方法

基于 ES7，不会改变自身的方法也有 9 个，分别为 concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未形成标准的 toSource，以及 ES7 新增的方法 includes。


// concat方法
var array = [1, 2, 3];
var array2 = array.concat(4,[5,6],[7,8,9]);
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array); // [1, 2, 3], 可见原数组并未被修改
// join方法
var array = ['We', 'are', 'Chinese'];
console.log(array.join()); // "We,are,Chinese"
console.log(array.join('+')); // "We+are+Chinese"
// slice方法
var array = ["one", "two", "three","four", "five"];
console.log(array.slice()); // ["one", "two", "three","four", "five"]
console.log(array.slice(2,3)); // ["three"]
// toString方法
var array = ['Jan', 'Feb', 'Mar', 'Apr'];
var str = array.toString();
console.log(str); // Jan,Feb,Mar,Apr
// tolocalString方法
var array= [{name:'zz'}, 123, "abc", new Date()];
var str = array.toLocaleString();
console.log(str); // [object Object],123,abc,2016/1/5 下午1:06:23
// indexOf方法
var array = ['abc', 'def', 'ghi','123'];
console.log(array.indexOf('def')); // 1
// includes方法
var array = [-0, 1, 2];
console.log(array.includes(+0)); // true
console.log(array.includes(1)); // true
var array = [NaN];
console.log(array.includes(NaN)); // true
6. 数组遍历的方法

基于 ES6，不会改变自身的遍历方法一共有 12 个，分别为 forEach、every、some、filter、map、reduce、reduceRight，以及 ES6 新增的方法 entries、find、findIndex、keys、values

// forEach方法
var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){
  array[index] = value;
  console.log(this.name); // cc被打印了三次, this指向obj
},obj);
console.log(array); // [1, 3, 5]
console.log(sReturn); // undefined, 可见返回值为undefined
// every方法
var o = {0:10, 1:8, 2:25, length:3};
var bool = Array.prototype.every.call(o,function(value, index, obj){
  return value >= 8;
},o);
console.log(bool); // true
// some方法
var array = [18, 9, 10, 35, 80];
var isExist = array.some(function(value, index, array){
  return value > 20;
});
console.log(isExist); // true 
// map 方法
var array = [18, 9, 10, 35, 80];
array.map(item => item + 1);
console.log(array);  // [19, 10, 11, 36, 81]
// filter 方法
var array = [18, 9, 10, 35, 80];
var array2 = array.filter(function(value, index, array){
  return value > 20;
});
console.log(array2); // [35, 80]
// reduce方法
var array = [1, 2, 3, 4];
var s = array.reduce(function(previousValue, value, index, array){
  return previousValue * value;
},1);
console.log(s); // 24
// ES6写法更加简洁
array.reduce((p, v) => p * v); // 24
// reduceRight方法 (和reduce的区别就是从后往前累计)
var array = [1, 2, 3, 4];
array.reduceRight((p, v) => p * v); // 24
// entries方法
var array = ["a", "b", "c"];
var iterator = array.entries();
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]
console.log(iterator.next().value); // undefined, 迭代器处于数组末尾时, 再迭代就会返回undefined
// find & findIndex方法
var array = [1, 3, 5, 7, 8, 9, 10];
function f(value, index, array){
  return value%2==0;     // 返回偶数
}
function f2(value, index, array){
  return value > 20;     // 返回大于20的数
}
console.log(array.find(f)); // 8
console.log(array.find(f2)); // undefined
console.log(array.findIndex(f)); // 4
console.log(array.findIndex(f2)); // -1
// keys方法
[...Array(10).keys()];     // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// values方法
var array = ["abc", "xyz"];
var iterator = array.values();
console.log(iterator.next().value);//abc
console.log(iterator.next().value);//xyz
总结

数组和字符串方法 


面试官：在生命周期中的哪一步你应该发起 AJAX 请求

我们应当将AJAX 请求放到 componentDidMount 函数中执行，主要原因有下


React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这个生命周期函数的调用次数会变得不确定，React 可能会多次频繁调用 componentWillMount。如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。
如果我们将AJAX 请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了setState函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题

面试官：如何告诉 React 它应该编译生产环境版
通常情况下我们会使用 Webpack 的 DefinePlugin 方法来将 NODE_ENV 变量值设置为 production。编译版本中 React会忽略 propType 验证以及其他的告警信息，同时还会降低代码库的大小，React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息
面试官：概述下 React 中的事件处理逻辑
为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的
面试官：createElement 与 cloneElement 的区别是什么

传入的第一个参数不同
React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。
它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。
React.createElement(type, [props], [...children]);
React.cloneElement()与 React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而旧的子元素将被替换。将保留原始元素的键和引用。
React.cloneElement(element, [props], [...children]);

面试官： redux中间件

中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能


redux-logger：提供日志输出
redux-thunk：处理异步操作
redux-promise：处理异步操作，actionCreator的返回值是promise

面试官：redux有什么缺点

1. Redux 使状态可预测
 在 Redux 中，状态始终是可预测的。如果将相同的状态和动作传递给减速器，则总是会产生相同的结果，因为减速器是纯函数。状态也是不可变的，永远不会改变。这使得执行诸如无限撤消和重做之类的艰巨任务成为可能。还可以在之前的状态之间来回移动并实时查看结果。
2. Redux 是可维护的
 Redux 对代码的组织方式很严格，这使得具有 Redux 知识的人更容易理解任何 Redux 应用程序的结构。这通常使维护更容易。这也有助于用户将业务逻辑与组件树分离。对于大型应用程序，保持应用程序更具可预测性和可维护性至关重要。
3. Redux 调试简单
 Redux 使调试应用程序变得容易。通过记录操作和状态，很容易理解编码错误、网络错误和生产过程中可能出现的其他形式的错误。
除了日志记录，它还有很棒的 DevTools，允许时间旅行操作、页面刷新时的持久操作等。对于中型和大型应用程序，调试比实际开发功能花费更多的时间。Redux DevTools 使您可以轻松利用 Redux 提供的所有功能。
4.性能优势
 我们可能会假设保持应用程序的状态全局会导致一些性能下降。在很大程度上，情况并非如此，因为 React Redux 在内部实现了许多性能优化，因此我们自己的连接组件仅在实际需要时才重新渲染。
5.易于测试
 由于函数用于更改纯函数的状态，因此测试 Redux 应用程序很容易。
6.状态持久化
 我们可以将应用程序的一些状态持久化到本地存储并在刷新后恢复它。这真的很漂亮。
7.服务端渲染
 Redux 也可用于服务器端渲染。有了它，我们可以通过将应用程序的状态连同它对服务器请求的响应发送到服务器来处理应用程序的初始呈现。然后所需的组件以 HTML 格式呈现并发送到客户端。
何时不选择 Redux
 主要由简单的用户界面更改组成的应用程序通常不需要像 Redux 这样的复杂模式。有时，不同组件之间的老式状态共享也有效，并提高了代码的可维护性。
此外，如果用户的数据来自每个视图的单个数据源，则他们可以避免使用 Redux。换句话说，如果我们不需要多源数据，就没有必要引入Redux。每个视图访问单个数据源时，我们不会遇到数据不一致的问题。
因此，在介绍其复杂性之前，请务必检查我们是否需要 Redux。尽管这是一种促进纯函数的相当有效的模式，但对于仅涉及几个 UI 更改的简单应用程序来说，这可能是一种开销。最重要的是，我们不应该忘记 Redux 是一个内存状态存储。换句话说，如果我们的应用程序崩溃，我们将丢失整个应用程序状态。这意味着我们必须使用缓存解决方案来创建应用程序状态的备份，这又会产生额外的开销。
结论
 我们已经讨论了 Redux 的主要特性以及为什么 Redux 对我们的应用程序有益。
 虽然 Redux 有它的好处，但这并不意味着我们应该将 Redux 添加到我们所有的应用程序中。如果没有 Redux，我们的应用程序可能仍能正常运行。
 Redux 的一个主要好处是增加了方向，将“发生的事情”与“事情如何变化”分开。
 如果我们确定我们的项目需要状态管理工具，我们应该只实施 Redux。

面试官：react组件的划分业务组件技术组件？ 


根据组件的职责通常把组件分为UI组件和容器组件。
UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
两者通过React-Redux 提供connect方法联系起来


面试官：预加载

在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载
预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载




预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好

 面试官： 如何解决a标点击后hover事件失效的问题?
改变a标签css属性的排列顺序
只需要记住LoVe HAte原则就可以了(爱恨原则)：
link→visited→hover→active

比如下面错误的代码顺序：
a:hover{
  color: green;
  text-decoration: none;
}
a:visited{ /* visited在hover后面，这样的话hover事件就失效了 */
  color: red;
  text-decoration: none;
}

正确的做法是将两个事件的位置调整一下。
注意⚠️各个阶段的含义：

a:link：未访问时的样式，一般省略成a
a:visited：已经访问后的样式
a:hover：鼠标移上去时的样式
a:active：鼠标按下时的样式

面试官：Vue实例挂载过程发生了什么


面试官：Js有哪些数据类型
JS中有两种数据类型
 1.简单数据类型（也称基本数据类型）：Undefined;Null;Boolean;Number和String。
2.引用数据类型（也称复杂数据类型），其中包括Object；Array；Function等等。
面试官：谈谈变量提升？

当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境


接下来让我们看一个老生常谈的例子，var

b() // call b
console.log(a) // undefined

var a = 'Hello world'

function b() {
    console.log('call b')
}


变量提升
这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行环境时，会有两个阶段。第一个阶段是创建的阶段，JS
 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为
 undefined，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用


在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升

b() // call b second

function b() {
    console.log('call b fist')
}
function b() {
    console.log('call b second')
}
var b = 'Hello world'

 复制代码var 会产生很多错误，所以在 ES6中引入了 let。let 不能在声明前使用，但是这并不是常说的 let 不会提升，let 提升了，在第一阶段内存也已经为他开辟好了空间，但是因为这个声明的特性导致了并不能在声明前使用

面试官：实现一个trim方法
trim()是一个很适用的方法，作用是去除字符串两边的空白，但是js本身并未提供这个方法，下面介绍js使用trim()的方法
1.通过原型创建字符串的trim()
/去除字符串两边的空白

String.prototype.trim=function(){
　　return this.replace(/(^\s*)|(\s*$)/g, "");
}

//只去除字符串左边空白
 String.prototype.ltrim=function(){
　　return this.replace(/(^\s*)/g,"");
}

//只去除字符串右边空白
String.prototype.rtrim=function(){
　　return this.replace(/(\s*$)/g,"");

}
 2.通过函数实现
例如：

function trim(str){

return str.replace(/(^\s*)|(\s*$)/g, "");

}
面试官：简述flux思想

1.什么是flux
 Flux的提出主要是针对现有前端MVC框架的局限总结出来的一套基于dispatcher的前端应用架构模式。按照MVC的命名习惯，他应该叫ADSV（Action Dispatcher Store View）。
 在Flux应用中，数据从action到dispatcher，再到store，最终到view的路线是不可逆的，各个角色之间不会像前段MVC模式那样存在交错的连线


 1.用户访问view
 2.view发出用户的Action
 3.dispatcher收到Action，要求Store进行响应的更新
 4.Store更新后，发出一个"change"事件
 5.view收到"change"事件后，更新页面


 Flux将一个应用分成四个部分；
 1.view视图层
 2.action(动作)；视图层发出的消息（比如mouseClick）
 3.Dispatcher（派发器）：用来接收Actions，执行回调函数
 4.Store（数据层）：用来存放应用的状态，一旦发生改变，就提醒Views更新页面

Flux的最大特点：就是数据的"单向流动"，数据总是"单项流动"，任何相邻的部分都不会发生数据的"双向流动"。

面试官：什么是BFC

【透过现象看本质】：BFC就是符合一些特征的HTML标签
【BFC 是什么？】
BFC（Bloce Formatting Context）格式化上下文 指一个独立的渲染区域，或者说是一个隔离的独立容器 可以理解为一个独立的封闭空间。无论如何不会影响到他的外面
【形成BFC的条件】：
1、浮动元素，float除none以外的值
2、绝对定位元素，position（absolute,fixed）
3、diisplay 为一下其中之一的值 inline-block table-cell table-caption,flex
4、overflow除了visible以外的值（hidden,auto,scroll）
5、body 根元素
【BFC的特性】
1、内部的Box会在垂直方向上一个接一个的放置
2、垂直方向上的距离margin决定
3、bfc的区域不会与float的元素区域重叠
4、计算bfc的高度时，浮动元素区域也参与计算
5、bfc就是页面上的一个独立的容器，容器里面的子元素不会影响外面的元素

前端工程化的特点

前端工程化可以分成四个方面来说，分别为模块化、组件化、规范化和自动化。
模块化
 模块化是指将一个文件拆分成多个相互依赖的文件，最后进行统一的打包和加载，这样能够很好的保证高效的多人协作。其中包含
JS 模块化：CommonJS、AMD、CMD 以及 ES6 Module。
 CSS 模块化：Sass、Less、Stylus、BEM、CSS Modules 等。其中预处理器和 BEM 都会有的一个问题就是样式覆盖。而 CSS Modules 则是通过 JS 来管理依赖，最大化的结合了 JS 模块化和 CSS 生态，比如 Vue 中的 style scoped。
 资源模块化：任何资源都能以模块的形式进行加载，目前大部分项目中的文件、CSS、图片等都能直接通过 JS 做统一的依赖关系处理。
组件化
 不同于模块化，模块化是对文件、对代码和资源拆分，而组件化则是对 UI 层面的拆分。
通常，我们会需要对页面进行拆分，将其拆分成一个一个的零件，然后分别去实现这一个个零件，最后再进行组装。 在我们的实际业务开发中，对于组件的拆分我们需要做不同程度的考量，其中主要包括细粒度和通用性这两块的考虑。 对于业务组件，你更多需要考量的是针对你负责业务线的一个适用度，即你设计的业务组件是否成为你当前业务的 “通用” 组件。
规范化
 正所谓无规矩不成方圆，一些好的规范则能很好的帮助我们对项目进行良好的开发管理。规范化指的是我们在工程开发初期以及开发期间制定的系列规范，其中又包含了
项目目录结构
 编码规范：对于编码这块的约束，一般我们都会采用一些强制措施，比如 ESLint、StyleLint 等。
 联调规范
 文件命名规范
 样式管理规范：目前流行的样式管理有 BEM、Sass、Less、Stylus、CSS Modules 等方式。
 git flow 工作流：其中包含分支命名规范、代码合并规范等。
 定期 code review … 等等
自动化
 从最早先的 grunt、gulp 等，再到目前的 webpack、parcel。这些自动化工具在自动化合并、构建、打包都能为我们节省很多工作。而这些只是前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面。
以上就是我所了解的前端工程化，以工程的角度去理解我们的web前端。工程是工程，而不是某项技术。

面试官：CSS清除浮动的方法（多种）

清除浮动的含义是什么？
 清除浮动带来的影响
 影响：如果子元素浮动了，此时子元素不能撑开父元素
 ➢ 清除浮动的目的是什么？
 需要父元素有高度，从而不影响其他网页元素的布局
 注意：父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置

方法：
1、直接设置父元素高度
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
2、额外标签法
操作： 1. 在父元素内容的最后添加一个块级元素 2. 给添加的块级元素设置 clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂 
3、单伪元素清除法
 操作：用伪元素替代了额外标签
 基本写法
.clearfix::after{
    content:'';
    display:block;
    clear:both;
}
补充写法
/* 伪元素添加的标签是行内, 要求块 */
.clearfix::after{
    content:'';
    /* 伪元素添加的标签是行内, 要求块 */
    display:block;
    clear:both;
    /* 补充代码：在网页中看不到伪元素 *//* 为了兼容性 */
    height:0;
    visibility:hidden;
}
优点：项目中使用，直接给标签加类即可清除浮动
4、双伪元素清除法
 操作：
/*  .clearfix::before 作用: 解决外边距塌陷问题
    外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
*/
/* 清除浮动 */
.clearfix::bofore,
.clearfix::after{
    content:'';
    display:table;
}
/* 真正清除浮动的标签 */
.clearfix::after{
    clear:both;
}
优点：项目中使用，直接给标签加类即可清除浮动
5、给父元素设置overflow : hidden
 操作： 直接给父元素设置 overflow : hidden
 优点：方便
面试官：keep-alive的属性
include
include：字符串或正则表达，只有匹配的组件会被缓存

……


如：

	

表示home、other组件可以被缓存
exclude
exclude：字符串或正则表达式，任何匹配的组件都不会被缓存

……


如：

	

表示home、other组件不能被缓存
也可以在router里meta设置true或者或false然后在keep-alive去做判来实现是否进行缓存
面试官：webpack中的代码分割
代码分割的方法
官网给出了三种常用的代码分割的方法


Entry Points：入口文件设置的时候可以配置
CommonsChunkPlugin：上篇文章讲了一下应用，更详细的信息可以查看官网
Dynamic Imports：动态导入。通过模块的内联函数调用来分割，这篇文章主要会结合 vue-router 分析一下这种方


Entry Points
这种是最简单也是最直观的代码分割方式，但是会存在一些问题。方法就是在 webpack 配置文件中的 entry 字段添加新的入口：
const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
将生成下面的构建结果：


 看上去是分割出来了一个新的 bundle。但是会有两个问题：

如果入口 chunks 之间包含重复的模块，那些重复模块都会被引入到各个 bundle 中
这种方法不够灵活，并且不能将核心应用程序逻辑进行动态拆分代码

举个例子，index 和 another 这两个入口文件都包含了 lodash 这个模块，那分割出来的两个 bundle 都会包含 lodash 这个模块，冗余了。解决这个问题就需要 CommonsChunkPlugin 插件

CommonsChunkPlugin 
这个插件可以抽取所有入口文件都依赖了的模块，把这些模块抽取成一个新的bundle。具体用法如下：
const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common' // bundle 名称
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
构建结果如下：

 可以看到，原来的 index 和 another 两个bundle的体积大大的减小了。并且多了一个574k的 common bundle。这个文件就是抽离出来的 lodash 模块。这样就可以把业务代码，和第三方模块代码分割开了。
Dynamic Imports
Webpack 的动态分割主要方式是使用符合 ECMAScript 提案的 import() 语法。语法如下
import('path/to/module') -> Promise
传入模块的路径，import() 会返回一个Promise。这个模块就会被当作分割点。意味着这个模块和它的子模块都会被分割成一个单独的 chunk。并且，在 webpack 配置文件的 output 字段，需要添加一个 chunkFileName 属性。它决定非入口 chunk 的名称。
// vue-cli 生成的webpack.prod.conf.js
// 注意 output 的 chunkFilename 属性
// 这种写法分割出来的 bundle 会以 id + hash 的命名方式
// 比如 1.32326e28f3acec4b3a9a.js
output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
这个动态代码分割功能是我们实现按需加载的前提。在 vue 的项目里，我们最终想要达到这样一个效果：

把每个路由所包含的组件，都分割成一个单独的 bundle
当路由被访问的时候才加载该路由对应的 bundle

第一个点通过上面的 import() 就已经可以实现了。要实现第二点，需要用到 vue 里面的异步组件特性。
Vue 允许将组件定义为一个工厂函数，异步地解析组件的定义。只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。工厂函数的写法：
  
Vue.component('async-webpack-example',
  // 该 `import` 函数返回一个 `Promise` 对象。
  () => import('./my-async-component')
)
最后在 vue-router 的路由配置中，我们只需要这么写：
const router = new VueRouter({
  routes: [
    { path: '/login', component: () => import('@/views/login'), },
    { path: '/home', component: () => import('@/views/home'), }
  ]
})
结合 Vue 的异步组件和 Webpack 的代码分割功能，在 vue-router 中，我们轻松实现了路由组件的按需加载加载。所以，文章开头的问题在这里就可以解答了。以0-7数字开头的 js 文件，就是每个路由对应的组件构建出来的 bundle。只有用户访问对应的路由时，才会加载相应的 bundle，提高页面加载效率。
面试官：Vue数据更新但页面没有更新的多种情况
1、Vue 无法检测实例被创建时不存在于 data 中的 变量
原因：由于 Vue 会在初始化实例时对 data中的数据执行 getter/setter 转化，所以 变量必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
例如：

new Vue({
  data:{},
  template: '{{message}}'
})
this.message = 'Hello world !' // `message` 不是响应式的页面不会发生变化
解决方法：
new Vue({
  data: {
    message: '',
  },
  template: '{{ message }}'
})
this.message = 'Hello world!'
2、vue也不能检测到data中对象的动态添加和删除
例如：
 new Vue({
  data:{
    obj: {
      id: 1
    }
  },
  template: '{{ obj.message }}'
})
this.obj.message = 'hello' // 不是响应式的
delete this.obj.id       // 不是响应式的
解决：
// 动态添加 - Vue.set
Vue.set(this.obj, 'id', 002)
 
// 动态添加 - this.$set
this.$set(this.obj, 'id', 002)
 
// 动态添加多个
// 代替 Object.assign(this.obj, { a: 1, b: 2 })
this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })
 
// 动态移除 - Vue.delete
Vue.delete(this.obj, 'name')
 
// 动态移除 - this.$delete
this.$delete(this.obj, 'name')
3、数组的时候，不能通过索引直接修改或者赋值，也不能修改数组的长度
例如
new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
this.items[1] = 'x' // 不是响应性的
this.items[3] = 'd' // 不是响应性的
this.items.length = 2 // 不是响应性的
解决：

// Vue.set
Vue.set(this.items, 4, 'd')
 
// this.$set
this.$set(this.items, 4, 'd)
 
// Array.prototype.splice
this.items.splice(indexOfItem, 4, 'd')
//修改长度
this.items.splice(3)
4、异步获取接口数据，DOM数据不发现变化
原因：Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
{{message}}
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 页面没有变化
解决办法：
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
//使用 Vue.nextTick(callback) callback 将在 DOM 更新完成后被调用
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
  vm.$el.style.color = 'red' // 文字颜色变成红色
})
5、循环嵌套层级太深，视图不更新
当嵌套太深时，页面也可以不更新，此时可以让页面强制刷新
this.$forceUpdate()   (不建议用)
6、 路由参数变化时，页面不更新(数据不更新)
拓展一个因为路由参数变化，而导致页面不更新的问题，页面不更新本质上就是数据没有更新。
原因：路由视图组件引用了相同组件时，当路由参会变化时，会导致该组件无法更新，也就是我们常说中的页面无法更新的问题。
场景：


  
    To Foo    
    To Baz    
    To Bar    
      
  

const Home = {
  template: `{{message}}`,
  data() {
    return {
      message: this.$route.params.name
    }
  }
}
 
const router = new VueRouter({
  mode:'history',
    routes: [
    {path: '/home', component: Home },
    {path: '/home/:name', component: Home }
  ]
})
 
new Vue({
  el: '#app',
  router
})
上段代码中，我们在路由构建选项 routes 中配置了一个动态路由 '/home/:name'，它们共用一个路由组件 Home，这代表他们复用 RouterView 。
当进行路由切换时，页面只会渲染第一次路由匹配到的参数，之后再进行路由切换时，message 是没有变化的。
解决办法：
　　解决的办法有很多种，这里只列举我常用到几种方法。
通过 watch 监听 $route 的变化。 
const Home = {
      template: `{{message}}`,
      data() {
        return {
          message: this.$route.params.name
        }
      },
      watch: {
       '$route': function() {
       this.message = this.$route.params.name
        }
        }
    }
    new Vue({
      el: '#app',
      router
    })

给  绑定 key 属性，这样 Vue 就会认为这是不同的 。

弊端：如果从 /home 跳转到 /user 等其他路由下，我们是不用担心组件更新问题的，所以这个时候 key 属性是多余的。

面试官：vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,可以实现数据之间的共享,它由五部分组成：
 分别是：
 state （用来存放数据）
 actions （可以包含异步操作）
 mutations （唯一可以修改state数据的场所）
 getters （类似于vue组件中的计算属性，对state数据进行计算（会被缓存））
 modules （模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter）

二. vuex的使用步骤 
代码如下（示例）：
 在根目录下新建一个store文件夹，里面创建一个index.js文件，
 最后在main.js中引入，并挂载到实例上，之后那个组件中需要用到vuex就调用就行
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  	//存放数据  this.$store.state.xxx
	state: {},	
	// 唯一修改state的地方 this.$store.commit('事件名',参数)
	mutations: {},
	// 执行异步操作 		  this.$store.dispatch('事件名')
	actions: {},
	// 模块,每个模块拥有自己的state,mutations,actions,getters
	modules: {},
	// 计算state
	getters:{}   		  this.$store.getters.xxx
})
面试官：Vue Router的路由模式hash和history的实现原理
一、Vue-router 中hash模式和history模式的关系
最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的。
二、hash模式实现原理

早期前端路由的实现就是基于location.hash来实现的，其实实现原理很简单，location.hash的值就是URL中#后面的内容
hash路由模式的实现主要特性:
URL中的hash值只是客户端的一种状态，也就是说当向服务器发送请求时，hash部分不会被发送；
 hash值的改变，都会在浏览器的访问历史中增加一个记录，因此在开发时，也可以通过浏览器的回退和前进按钮来控制hash的切换；
 也可以通过href属性来改变URL的hash值，或者使用location.hash进行赋值，改变URL的hash值；
 可以使用hashchange事件来监听hash值的变化，从而对页面进行跳转。

三、history模式的实现原理

HTML5提供了History API来实现URL的变化，其中最主要的两个API有以下两个
 history.pushState()和history.replaceState()。这两个API可以在不进行刷新的情况下，操作浏览器的历史记录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。

window.history.pushState(null,null,path)
window.history.replaceState(null,null,path)
 面试官：Vue的路由钩子函数有哪些？


1、全局的路由钩子函数
       1.1、beforeEach（全局前置钩子），意思是在每次每一个路由改变的时候都要执行               一遍
        它有三个参数：
        to： route：即将要进入的目标 路由对象
        from：route：当前导航正要离开的路由
        next：function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法
        应用场景：
        1、进行一些页面跳转前的处理，例如跳转到的页面需要进行登录才可以访问时，                   就会做登录的跳转
        2、进入页面登录判断、管理员权限判断、浏览器判断
       1.2、afterEach（全局后置钩子）
        beforeEach是在页面加载之前的，而afterEach是在页面加载之后的，所以这些钩子是            不会接受next函数，也不会改变导航本身
2、单个路由内的钩子函数
        2.1、beforeEnter
        可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是            一样的
3、组件内的路由钩子函数
        beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
        应用场景
        1、清除组件中的定时器
        2、当页面有未关闭的窗口，或未保存的内容时，组织页面跳转
        3、保存相关内容到Vuex和Session中

 面试官：为什么Vue中data一定要是一个函数?
data必须是一个函数, 函数的好处就是每一次组件复用之后都会产生一个全新的data. 组件与组件之间各自维护自己的数据, 互不干扰
面试官：Proxy 相比较于 defineProperty 的优势
Object.defineProperty 是监听对象的字段而非对象本身，因此对于动态插入对象的字段，它无能为了，只能手动为其设置设置监听属性。
同时，Object.defineProperty 无法监听对象中数组的变化
Proxy 叫做代理器，它可以为一个对象设置代理，即监听对象本身，任何访问当前被监听的对象的操作，无论是对象本身亦或是对象的字段，都会被 Proxy 拦截，因此可以使用它来做一些双向绑定的操作。
鉴于兼容性的问题，目前仍然主要是使用 Object.defineProperty 更多，但是随着 Vue/3 的发布，Proxy 应该会逐渐淘汰 Object.defineProperty。
面试官：ES5、ES6和ES2015有什么区别?

ES2015特指在2015年发布的新一代JS语言标准，ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES2017、ES2018等。现阶段在绝大部分场景下，ES2015默认等同ES6。ES5泛指上一代语言标准。ES2015可以理解为ES5和ES6的时间分界线。

面试官：babel是什么，有什么作用?

babel是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持ES6的平台。

 面试官：let有什么用，有了var为什么还要用let？

在ES6之前，声明变量只能用var，var方式声明变量其实是很不合理的，准确的说，是因为ES5里面没有块级作用域是很不合理的，
没有块级作用域回来带很多难以理解的问题，比如for循环var变量泄露，变量覆盖等问题。let 声明的变量拥有自己的块级作用域，且修复了var声明变量带来的变量提升问题

面试官：举一些ES6对String字符串类型做的常用升级优化?

1、优化部分：
 ES6新增了字符串模板，在拼接大段字符串时，用反斜杠(`)取代以往的字符串相加的形式，能保留所有空格和换行，使得字符串拼接看起来更加直观，更加优雅。
2、升级部分:
 ES6在String原型上新增了includes()方法，用于取代传统的只能用indexOf查找包含字符的方法(indexOf返回-1表示没查到不如includes方法返回false更明确，语义更清晰), 此外还新增了startsWith(), endsWith(),padStart(),padEnd(),repeat()等方法，可方便的用于查找，补全字符串。

面试官：举一些ES6对Array数组类型做的常用升级优化?

1、优化部分：
 a. 数组解构赋值。ES6可以直接以let [a,b,c] = [1,2,3]形式进行变量赋值，在声明较多变量时，不用再写很多let(var),且映射关系清晰，且支持赋默认值。
b. 扩展运算符。ES6新增的扩展运算符(...)(重要),可以轻松的实现数组和松散序列的相互转化，可以取代arguments对象和apply方法，轻松获取未知参数个数情况下的参数集合。
（尤其是在ES5中，arguments并不是一个真正的数组，而是一个类数组的对象，但是扩展运算符的逆运算却可以返回一个真正的数组）。扩展运算符还可以轻松方便的实现数组的复制和解构赋值（let a = [2,3,4]; let b = [...a]）。
2、升级部分:
 ES6在Array原型上新增了find()方法，用于取代传统的只能用indexOf查找包含数组项目的方法,且修复了indexOf查找不到NaN的bug([NaN].indexOf(NaN) === -1).此外还新增了copyWithin(), includes(), fill(),flat()等方法，可方便的用于字符串的查找，补全,转换等。

 面试官：举一些ES6对Number数字类型做的常用升级优化?

1、优化部分：
 ES6在Number原型上新增了isFinite(), isNaN()方法，用来取代传统的全局isFinite(), isNaN()方法检测数值是否有限、是否是NaN。ES5的isFinite(), isNaN()方法都会先将非数值类型的参数转化为Number类型再做判断，这其实是不合理的，最造成isNaN('NaN') === true的奇怪行为--'NaN'是一个字符串，但是isNaN却说这就是NaN。而Number.isFinite()和Number.isNaN()则不会有此类问题(Number.isNaN('NaN') === false)。（isFinite()同上）
2、升级部分:
 ES6在Math对象上新增了Math.cbrt()，trunc()，hypot()等等较多的科学计数法运算方法，可以更加全面的进行立方根、求和立方根等等科学计算。

面试官：举一些ES6对Object类型做的常用升级优化?(重要)


1、优化部分：
 a. 对象属性变量式声明。ES6可以直接以变量形式声明对象属性或者方法，。比传统的键值对形式声明更加简洁，更加方便，语义更加清晰。
let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {apple, orange};    // let myFruits = {apple: 'red appe', orange: 'yellow orange'};
尤其在对象解构赋值(见优化部分b.)或者模块输出变量时，这种写法的好处体现的最为明显:
let {keys, values, entries} = Object;
let MyOwnMethods = {keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries}
可以看到属性变量式声明属性看起来更加简洁明了。方法也可以采用简洁写法：
let es5Fun = {
    method: function(){}
};
let es6Fun = {
    method(){}
}
b. 对象的解构赋值。ES6对象也可以像数组解构赋值那样，进行变量的解构赋值：
let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'};
c. 对象的扩展运算符(...)。ES6对象的扩展运算符和数组扩展运算符用法本质上差别不大，毕竟数组也就是特殊的对象。对象的扩展运算符一个最常用也最好用的用处就在于可以轻松的取出一个目标对象内部全部或者部分的可遍历属性，从而进行对象的合并和分解。
let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'};
// otherFruits  {grape: 'purple grape', peach: 'sweet peach'}
// 注意: 对象的扩展运算符用在解构赋值时，扩展运算符只能用在最有一个参数(otherFruits后面不能再跟其他参数)
let moreFruits = {watermelon: 'nice watermelon'};
let allFruits = {apple, orange, ...otherFruits, ...moreFruits};
d. super 关键字。ES6在Class类里新增了类似this的关键字super。同this总是指向当前函数所在的对象不同，super关键字总是指向当前函数所在对象的原型对象。
2、升级部分:
 a. ES6在Object原型上新增了is()方法，做两个目标对象的相等比较，用来完善'==='方法。'==='方法中NaN === NaN //false其实是不合理的，Object.is修复了这个小bug。(Object.is(NaN, NaN) // true)
b. ES6在Object原型上新增了assign()方法，用于对象新增属性或者多个对象合并。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
注意:assign合并的对象target只能合并source1、source2中的自身属性，并不会合并source1、source2中的继承属性，也不会合并不可枚举的属性，且无法正确复制get和set属性（会直接执行get/set函数，取return的值）。
c. ES6在Object原型上新增了getOwnPropertyDescriptors()方法，此方法增强了ES5中getOwnPropertyDescriptor()方法，可以获取指定对象所有自身属性的描述对象。结合defineProperties()方法，可以完美复制对象，包括复制get和set属性。
d. ES6在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法，用来获取或设置当前对象的prototype对象。这个方法存在的意义在于，ES5中获取设置prototype对象是通过__proto__属性来实现的，然而__proto__属性并不是ES规范中的明文规定的属性，只是浏览器各大厂商“私自”加上去的属性，只不过因为适用范围广而被默认使用了，再非浏览器环境中并不一定就可以使用，所以为了稳妥起见，获取或设置当前对象的prototype对象时，都应该采用ES6新增的标准用法。
d. ES6在Object原型上还新增了Object.keys()，Object.values()，Object.entries()方法，用来获取对象的所有键、所有值和所有键值对数组。

面试官：举一些ES6对Function函数类型做的常用升级优化?(重要)
 1、优化部分：
 a. 箭头函数(核心)。箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this,这改变了以往JS函数中最让人难以理解的this运行机制。主要优化点:
Ⅰ. 箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象。ES5函数里的this总是指向函数执行时所在的对象，这使得在很多情况下this的指向变得很难理解，尤其是非严格模式情况下，this有时候会指向全局对象，这甚至也可以归结为语言层面的bug之一。ES6的箭头函数优化了这一点，它的内部没有自己的this,这也就导致了this总是指向上一层的this，如果上一层还是箭头函数，则继续向上指，直到指向到有自己this的函数为止，并作为自己的this。
Ⅱ. 箭头函数不能用作构造函数，因为它没有自己的this，无法实例化。
Ⅲ. 也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象。（可以用扩展运算符代替）
b. 函数默认赋值。ES6之前，函数的形参是无法给默认值的，只能在函数内部通过变通方法实现。ES6以更简洁更明确的方式进行函数默认赋值。
function es6Fuc (x, y = 'default') {
    console.log(x, y);
}
es6Fuc(4) // 4, default

2、升级部分:
 ES6新增了双冒号运算符，用来取代以往的bind，call,和apply。(浏览器暂不支持，Babel已经支持转码)
foo::bar;
// 等同于
bar.bind(foo);
 
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);
 面试官：CSS预编译
一、什么是CSS预编译？

        CSS 预编译，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS语法。

二、为什么要使用CSS预编译？

CSS缺点：



语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。



CSS预编译优点：



可以提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了开发效率。
增强编程能力；增强可复用性；增强可维护性；更便于解决浏览器兼容性



CSS预编译缺点：



CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦



不同的预编译器特性虽然有所差异，但核心功能均围绕这些目标打造，比如：



嵌套（所有预编译器都支持的语法特性，也是原生CSS最让开发者头疼的问题之一）
变量（增强了源码的可编程能力）
运算（增强了源码的可编程能力）
mixin/继承（为了解决hack和代码复用）
模块化（不仅更利于代码复用，同时也提高了源码的可维护性）


四、CSS预处理器的选择
1、Sass
**优点**
1)    用户多，更容易找到会用scss的开发，更容易找到scss的学习资源；
2)    可编程能力比较强，支持函数，列表，对象，判断，循环等；
3)    相比less有更多的功能；
4)    Bootstrap/Foundation等使用scss；
5)    丰富的sass库：Compass/Bourbon；

**缺点**
安装node-sass会经常失败或者报错，需要使用cnpm或者手工安装

2、Less
**优点**
可以在浏览器中运行，实现主题定制功能；

**缺点**
编程能力弱，不直接支持对象，循环，判断等；
@variable 变量命名和css的@import/media/keyframes等含义容易混淆；
mixin/extend的语法比较奇怪；
mixin的参数如果遇到多参数和列表参数值的时候容易混淆；

3、Stylus
**优点**
来自NodeJS社区，所以和NodeJS走得很近，与JavaScript联系非常紧密。还有专门JavaScript API：
http://learnboost.github.io/stylus/docs/js.html
支持Ruby之类等等框架3.更多更强大的支持和功能

**缺点**
人气不高和教程较少

总结：
         Sass看起来在提供的特性上占有优势，但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS，而不需要像Sass那样需要将CSS文件转换成Sass格式。Stylus功能上更为强壮，和js联系更加紧密。
面试官：DNS的解析过程 
什么是 DNS

DNS 即域名系统，全称是 Domain Name System。当我们在浏览器输入一个 URL 地址时，浏览器要向这个 URL 的主机名对应的服务器发送请求，就得知道服务器的 IP，对于浏览器来说，DNS 的作用就是将主机名转换成 IP 地址。


DNS 是：

 一个由分层的 DNS 服务器实现的分布式数据库
 
 一个使得主机能够查询分布式数据库的应用层协议
 



 也就是，DNS 是一个应用层协议，我们发送一个请求，其中包含我们要查询的主机名，它就会给我们返回这个主机名对应的 IP；
其次，DNS 是一个分布式数据库，整个 DNS 系统由分散在世界各地的很多台 DNS 服务器组成，每台 DNS 服务器上都保存了一些数据，这些数据可以让我们最终查到主机名对应的 IP。
所以 DNS 的查询过程，说白了，就是去向这些 DNS 服务器询问，你知道这个主机名的 IP 是多少吗，不知道？那你知道去哪台 DNS 服务器上可以查到吗？直到查到我想要的 IP 为止。

分布式、层次数据库 

 什么是分布式？
这个世界上没有一台 DNS 服务器拥有因特网上所有主机的映射，每台 DNS 只负责部分映射。

什么是层次？

 DNS 服务器有 3 种类型：根 DNS 服务器、顶级域（Top-Level Domain, TLD）DNS 服务器和权威 DNS 服务器。它们的层次结构如下图所示：


 根 DNS 服务器
 

首先我们要明确根域名是什么，比如 www.baidu.com，有些同学可能会误以为 com 就是根域名，其实 com 是顶级域名，www.baidu.com 的完整写法是 www.baidu.com.，最后的这个 . 就是根域名。
根 DNS 服务器的作用是什么呢？就是管理它的下一级，也就是顶级域 DNS 服务器。通过询问根 DNS 服务器，我们可以知道一个主机名对应的顶级域 DNS 服务器的 IP 是多少，从而继续向顶级域 DNS 服务器发起查询请求。

 顶级域 DNS 服务器
 

除了前面提到的 com 是顶级域名，常见的顶级域名还有 cn、org、edu 等。顶级域 DNS 服务器，也就是 TLD，提供了它的下一级，也就是权威 DNS 服务器的 IP 地址。

 权威 DNS 服务器
 

权威 DNS 服务器可以返回主机 - IP 的最终映射。
关于这几个层次的服务器之间是怎么交互的，接下来我们会讲到 DNS 具体的查询过程，结合查询过程，大家就不难理解它们之间的关系了。


本地 DNS 服务器 

之前对 DNS 有过了解的同学可能会发现，上一节的 DNS 层次结构，为什么没有提到本地 DNS 服务器？因为严格来说，本地 DNS 服务器并不属于 DNS 的层次结构，但它对 DNS 层次结构是至关重要的。那什么是本地 DNS 服务器呢？
每个 ISP 都有一台本地 DNS 服务器，比如一个居民区的 ISP、一个大学的 ISP、一个机构的 ISP，都有一台或多台本地 DNS 服务器。当主机发出 DNS 请求时，该请求被发往本地 DNS 服务器，本地 DNS 服务器起着代理的作用，并负责将该请求转发到 DNS 服务器层次结构中。
接下来就让我们通过一个简单的例子，看看 DNS 的查询过程是怎样的，看看客户端、本地 DNS 服务器、DNS 服务器层次结构之间是如何交互的。

 递归查询、迭代查询

 如下图，假设主机 m.n.com 想要获取主机 a.b.com 的 IP 地址，会经过以下几个步骤：



 首先，主机 m.n.com 向它的本地 DNS 服务器发送一个 DNS 查询报文，其中包含期待被转换的主机名 a.b.com；
 
 本地 DNS 服务器将该报文转发到根 DNS 服务器；
 
 该根 DNS 服务器注意到 com 前缀，便向本地 DNS 服务器返回 com 对应的顶级域 DNS 服务器（TLD）的 IP 地址列表。
 意思就是，我不知道 a.b.com 的 IP，不过这些 TLD 服务器可能知道，你去问他们吧；
 
 本地 DNS 服务器则向其中一台 TLD 服务器发送查询报文；
 
 该 TLD 服务器注意到 b.com 前缀，便向本地 DNS 服务器返回权威 DNS 服务器的 IP 地址。
 意思就是，我不知道 a.b.com 的 IP，不过这些权威服务器可能知道，你去问他们吧；
 
 本地 DNS 服务器又向其中一台权威服务器发送查询报文；
 
 终于，该权威服务器返回了 a.b.com 的 IP 地址；
 
 本地 DNS 服务器将 a.b.com 跟 IP 地址的映射返回给主机 m.n.com，m.n.com 就可以用该 IP 向 a.b.com 发送请求啦。
 



“你说了这么多，递归呢？迭代呢？”
这位同学不要捉急，其实递归和迭代已经包含在上述过程里了。
主机 m.n.com 向本地 DNS 服务器 dns.n.com 发出的查询就是递归查询，这个查询是主机 m.n.com 以自己的名义向本地 DNS 服务器请求想要的 IP 映射，并且本地 DNS 服务器直接返回映射结果给到主机。
而后继的三个查询是迭代查询，包括本地 DNS 服务器向根 DNS 服务器发送查询请求、本地 DNS 服务器向 TLD 服务器发送查询请求、本地 DNS 服务器向权威 DNS 服务器发送查询请求，所有的请求都是由本地 DNS 服务器发出，所有的响应都是直接返回给本地 DNS 服务器。
那么问题来了，所有的 DNS 查询都必须遵循这种递归 + 迭代的模式吗？
当然不是。
从理论上讲，任何 DNS 查询既可以是递归的，也可以是迭代的。下图的所有查询就都是递归的，不包含迭代。

 看到这里，大家可能会有个疑问，TLD 一定知道权威 DNS 服务器的 IP 地址吗？
还真不一定，有时 TLD 只是知道中间的某个 DNS 服务器，再由这个中间 DNS 服务器去找到权威 DNS 服务器。这种时候，整个查询过程就需要更多的 DNS 报文。


 DNS 缓存


为了让我们更快的拿到想要的 IP，DNS 广泛使用了缓存技术。DNS 缓存的原理非常简单，在一个 DNS 查询的过程中，当某一台 DNS 服务器接收到一个 DNS 应答（例如，包含某主机名到 IP 地址的映射）时，它就能够将映射缓存到本地，下次查询就可以直接用缓存里的内容。当然，缓存并不是永久的，每一条映射记录都有一个对应的生存时间，一旦过了生存时间，这条记录就应该从缓存移出。
事实上，有了缓存，大多数 DNS 查询都绕过了根 DNS 服务器，需要向根 DNS 服务器发起查询的请求很少。

面试官：为什么Vue中的v-if和v-for不建议一起用？

v-for 优先级是比 v-if 高
这时候我们可以看到，v-for 与 v-if 作用再不同标签时候，是先进性判断，再进行列表的渲染
注意事项

永远不要把 v-if 和 v-for 同时用在一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
如果避免出现这种情况，则在外层嵌套 template （页面渲染不生成dom节点），再这一层进行 v-if 判断，然后再内部进行 v-for 循环
如果条件出现再循环内部，可通过计算属性 computed 提前过滤掉那些不需要显示的项


面试官：vue插槽(slot)的使用

vue的slot分为三种：:匿名插槽，具名插槽， 作用域插槽
作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于父组  件=>子组件
一.匿名插槽 
1)带有插槽 的组件 TipsText.vue（子组件）
  作为我们想要插入内容的占位符——就这么简单！

//子组件


//父组件


二.具名插槽 (给插槽加入name属性就是具名插槽)
//子组件

//父组件


三.作用域插槽
//子组件



//父组件





面试官：如何创建插件
1、新建一个plugins.js的文件（文件名可以不是plugins）
 2、plugins.js内容：
 必须有install()函数，第一参数是Vue的构造函数，剩余参数可自己传入
// plugins.js
export default {
    install(Vue) {
        console.log('使用插件了')

        // 自定义全局获取焦点指令
        Vue.directive('focus',{
            inserted: function(el){
                // el代表绑定的元素
                el.focus();
            }
        })

        // 定义一个全局过滤器 ---- 字母转大写
        Vue.filter('toUpperCase', function(val){
            return val.toUpperCase();
        });

        // 添加一个混入
        Vue.mixin({
            data() {
                return {
                    mixData: '这是mixin中数据',
                    x: 100,
                }
            },
            created () {
              console.log(this.y)
            },
            methods: {
                handleClick() {
                    console.log(this.name)
                }
            },
            computed: {
                showNumber() {
                    return this.x + this.y
                }
            }
        })

        // 给Vue原型上添加一个方法
        Vue.prototype.hello = () => {
            alert("你好啊")
        }
    }
}
面试官：HTTP 和 HTTPS 
HTTP请求的格式

HTTP的请求分成四个部分：
1、请求行；
HTTP方法：大概，描述了这个请求想要干什么，例如get意思就是想从服务器获取到什么
URL：描述了要访问的网络上的资源具体是在哪
版本号：表示当前使用的HTTP的版本是什么，目前常用的版本是1.1
2、请求报头；
这一部分一般有很多行，每一行都是一个键值对，键和值之间通过 ：空格 来分割。
3、空行；
请求头的结束标志
4、请求正文
这一部分可有可无，有时候会存在有时候没有。

 HTTP响应的格式

1,状态行 
版本号：代表当前HTTP协议的版本
状态码：描述了这个响应是表示成功还是失败的，以及不同的状态码也描述了失败的原因，常见的如404
 状态码的描述：通过一个或是一组简短的单词描述了当前状态码的含义
2,响应头
也是键值对结构，每个键值对占一行，每个键和值之间通过 ：空格 进行分割。响应头中的键值对个数是不确定的，不同的键值对也代表了不同的关系。
3, 空行
响应头的结束标志
4 ,响应正文
是服务器返回客户端的具体数据，可能会有各种不同的格式，其中最常见的格式就是HTNL。

 HTTP方法
HTTP协议的方法有很多，其中常用的是GET和POST。

 1、GET方法
 GET方法用于使用给定的URI从给定服务器中检索信息，即从指定资源中请求数据。使用GET方法的请求应该只是检索数据，并且不应对数据产生其他影响。
2、POST方法
 POST方法用于将数据发送到服务器以创建或更新资源，它要求服务器确认请求中包含的内容作为由URI区分的Web资源的另一个下属。
POST请求永远不会被缓存，且对数据长度没有限制；我们无法从浏览器历史记录中查找到POST请求。
3、HEAD方法
HEAD方法与GET方法相同，但没有响应体，仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用，而无需传输整个内容。
4、PUT方法
 从客户端向服务器传送的数据取代指定的文档的内容。
 PUT方法用于将数据发送到服务器以创建或更新资源，它可以用上传的内容替换目标资源中的所有当前内容。
它会将包含的元素放在所提供的URI下，如果URI指示的是当前资源，则会被改变。如果URI未指示当前资源，则服务器可以使用该URI创建资源。
5、DELETE方法
DELETE方法用来删除指定的资源，它会删除URI给出的目标资源的所有当前内容。
6、CONNECT方法
 HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
 CONNECT方法用来建立到给定URI标识的服务器的隧道；它通过简单的TCP / IP隧道更改请求连接，通常实使用解码的HTTP代理来进行SSL编码的通信（HTTPS）。
7、OPTIONS方法
OPTIONS方法用来描述了目标资源的通信选项，会返回服务器支持预定义URL的HTTP策略。
8、TRACE方法
TRACE方法用于沿着目标资源的路径执行消息环回测试；它回应收到的请求，以便客户可以看到中间服务器进行了哪些（假设任何）进度或增量。

HTTP特点：

1.无状态：协议对客户端没有状态存储，对事物处理没有“记忆”能力，比如访问一个网站需要反复进行登录操作
 2.无连接：HTTP/1.1之前，由于无状态特点，每次请求需要通过TCP三次握手四次挥手，和服务器重新建立连接。比如某个客户机在短时间多次请求同一个资源，服务器并不能区别是否已经响应过用户的请求，所以每次需要重新响应请求，需要耗费不必要的时间和流量。
 3.基于请求和响应：基本的特性，由客户端发起请求，服务端响应
 4.简单快速、灵活
 5.通信使用明文、请求和响应不会对通信方进行确认、无法保护数据的完整性
  

HTTPS特点：


内容加密：采用混合加密技术，中间者无法直接查看明文内容
验证身份：通过证书认证客户端访问的是自己的服务器
保护数据完整性：防止传输的内容被中间人冒充或者篡改


 常见状态码

1xx：信息提示
2xx：成功
3xx：重定向
4xx：客户端错误
5xx：服务器错误


1xx: 接受，继续处理
200: 成功，并返回数据
201: 已创建
202: 已接受
203: 成为，但未授权
204: 成功，无内容
205: 成功，重置内容
206: 成功，部分内容
301: 永久移动，重定向
302: 临时移动，可使用原有URI
304: 资源未修改，可使用缓存
305: 需代理访问
400: 请求语法错误
401: 要求身份认证
403: 拒绝请求
404: 资源不存在
500: 服务器错误


 面试官：你们项目RESTful API设计规范是什么？

动词+宾语
RESTful的核心思想就是，客户端发出的数据+操作指令都是“动词+宾语”的结构，比如GET /articles这个命令，GET是动词，/articles是宾语，动词通常就有5种HTTP请求方法，对应CRUD操作，根据 HTTP 规范，动词一律大写。
# GET：读取（Read）
# POST：新建（Create）
# PUT：更新（Update）
# PATCH：更新（Update），通常是部分更新
# DELETE：删除（Delete）

动词的覆盖
有些客户端只能使用GET和POST这两种方法。服务器必须接受POST模拟其他三个方法（PUT、PATCH、DELETE）。这时，客户端发出的 HTTP 请求，要加上X-HTTP-Method-Override属性，告诉服务器应该使用哪一个动词，覆盖POST方法。

宾语必须是名词
宾语就是 API 的 URL，是 HTTP 动词作用的对象。它应该是名词，不能是动词。比如，/articles这个 URL 就是正确的，而下面的 URL 不是名词，所以都是错误的。
复数 URL
　　既然 URL 是名词，那么应该使用复数，还是单数？这没有统一的规定，但是常见的操作是读取一个集合，比如GET /articles（读取所有文章），这里明显应该是复数。
避免多级 URL
　　常见的情况是，资源需要多级分类，因此很容易写出多级的 URL，比如获取卖手游账号平台某个作者的某一类文章。
　　# GET /authors/12/categories/2
　　这种 URL 不利于扩展，语义也不明确，往往要想一会，才能明白含义。

总 结:Restful API的接口架构风格中制定了一些规范，极大的简化了前后端对接的时间，以及增加了开发效率，在实际开发中，比如在获取列表分页的时候，对于查询参数过多的接口，会导致uri的长度过长、请求失败，在这种情况下的接口就不能完全按照Restful API的请求规范来。Restful API也就只是一种接口架构的风格，接口API永远不会强约束于此，因按照实际需求做出相应的接口需改。
面试官：git代码回滚
git回退历史，有以下步骤：

1.已push后回退:
 (1) 使用git log命令，查看分支提交历史，确认需要回退版本的
 (2) 使用git reset --hard 命令或者git revert ，进行版本回退(此时本地已回退)
 (3) 在git commit后，再次使用git push origin <分支名> --force命令，推送至远程分支(此时线上版本已回退)


快捷命令：git reset --hard HEAD^
 注:
HEAD是指向当前版本的指针，HEAD^表示上个版本，HEAD^^表示上上个版本
revert和reset的区别：
 (1) 在实际生产环境中，代码是基于master分支发布到线上的，会有多人进行提交。可能会碰到自己或团队其他成员开发的某个功能在上线之后有Bug,需要及时做代码回滚的操作。
 在确认要回滚的版本之后，如果别人没有最新提交，那么就可以直接用reset命令进行版本回退，否则，就可以考虑使用revert命令进行还原修改，不能影响到别人的提交。
 (2) reset命令会把要回退版本之后提交的修改都删除。要从第三次修改回退到第一次修改，那么会删除第二、三次的修改。【注：这里并不是真正的物理删除】
 如果发现第二次修改有错误，想要恢复第二次修改，却要保留第三次修改，使用revert命令，其产生了新的commit_id。


2.提交到暂存区后(执行git add后)回退：
git reset HEAD 命令撤销提交到暂存区的内容，再使用git checkout -- 命令，来清空工作区的修改


 3.工作区(执行git add前)回退：
git checkout -- 命令，来清空工作区的修改

  面试官：react的Component和PureComponent
介绍
 React.PureComponent 与 React.Component 几乎完全相同，但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。
在PureComponent中，如果包含比较复杂的数据结构，可能会因深层的数据不一致而产生错误的否定判断，导致界面得不到更新。

如果定义了 shouldComponentUpdate()，无论组件是否是 PureComponent，它都会执行shouldComponentUpdate结果来判断是否 update。如果组件未实现 shouldComponentUpdate() ，则会判断该组件是否是 PureComponent，如果是的话，会对新旧 props、state 进行 shallowEqual 比较，一旦新旧不一致，会触发 update。


浅对比：通过遍历对象上的键执行相等性，并在任何键具有参数之间不严格相等的值时返回false。 当所有键的值严格相等时返回true。shallowEqual


不同：
 PureComponent自带通过props和state的浅对比来实现 shouldComponentUpate()，而Component没有。
PureComponent缺点
 可能会因深层的数据不一致而产生错误的否定判断，从而shouldComponentUpdate结果返回false，界面得不到更新。
PureComponent优势
 不需要开发者自己实现shouldComponentUpdate，就可以进行简单的判断来提升性能。


 面试官： CSS3新增伪类有那些


:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行:first-letter 选择元素中的第一个字符

	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能



你可能感兴趣的:(web面试题,前端,css3,css)



android 自定义曲线图,Android自定义View——贝赛尔曲线
weixin_39767513
android自定义曲线图
个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化

浪潮 M5系列服务器IPMI无法监控存储RAID卡问题.
Songxwn
硬件服务器服务器运维
简介浪潮的M5代服务器，可能有WebBMC无法查看存储RAID/SAS卡状态的情况，可以通过以下方式修改。修改完成后重启BMC即可生效。ESXiIPMITools使用：https://songxwn.com/ESXi8_IPMI/（Linux也可以直接使用）Linux/ESXiIPMITool下载：https://songxwn.com/file/ipmitoolWindows下载：https:/

请简单介绍一下Shiro框架是什么？Shiro在Java安全领域的主要作用是什么？Shiro主要提供了哪些安全功能？
AaronWang94
shirojavajava安全开发语言
请简单介绍一下Shiro框架是什么？Shiro框架是一个强大且灵活的开源安全框架，为Java应用程序提供了全面的安全解决方案。它主要用于身份验证、授权、加密和会话管理等功能，可以轻松地集成到任何JavaWeb应用程序中，并提供了易于理解和使用的API，使开发人员能够快速实现安全特性。Shiro的核心组件包括Subject、SecurityManager和Realms。Subject代表了当前与应用

大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把

谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程
pigerr杨
Pythonpythonchromedrivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装

虚拟 DOM 的优缺点有哪些
咕噜签名分发
前端javascript开发语言
虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优

3、JavaWeb-Ajax/Axios-前端工程化-Element
所谓远行Misnearch
#JavaWeb前端ajaxelementuijava前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名

docker怎么端口映射
Lance_mu
docker容器运维
1、默认固定的端口#Web服务器：WebApache或Nginx通常使用80端口HTTP：80HTTPS：443#数据库服务器MySQL：3306PostgreSQL：5432MongoDB：27017Redis：6379#邮件服务器SMTP：25POP3：110IMAP：143#其他服务SSH：22FTP：21DNS（域名解析）：53代理服务器Squid：3128版本控制系统Git：9418(S

网络安全（黑客）——自学2024
小言同学喜欢挖漏洞
web安全安全网络学习网络安全信息安全渗透测试
01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一

黑客（网络安全）技术自学30天
一个迷人的黑客
web安全安全网络笔记网络安全信息安全渗透测试
01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一

MyBatis高级面试题-2024
my_styles
mybatisjava开发语言面试题
MyBatis的核心组件有哪些？首先第一个是，SqlSessionFactory，它就像是一个会话工厂。它的任务是创建SqlSession对象，这个对象是我们与数据库交互的主要途径。SqlSessionFactory的作用很重要，因为它可以帮我们配置数据库连接信息和事务管理等。一旦这个工厂被建立起来，它就会加载一些必要的配置和映射文件，为后续的数据库操作提供一个可靠的基础。第二个是SqlSessi

webpack.prod.js（webpack生产环境配置文件）
门板_
webpackjavascript前端
生产环境：只打包不运行本地服务器对于在config目录下的webpack.prod.js1.在根目录下运行npxwebpack--config./config/webpack.prod.js2.在package.json文件中配置"build":"npxwebpack--config./config/webpack.prod.js"constpath=require('path')constESL

VUE 页面禁止缩放（华为平板浏览器可能失效）
唐屁屁儿
JSvuewebviewjavascript
h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()

java实体中返回前端的double类型四舍五入（格式化）
婲落ヽ紅顏誶
java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f

Django forms组件
在飞行-米龙
Djangodjangopython后端
【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict

Vue 常见面试题(一)
安生生申
面试题vue.js前端javascript
目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）

UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS
liferecords
LLM语言模型人工智能自然语言处理
UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调

自学黑客（网络安全）技术——2024最新
九九归二
web安全安全学习笔记网络网络安全信息安全
01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一

Webpack构建优化——区分环境
oWSQo
为什么需要区分环境在开发网页的时候，一般都会有多套运行环境，例如：在开发过程中方便开发调试的环境。发布到线上给用户使用的运行环境。这两套不同的环境虽然都是由同一套源代码编译而来，但是代码内容却不一样，差异包括：线上代码被特殊压缩过。开发用的代码包含一些用于提示开发者的提示日志，这些日志普通用户不可能去看它。开发用的代码所连接的后端数据接口地址也可能和线上环境不同，因为要避免开发过程中造成对线上数据

java基础相关面试题详细总结
。。。。。96
java开发语言
1.Java中的数据类型有哪些？答：Java中的数据类型包括基本数据类型（如整数、浮点数、字符等）和引用数据类型（如类、接口、数组等）。2.什么是面向对象编程（OOP）？答：面向对象编程是一种编程范式，它将数据和对数据的操作封装在一起，形成对象。通过对象之间的交互来实现程序的功能。3.解释类和对象的关系。答：类是对象的抽象描述，而对象是类的具体实例。一个类可以创建多个对象，每个对象都具有类中定义的

Web前端Html的表单
任家伟
前端html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单

Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）
王佳斌
+Thinkphpmysql前端数据库
前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。

Java面试题：解释JVM的内存结构，并描述堆、栈、方法区在内存结构中的角色和作用，Java中的多线程是如何实现的，Java垃圾回收机制的基本原理，并讨论常见的垃圾回收算法
杰哥在此
Java系列javajvm算法面试
Java内存模型与多线程的深入探讨在Java的世界里，内存模型和多线程是开发者必须掌握的核心知识点。它们不仅关系到程序的性能和稳定性，还直接影响到系统的可扩展性和可靠性。下面，我将通过三个面试题，带领大家深入理解Java内存模型、多线程以及并发编程的相关原理和实践。面试题一：请解释JVM的内存结构，并描述堆、栈、方法区在内存结构中的角色和作用。关注点：JVM内存结构的基本组成堆、栈、方法区的功能和

react native 总结
一切顺势而行
reactnativereact.jsjavascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su

JSON与AJAX：网页交互的利器
入冉心
jsonajax前端
在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据

程序员开发技术整理
laizhixue
学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工

centos7 安装influxdb+telegraf+grafana 监控服务器
吕吕-lvlv
grafana服务器运维
influxdbinfluxdb是一个时间序列数据库,所有数据记录都会打上时间戳,适合存储数字类型的内容telegraftelegraf可以用于收集系统和服务的统计数据并发送到influxdbgrafanagrafana是一个界面非常漂亮,可直接读取influxdb数据展示成各种图表的开源可视化web软件安装并启动influxdb数据库vim/etc/yum.repos.d/influxdb.re

【前端学习——js篇】7.函数缓存
笔下无竹墨下有鱼
前端学习前端学习javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的

Python自动化测试web常见框架汇总
自动化测试薰儿
软件测试技术分享python前端开发语言
1、前言目前，有非常多的Python框架，用来帮助你更轻松的创建web应用。这些框架把相应的模块组织起来，使得构建应用的时候可以更快捷，也不用去关注一些细节（例如socket和协议），所以需要的都在框架里了。接下来我们会介绍不同的选项。经过初期的不起眼，Python已经成为互联网最流行的服务端编程语言之一。根据W3Techs的统计，它被用于很多的大流量的站点很多的大流量的站点很多的大流量的站点，超

html版本号 webpack_html-webpack-plugin详解
weixin_39994949
html版本号webpack
引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面

mongodb3.03开启认证
21jhf
mongodb
下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下：
（百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略）
Windows下我做了一个bat文件，用来启动mongodb，命令行如下：
mongod --dbpath db\data --port 27017 --directoryperdb --logp

【Spark103】Task not serializable
bit1129
Serializable
Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法
1.
 
package spark.exampl

你所熟知的 LRU(最近最少使用)
dalan_123
java
关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现
1、大体的想法
    a、查询出最近最晚使用的项
    b、给最近的使用的项做标记
通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？
这时候多

Javascript 跨域
周凡杨
JavaScriptjsonp跨域cross-domain
 
                                 

linux下安装apache服务器
g21121
apache
安装apache
下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi
  1.windows下安装apache
Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache：
下载之后上传到linux的相关目录，这里指定为/home/apach

FineReport的JS编辑框和URL地址栏语法简介
老A不折腾
finereportweb报表报表软件语法总结
  JS编辑框：
1.FineReport的js。
作为一款BS产品，browser端的JavaScript是必不可少的。
FineReport中的js是已经调用了finereport.js的。
大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun

根据STATUS信息对MySQL进行优化
墙头上一根草
status
mysql  查看当前正在执行的操作，即正在执行的sql语句的方法为:
     show processlist 命令
 
mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab

我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名
aijuans
Spring 3
本文介绍如何给Spring的Bean配置文件的Bean定义别名？
原始的
<bean id="business" class="onlyfun.caterpillar.device.Business">
<property name="writer">
<ref b

高性能mysql 之 性能剖析
annan211
性能mysqlmysql 性能剖析剖析

1 定义性能优化
mysql服务器性能，此处定义为 响应时间。
在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。
这是一个陷阱。
资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现
编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不

主外键和索引唯一性约束
百合不是茶
索引唯一性约束主外键约束联机删除
目标;第一步;创建两张表 用户表和文章表
        第二步;发表文章
 
 
  1,建表;
---用户表 BlogUsers
--userID唯一的
--userName
--pwd
--sex
create 

线程的调度
bijian1013
java多线程thread线程的调度java多线程
1.       Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。
 
2.       多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商）
a) 

查看日志常用命令
bijian1013
linux命令unix
一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log
 
二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l

【持久化框架MyBatis3一】MyBatis版HelloWorld
bit1129
helloworld
MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。
  样例数据
本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查
 
 
CREATE TABLE STUDENTS
(
stud_id int(11) NOT NULL AUTO_INCREMENT,


【Hadoop十五】Hadoop Counter
bit1129
hadoop
 
 1. 只有Map任务的Map Reduce Job
File System Counters
FILE: Number of bytes read=3629530
FILE: Number of bytes written=98312
FILE: Number of read operations=0
FILE: Number of lar

解决Tomcat数据连接池无法释放
ronin47
tomcat 连接池　优化

近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。
今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。
简单分析了一

java-75-二叉树两结点的最低共同父结点
bylijinnan
java

import java.util.LinkedList;
import java.util.List;
import ljn.help.*;
public class BTreeLowestParentOfTwoNodes {
public static void main(String[] args) {
/*
* node data is stored in

行业垂直搜索引擎网页抓取项目
carlwu
LuceneNutchHeritrixSolr
公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！
这是详细需求：
（1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。
（2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。


[通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费
comsci
资源

      降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。
    &nbs

Java时区转换及时间格式
Cwind
java
本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。
 
问题描述：
向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。


readonly,只读，不可用
dashuaifu
jsjspdisablereadOnlyreadOnly
readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事：
使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）
  

LABjs、RequireJS、SeaJS 介绍
dcj3sjt126com
jsWeb
LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更

[应用结构]入口脚本
dcj3sjt126com
PHPyii2
入口脚本
入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。
Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。
控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文

haoop shell命令
eksliang
hadoophadoop shell

cat
chgrp
chmod
chown
copyFromLocal
copyToLocal
cp
du
dus
expunge
get
getmerge
ls
lsr
mkdir
movefromLocal
mv
put
rm
rmr
setrep
stat
tail
test
text


MultiStateView不同的状态下显示不同的界面
gundumw100
android
只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。
PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。
<com.kennyc.view.MultiStateView xmlns:android=&qu

jQuery实现页面内锚点平滑跳转
ini
JavaScripthtmljqueryhtml5css
平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。
 
效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码：
&

kafka offset迁移
kane_xie
kafka
在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。
 
到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。
 
从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适

android > 搭建 cordova 环境
mft8899
android
 
1 , 安装 node.js  
     http://nodejs.org
    
node -v   查看版本
 
2, 安装 npm
 
可以先从  https://github.com/isaacs/npm/tags  下载 源码 解压到

java封装的比较器，比较是否全相同，获取不同字段名字
qifeifei
 非常实用的java比较器，贴上代码：
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
i

记录一些函数用法
.Aky.
位运算PHP数据库函数IP
高手们照旧忽略。
想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧）
当然用到了ip2long()函数把字符串转为整型数

sublime text 3 rust
wudixiaotie
Sublime Text
1.sublime text 3 => install package => Rust
2.cd ~/.config/sublime-text-3/Packages
3.mkdir rust
4.git clone https://github.com/sp0/rust-style
5.cd rust-style
6.cargo build --release
7.ctrl








按字母分类：
ABCDEFGHIJKLMNOPQRSTUVWXYZ其他






首页 -
关于我们 -
站内搜索 -
Sitemap -
侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.