前端知识点

前言

所有笔记可在Github下载：前端知识点链接，觉得对你有帮助的可start一下。

CSS

1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同？

答：CSS3的盒子模型由margin，border，padding，content四部分组成。其中W3C标准盒子模型和低版本IE盒子模型的区别在于width和height所包含的内容不同，css3标准盒模型的width和height只包含了content，而低版本的IE盒子模型width和height包含有border,padding,content。标准盒子模型的box-sizing:content-box，在实际开发中，若要将标准盒子模型转换成IE怪异模型使用box-sizing:border-box即可。

2. CSS选择器有哪些？

<div id="container" class="wrapper-box">
	<span>行内元素</span>
	<p>这是一行段落</p>
	<p>这是一行段落</p>
	<input type="text">
</div>

答：（1）id选择器 #container

​ （2）类名选择器 .wrraper-box

​ （3）标签选择器 div / p

​ （4）子选择器 div > p

​ （5）后代选择器 div p / #container p / .wrraper-box p

​ （6）通配符选择器 *

​ （7）伪类选择器 p:nth-child(1) / p:nth-child(2)

​ （8）伪元素选择器 div::before p::after

​ （9）兄弟选择器 span~p

​ （10）相邻选择器 span+p

​ （11）属性选择器 input[type]

注意： 兄弟选择器：找到指定的元素后面的所有满足条件的兄弟元素

​ 相邻选择器：选择紧接在某个元素后的元素，并且二者具有相同的父级元素

3.::before和:after中双冒号和单冒号的区别？解释一下这2个元素的作用。

答：在css3中使用::双冒号代表伪元素,:单冒号代表伪类，但是在部分浏览器中也可以使用:单冒号来表示伪元素，::before代表将元素内容生成在使用标签之前。伪类一般匹配的是元素的特殊状态，如hover,visited,link等；伪元素一般匹配的是元素的特殊位置, 如::after, ::before等。

• ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
• :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

4.CSS中哪些元素是可以继承的？

字体系列属性：font-size，font-family，font-weight，font-style，font

文本属性：text-indent，text-align，text-shadow，line-height，word-spacing，letter-spacing，color

光标属性：cursor

列表属性：list-style，list-style-image，list-style-type，list-style-position

元素可见性：visibility

5.CSS选择器优先级？

!important > 内联选择器 > ID选择器 > 类名选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器 > *

6.CSS优先级算法如何计算？

答：内联选择器 1，0，0，0

​ ID选择器 0，1，0，0

​ 类名选择器/属性选择器/伪类选择器 0，0，1，0

​ 标签选择器/伪元素选择器 0，0，0，1

其中！important!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

#container .wrapper-box div {} 则是0，1，1，1
#container #box .wrapper-box div {} 则是0，2，1，1

7.关于伪类LVHA的解释？

答：a标签有四种状态：链接访问前，链接访问后，鼠标滑过，激活，分别对应四种伪类：:link :visited :hover :active

（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；
（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

8.CSS3新增伪类有哪些？

答：（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数。

（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。

（3）elem:last-child选中最后一个子元素。

（4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。

（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。

（6）elem:first-of-type选中父元素下第一个elem类型元素。

（7）elem:last-of-type选中父元素下最后一个elem类型元素。

（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。

（9）elem:empty选中不包含子元素和内容的elem类型元素。

（10）elem:target选择当前活动的elem元素。

（11）:not(elem)选择非elem元素的每个元素。

（12）:enabled 控制表单控件的禁用状态。

（13）:disabled 控制表单控件的禁用状态。

（14）:checked单选框或复选框被选中。

9.如何实现div居中？

答：（1）使用margin: 0 auto；实现水平居中。

​ （2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。

​ （3）使用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。

​ （4）使用相对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后通过使用transform：translate(-50%, -50%)，可以实现水平和垂直方向上的居中。

​ （5）使用flex布局，将justify-content：center align-item：center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

注意：对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

10.display有哪些值？说明他们的作用。

block：块类型。默认宽度为父元素的宽度，可设置宽高，换行显示。

inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block：默认宽度为内容宽度，可以设置宽高，同行显示。

none：元素不显示，并从文档流中移除。

list-item：像块类型元素一样显示，并添加样式列表标记。

table：此元素会作为块级表格来显示。

inherit： 规定应该从父元素继承display属性的值。

11.position 的值 relative 和 absolute 定位原点是？

relative定位的元素，是相对于元素本身所在文档流中的位置进行定位的。

absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的padding box来进行定位的。
我们可以这样来理解，我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元素的padding box来定位，也就是说在计算定位距离的时候，padding的值也要算进去。

12.什么是重排？什么是重绘？怎样引起对应的产生？

重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。

重绘（repaint/redraw）：重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

引起重排

• 页面初始渲染，这是开销最大的一次重排
• 添加/删除可见的DOM元素
• 改变元素位置
• 改变元素尺寸，比如边距（margin）、填充（padding）、边框（border）、宽度和高度等
• 改变元素内容，比如文字数量，图片大小等
• 改变元素字体大小
• 改变浏览器窗口尺寸，比如resize事件发生时
• 激活CSS伪类（例如：:hover）
• 通过display：none隐藏一个DOM节点
• 给页面中的DOM节点添加动画

引起重绘

• 改变颜色color
• 通过visibility：hidden隐藏元素
• 改变border-style
• 添加圆角、阴影
• outline

13.display:none 和 visibility：hidden的区别？

相同点：都可控制元素的显示和隐藏

不同点：display：none脱离文档流，DOM树中消失，会引起重排（回流）和重绘，visibility：hidden占文档流，依旧占据了空间，不会引起重排（回流），会引起重绘。

14.说一下对BFC的了解？

BFC:块级格式化上下文（block formatting context），一个元素开启了BFC后其内部的元素布局不会影响外部元素的布局，同时外部元素布局也不会影响BFC内部。

产生BFC的条件：

• overflow属性不为visible
• position属性不为static和relative
• display属性为table-cell，inline-block，table-caption
• float属性不为none

BFC解决了什么问题？

1. float引起的父元素高度塌陷
2. 清除元素内部浮动
3. 解决盒子margin折叠问题

15. 如何清除float浮动？

1. 给父元素添加一个高度（注意：高度必须大于等于子元素的最大高度）
2. 使用伪元素::after，::before
3. 使用BFC特性
4. 使用clear:both属性，子元素空白标签使用该属性即可

16.请解释一下CSS3的Flex box（弹性布局）

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的弹性元素。设置为flex布局后，其子属性的float，clea和vertical-align无效。

一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的辅轴。我们可以使用flex-direction来指定主轴的方向。我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在辅轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。

同时使用align-self属性可以指定该元素的特定排序位置。

17.用纯 CSS 创建一个三角形的原理是什么？

采用的是相邻边框连接处的均分原理。
将元素的宽高设为0，只设置
border，把任意三条边隐藏掉（颜色设为
transparent），剩下的就是一个三角形。
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
border-top: none; // 加上这一行可以让三角形顶格， 不加三角形会下移20px

注意：

• 取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的
• 当仅有邻边时， 两个边会变成对分的三角
• 当保留边没有其他接触时，极限情况所有东西都会消失

18.如何实现文本溢出的省略样式？

1.单行文本溢出

{
    white-space: nowrap; // 文字强制不换行
 	text-overflow: ellipsis; // 文字溢出换省略号
 	overflow: hidden; // 溢出文字隐藏
}

2.多行文本溢出

{
    word-break: break-all; // 当文本内容为纯数字时需要加上这句属性
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

19.CSS3新增特性

• box-sizing:css3 盒子模型
• border-radius:圆角边框
• box-shadow:盒子阴影
• background-size:背景图片大小
• transition:过渡
• transform:转换(位移 旋转 缩放)
• animation:动画
• linear-gradient:线性渐变
• flex布局
• 媒体查询多栏布局
• 字体图标iconfont

20.margin 和 padding 分别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干。
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。

何时应当使用margin：

• 需要在border外侧添加空白时。
• 空白处不需要背景（色）时。
• 上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

何时应当时用padding：

• 需要在border内测添加空白时。
• 空白处需要背景（色）时。
• 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

21.px、em、rem、vh、vw分别是什么？

• px：物理像素，绝对单位
• em：相对与自身字体大小，如果自身没有设置字体大小会相对于父级字体大小，倘若父级也没有则继续向上寻找，直到找到html为止
• rem：相对于html的字体大小，相对单位
• vw：相对于屏幕宽度的大小，相对单位
• vh：相对于屏幕高度的大小，相对单位

vw和vh也常用来做移动端适配。

22.在谷歌浏览器中如何实现小于12px的文字？

我们知道在谷歌浏览器中，当css设置小于等于12px样式时，页面显示都是12px。解决的方法有：

1. 可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size
   -adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
2. 还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.
   75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/…。
3. 使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

23.你对line-height是如何理解的？

• 行高是指一行文字的高度，具体说是两行文字间基线的距离。
• CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
• 单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
• 多行文本垂直居中：需要设置display属性为inline-block。

24.设置一个两行固定中间内容自适应的布局？

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

<style>
    .container {
        display: flex;
        width:100%;
        height:100px;
    }
    
    .left {
        width:100px;
        background:red;
    }
    
    .right {
        width: 200px;
        background: pink;
    }

    .center {
        background: skyblue;
        flex-grow: 1;
    }
</style>

25.块元素和行内元素的区别？常见的块元素和行内元素有哪些？

块元素：独占一行，宽度自动填满父元素宽度。能够达到最大宽度且前后各有一个换行。可以包含行内元素和块元素。可以通过css改变宽高。

行内元素：不会独占一行，其宽度随元素的内容而变化，相邻的行内元素会排列到同一行，直到排列不下才换行。

行内元素设置：width、height、padding-top、padding-bottom、margin-top、margin-bottom无效。

常见的块级元素：div、p、h、ul、li、form…等

常见的行内元素：a、img、span、li、em、strong…等

26.说一下link和@import的区别？

1. link是HTML标签，用于在HTML文档中引入外部CSS文件；而@import是CSS规则，用于在CSS文件中引入其他CSS文件。
2. link可以在HTML文档的head部分或body部分引入CSS文件，而@import只能在CSS文件中使用。
3. link可以同时引入多个CSS文件，而@import只能引入一个CSS文件。
4. link在页面加载时同时加载CSS文件，而@import在页面加载完毕后再加载CSS文件，可能会导致页面闪烁。
5. link可以通过rel属性指定CSS文件的关系，如stylesheet、alternate stylesheet等；而@import没有这个属性。

27.说一下引入样式表CSS的方式有几种？分别是什么？优先级是什么？

在HTML中引入css样式通常有4种方式。

• 内联样式（行内样式）
• 嵌入式
• 外部引入（link）
• 导入样式@import

优先级：就近原则

内联样式（行内样式）> 嵌入式 > 外部样式 > 导入样式

HTML

1.说一下HTML语义化的好处？

• 提高代码的可阅读性
• 有利于提高SEO-搜索引擎优化（Search Engine Optimization）
• 利于页面内容结构化

常见的语义化标签：main、footer、header、aside、input…

2.如何获取body和html对象？

获取body对象：document.body;

获取HTML对象：document.documentElement;

3. 说一下innerHTML和innerText的区别？

相同点：都可以对元素的内容进行读写操作。

element.innerText：从起始位置到最终位置的内容，但去除html标签、空格、换行

element.innerHTML：从起始位置到最终位置的全部内容，包括html标签、空格、换行

4.说一下H5自定义属性data-？

在html5中我们可以使用data-xxx设置元素的自定义属性，在javascript中使用dataset.xxx的形式获取元素的自定义属性即可。

5.说一下回流和重绘？

回流（重排）：

当渲染树中部分或全部元素的尺寸、结构、位置、属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。（重排）

下面这些操作会导致回流：

• 页面的首次渲染
• 浏览器的窗口大小发生变化
• 元素的内容发生变化
• 元素的尺寸或者位置发生变化
• 元素的字体大小发生变化
• 激活CSS伪类
• 查询某些属性或者调用某些方法
• 添加或者删除可见的DOM元素

重绘：

当页面元素样式改变不影响元素在文档流中的位置时（background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制的过程成为重绘。

• color、background 相关属性：background-color、background-image 等
• outline 相关属性：outline-color、outline-width 、text-decoration
• border-radius、visibility、box-shadow
• visibility

注意： 当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。

6.说一下对响应式布局的理解，怎么实现？

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

1. 百分比布局
2. rem布局
3. 媒体查询@media screen
4. flex布局
5. vh和vw布局

7.说一下单页面和多页面的优缺点？

单页面：

优点：页面切换快

因为页面每次切换时，不需要做HTML文件的请求，减少了http请求

缺点：首屏加载时间慢，SEO（搜索引擎优化）差

因为首屏时需要请求html，同时还要发送js请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。

SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容

多页面就相反

8.如何解决单页面首屏加载慢问题？

进行相应的性能优化操作，如：

• 路由懒加载
• 代码压缩
• CDN加速
• 网路传输压缩
• SSR服务器渲染

9.说一下H5新增？

新增语义化标签：header、section、aside、footer、nav、article

新增数据存储方法：sessionStorage、localStorage

新增音频标签audio、新增视频标签video

新增绘画canvas和svg元素；

新增input标签的type属性类型：date、time、month、email、url、search、range、color、number；

新增表单input元素验证：required、pattern；

新增获取用户地理位置定位API：Geolocation。

10.说一下什么是事件？

事件是指用户在浏览器中的各种操作，如点击、鼠标启动、键盘输入等。JavaScript可以通过监听这些事件，响应用户的操作，从而实现交互式的网页效果。

11.块元素和行内元素的区别？常见的块元素和行内元素有哪些？

块元素：独占一行，宽度自动填满父元素宽度。能够达到最大宽度且前后各有一个换行。可以包含行内元素和块元素。可以通过css改变宽高。

行内元素：不会独占一行，其宽度随元素的内容而变化，相邻的行内元素会排列到同一行，直到排列不下才换行，设置margin上下无效，左右有效，padding有效。

行内元素设置：width、height、padding-top、padding-bottom、margin-top、margin-bottom无效。

常见的块级元素：div、p、h、ul、li、form…等

常见的行内元素：a、img、span、li、em、strong…等

12.说一下对web标准和w3c标准的理解？

web标准主要分为结构、表现、行为3部分

结构：指我们平时在body里面写的标签，主要由HTML标签组成

表现：指更加丰富的HTML标签样式，主要由css组成

行为：指页面和用户的交互，主要由js部分组成

w3c：对web标准提出了规范化的要求，即代码规范

对结构的要求

1、标签字母要小写

2、标签要闭合

3、标签不允许随意嵌套

对表现和行为的要求

1、建议使用外链CSS和js脚本，实现结构与表现分离、结构与行为分离， 能提高页面的渲染效率，更快地显示网页内容

13.说一下HTML5的新增表单元素？

HTML5拥有若干涉及表单的元素

• detailist：元素规定输入域的选项列表
• keygen：提供一种验证用户的可靠方法
• output：output元素用于不同类型的输出

说明：

• 若想要把datalist绑定到某个文本框，需要设置该文本框的list属性值等于datalist的id的值。
• output元素是一个行内元素，比span元素更具有语义化。

表单type属性（验证型）

属性值	说明
email	邮件类型
tel	电话号码
url	url类型

表单新增type’属性’（取值型）

属性	说明
range	取数字(滑块方式)
number	取数字(微调方式)
color	取颜色
date	取日期(如2018-11-11)
month	取月份
week	取周数
time	取时间(如08:04)

14.说一下readonly和disabled的区别？

相同点：都能使用户不能修改表单的内容

不同点：

1. readonly只对input、textarea有效，但是disabled对所有的表单元素都有效，包括radio、checkbox
2. readonly可以获取到焦点，只是不能修改。disabled设置的文本框无法获取焦点
3. 如果表单字段是disabled，则该字段不会发送（表单传值）和序列化

javaScript

1.说一下javaScript数据类型？基本数据类型和引用数据类型的区别是什么？

javascript数据类型分为基本数据类型和引用数据类型，基本数据类型有7种，分别是Number、String、Undefined、Null、Boolean、Symbol、BigInt；引用数据类型有Object、Array、Date、Functiond，Rexp等。

基本数据类型和引用数据类型的区别是：存储方式的不同，基本数据类型的存储在栈内存中，而引用数据类型的存储在堆内存中，栈内存存储的是堆内存指针起始地址。

2.说一下javascript有几种判断数据类型的方法？

1. typeof：判断基本数据类型，引用数据类型只能判断function，其余全部返回object；
2. instanceof：主要用于引用数据类型的判断，是根据原型链进行判断的，输出的是true or false；
3. constructor：不能判断undefined和null，输出的是true or false；
4. Object.prototype.toString.call()：可以判断任何数据类型，输出的形式是[object ‘数据类型’]

console.log(typeof null); // object
console.log((9).constructor === Number); // true
console.log(obj instanceof Object); // true
console.log(Object.prototype.toString.call(obj)); // [object Object]

3.说一下cookie、localStorage、sessionStorage的区别？

相同点：都是存储在浏览器本地的

不同点：

1. 存储位置：cookie由服务端写入，而localStorage、sessionStorage由前端写入
2. 声明周期：cookie在服务器端写入后的时候就设置好了，localStorage写入就一直存在，除非手动清除，sessionStorage在页面关闭时就自动清除
3. 存储大小：cookie的存储空间大概4KB，localStorage、sessionStorage的存储空间比较大，大概在5M
4. 数据共享：Cookie、sessionStorage、 localStorage数据共享都遵循同源原则，sessionStorage还限制必须是同一个页面。在前端给后端发送请求的时候会自动携带Cookie中的数据，但是sessionStorage、 localStorage不会
5. 应用场景：cookie用于存储验证信息SessionID或者token，localStorage常用于存储不易变动的数据，减轻服务器的压力，sessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。

4.说一下闭包？

闭包就是：能够读取其他函数内部变量的函数

好处：

1. 可以读取其他函数的内部变量
2. 将变量始终保存在内存中
3. 可以封装对象的私有属性和方法

坏处：消耗内存、使用不当会造成内存溢出问题

5.说一下promise是什么与使用方法？

1.概念：promise是异步编程的一种解决方案，解决了回调地狱问题。promise由三种状态：pending（进行中）fulfilled（成功）rejected（失败）

2.使用方法：promise参数接收一个函数，函数接收两个回调函数，分别是resolve,reject,函数体内可以使用多个resolve和reject，但是只执行第一个。我们可以调用.then()方法进行回调函数的执行，then方法接收两个函数参数，第一个函数查看resolve内容，第二个函数查看reject内容，同时也可使用。catch()方法进行reject内容的查看。

6.说一下事件循环Event loop、宏任务、微任务？

js是单线程机制，主线程在执行时会不断循环往复的从同步队列中读取任务，执行任务，当同步任务队列执行完毕后，再从异步队列任务中依次执行。宏任务和微任务都是异步任务，且微任务的执行优先级比宏任务高，因此每次都是执行完微任务再执行宏任务。宏任务有：定时器、DOM事件、Ajax事件。微任务有：promise回调、process.nextTick、async/await 等。

7.说一下跨域是什么？如何解决跨域？

跨域：受浏览器同源策略影响（协议，域名，端口号）中的一个不同时，不能执行其他网站的脚本。

解决方法：

• jsonp，只能解决GET请求
• node.js中间件
• 前端配置proxy代理
• 服务器端进行cors配置，原理是设置请求头setHeader(Access-Control-Allow-Origin, ‘对应的域名’)
• nginx反向代理

8.说一下map和forEach的区别？

相同点：都可以进行数组的的遍历，接收的参数相同，第一个是当前遍历对象item，第二个是当前遍历数组下标，第三个是遍历数组。

不同点：

1. 返回结果不同：forEach返回的结果是undefined，map会返回一个新数组，因此需要return出去
2. map的执行效率比forEach的高

9.说一说创建ajax的过程？

1. 创建XMLHttpRequest对象，创建一个异步调用对象；
2. 创建一个新的Http请求，并设置对应的请求方法、请求地址、验证信息；
3. 发送Http请求；
4. 创建响应HTTP请求状态变化的函数，其中200<=state<=299，readyState === 4 就代表响应成功；

10.说一下ES6箭头函数？

箭头函数是ES6规范引入的，与普通function函数相比，箭头函数写法更简洁。箭头函数的特点是：

• this指向是静态的，this是通过继承外部函数环境中的变量获取的，call、bind、apply都无法改变其this的指向
• 没有Constructor方法，因此不能做构造函数，不能使用new命令，否则会报错
• 不能使用arguments，可以使用…reset进行参数的接收
• 没有prototype原型

11.说一下JS变量提升？

var声明的变量存在变量提升、let与const声明的变量不存在提升，但是存在暂时性死区的问题。

变量提升：在js编译阶段将该被声明的变量提升至代码的最前面。同时声明优先级来说，函数提升优先级大于变量提升，变量提升会覆盖掉函数提升 暂时性死区：暂时性死区是在变量未定义之前，就访问该变量所造成的的问题

12.说一下axios拦截器原理？

axios拦截器分为请求拦截器和响应拦截器，请求拦截器：在发送请求前做一些必要的操作处理，例如：添加统一cookie，请求体加验证，设置请求头等，相当于每一个接口里相同操作的一个封装；响应拦截器的功能也是如此，只是在得到响应数据后进行操作处理，例如：数据统一处理，判断用户登录失效

13.说一下undefined和null的区别，如何让一个属性变成null？

首先 Undefined 和 Null 都是基本数据类型，undefined是全局对象的一个属性，当变量被定义但没被赋值、一个函数没有返回值、读取对象不存在的属性或者函数定义了参数但是没有传实参时，这个时候都是undefined。

null代表对象的值未设置，相当于一个对象没有设置指针地址就是null。

直接将属性显式赋值成null即可。

14.说一下isNaN

isNaN() 函数 检查参数是否为非数值

若是字符串，对象…返回结果为true

若是数值返回结果为false

需要注意的是：

数字形式的字符串。例如 “123”、“-3.1415”，虽然是字符串型，但被 isNaN() 判为数，返回 false。（“12,345,678”，“1.2.3” 这些返回 true）

15.说一下js垃圾回收机制？

我们将有些已经被使用过的，后续可能不会再使用的数据称为垃圾数据，数据一直保存在内存中，占用的内存会越来越多，为了防止内存泄漏，程序会不定期的寻找不再使用的变量，并释放掉他们所占用的内存空间。垃圾回收机制主要通过“标记-清除”来进行变量回收，当变量进入环境时，会标记为“进入环境”。当变量离开环境时，会标记为“离开环境”，标记为“离开环境”的变量就会回收内存。

16.说一下数组去重的方法？

1. filter + indexOf
2. 双重循环
3. includes
4. Set集合

17.说一下 == 和 ===的区别？

==在允许强制转换的条件下检查值的等价性，===在不允许强制转换的条件下检查值的等价性。

==当两边的值相同时判断即为true，===当且仅当两边的类型和值相同时判断才为true

例如: 55 == ‘55’ (true) 55 === ‘55’ (false)

18.{} 和 [] 的 valueOf 和 toString 的结果是什么？

{}.valueOf(); // {}
{}.toString(); // "[object Object]"
[].valueOf(); // []
[].toString(); // ""

19.说一下原型和原型链？

所有的函数都有prototype属性（原型），即原型是函数的一个属性

所有的对象身上都有__proto__属性

在javascript中，每一个函数都有一个原型属性prototype指向自身的原型，而这个函数创建的实例也会有一个__proto__对象指向自己的原型，函数的原型是一个对象，而函数的原型也会有__proto__属性指向自己的原型，这样逐层深入到Object对象的原型，这样就形成了原型链。

20. 说一下回调函数?

概念：如果将函数A作为参数传递给函数B时，我们称函数A为回调函数。

fn() {
    console.log('我是函数A');
}

// fn传递给了setInterval因此fn就是一个回调函数
SetInterval(fn, 1000);

21.说一下作用域和作用域链？

函数和变量的可使用范围称为作用域。

每一个函数都有作用域链，查找变量或者函数时，需要从局部作用域到全局作用域依次查找，这些作用域集合称作作用域链。

22. 说一下typeof null是object的原因？

在javascript中，不同的对象是使用二进制存储的，当二进制前3位为0时，系统会判断为object对象，而null的二进制全为0，因此被判断为object。

23.说一下宏任务和微任务，是怎样执行的？

宏任务和微任务都是异步任务，且微任务的执行优先级高于宏任务

微任务：promise.then、process.nextTick、async/await等

宏任务：定时器、DOM操作、script、ajax事件

• 先执宏任务script
• 进入script后，所有同步任务主线执行
• 所有宏任务放入宏任务执行队列
• 所有微任务放入微任务执行队列
• 先清空微任务队列
• 再取一个宏任务，执行，再清空微任务队列
• 依次循环

24.说一下js的组成部分？

ECMAScript、文档对象模型、浏览器对象模型

25.说一下为什么0.1+0.2 !== 0.3？如何让它们相等？

计算机是通过二进制的方式存储数据的，计算0.1+0.2的时候，实际上是两个数的和。0.1的二进制是0.0001100…（1100循环），0.2的二进制是0.001100…（1100循环），这两个数是无限循环的数。

使用（n1 + n2）.toFixed(2)的方式可以让它们相等。

26.说一下call、applay、bind的区别？

相同点：都可以改变this的指向

不同点：传入参数的形式的不同。

• apply 接受两个参数，第一个参数指定了函数体内 this 对象的指向，第二个参数为一个带下标的集合，这个集合可以为数组，也可以为类数组。
• call 传入的参数数量不固定，跟 apply 相同的是，第一个参数也是代表函数体内的 this 指向，从第二个参数开始往后，每个参数被依次传入函数。
• bind的参数形式和call的相同，但是它不会立即执行，返回执行上下文被改变的函数，而call和apply会立即执行

27.说一下严格模式的限制？

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

禁止this指向全局对象

28.说一下内存泄漏？

内存泄漏是指：不再使用的内存没有被及时释放，导致该内存不能被使用

出现内存泄漏的结果：变慢、崩溃、延迟大等

出现内存泄露的原因：

• 全局变量
• dom清空时，还存在引用
• 定时器未清除
• 子元素存在引起的内存泄漏

29.说一下script引入的方式？

html静态引入

javascript动态引入

<script defer>：异步加载，元素解析完成后执行

<script async>：异步加载，加载完毕后立即执行，执行时会阻塞元素渲染

30.说一下var、let和const的区别？

var是es5语法，let和const是es6语法，var存在变量提升

let和const存在块级作用域，var没有

let和var是变量，可重新赋值，const是常量，不可重新赋值

31.说一下new做了什么？

1. 创建一个新的对象
2. 获取构造函数
3. 将对象的隐式原型__proto__指向构造函数的显式原型上prototype
4. 调用构造函数方法
5. 返回对象

Vue2x

1.说一下v-if和v-show的区别

相同点：都是控制元素显示和隐藏的指令

不同点：v-show控制大元素不管是ture还是false，都会被渲染，通过display：none控制元素的显示和隐藏。v-if控制的元素只有在ture时才会进行渲染，为false时不会出现在DOM树中。其中v-if消耗的性能比v-show的要大，因此v-if一般用于不频繁操作的元素，v-show更倾向于频繁操作的使用。

2.说一下vue钩子函数

1.三个阶段：挂载阶段：beforeCreate，created，beforeMount，mounted、更新阶段：beforeUpdate，updated、销毁阶段：beforeDestory，destroyed。2.每个阶段的特点：beforeCreate：创建实例之前 created：实例创建完成，执行new Vue(options)，可访问data、methods、computed、watch上的方法和数据，可进行数据请求，但是不能访问DOM结构，不能获取ref，若要操作DOM，使用nextTick函数 beforeMount：挂载之前调用，将template编译render函数 mounted：实例挂载到DOM元素上，此时可以通过DOM API获取到DOM节点，可进行数据请求 beforeUpdate：beforeupdate：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器 🤔 updated：虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新 🤔 beforeDestroy：实例销毁之前调用，this仍能获取到实例，常用于销毁定时器、解绑全局事件、销毁插件对象等操作 🤔 destroyed: 实例销毁之后 3. 父子组件执行顺序 挂载：父created -> 子created -> 子mounted> 父mounted 更新：父beforeUpdate -> 子beforeUpdated -> 子updated -> 父亲updated 销毁：父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

3.说一下Vue中$nextTick()作用与原理？

vue更新DOM时是异步执行的，修改数据后，视图不会立即更新，而是等同一事件循环中的数据完全更新完成后，再统一进行视图的更新。所以修改完数据，立即在方法中获取DOM，获取的仍然是未修改的DOM。作用：该方法中的代码会在当前渲染完成后执行，就解决了异步渲染获取不到更新DOM的问题了，原理：$nextTick()方法的实质是返回一个promise对象。

4.说一下computed与watch的区别？

computed是计算属性，依赖于其他属性值，具有缓存，只有所依赖的属性值发生变化才会进行重新计算；watch是数据监听，支持异步，每当监听的数据发生变化就会立即执行后续操作。

5.说一下$router和$route的区别？

$router是VueRouter的实例，在script标签中使用$router导航不同的url地址

$route是router的跳转对象，可以通过$route获取当前路由的name、query、parmas、path等

6.说一下组件通信？

1. 通过props属性通信
2. 通过$emit触发自定义事件
3. 使用ref
4. EventBus
5. provide和inject
6. Vuex
7. $parent或$root
8. attrs 与 listeners

7.说一下为什么vue中data是一个函数？

vue中data是一个函数且必须是一个函数，因为当vue组件每次更新时，计算机会给data开辟一个新的内存空间，实例化几次就分配几个内存地址，这样新旧数据就不会产生数据污染问题，保护各自的数据互不影响。

8.说一下v-model实现的原理？

1. v-bind绑定一个value值
2. v-on指令给当前元素绑定input事件

9.说一下scoped的作用和原理

作用：组件css作用域，防止子组件的css样式被父组件css样式覆盖

• 默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式

原理：给标签添加一个v-data-xxx的自定义属性，通过属性选择器来提高css权重

10.说一下.vue组件的组成部分？各自的含义？

template：需要渲染的区域

script：存放引入资源和业务实现的数据和操作

style：页面css样式区域

11.说一下v-if和v-for的优先级？

在vue中，永远不要把v-if和v-for同时使用在一个元素上，会造成性能消耗

在vue2x中，v-for的优先级要高于v-if的优先级

在vue3中，v-if的优先级要高于v-for的优先级

12.说一下vue中的常见修饰符？

事件修饰符

• stop：阻止事件冒泡
• prevent：阻止默认行为
• self：只触发本身
• once：只触发一次
• capture：事件捕获，与事件冒泡的方向相反，事件捕获由外向内

表单修饰符

• lazy：当光标离开标签后，才会赋值给value
• trim：过滤value首位的空格
• number：自动将value转化为数字类型

键盘修饰符

• 普通键：enter、tab、delete、space、esc、up…
• 系统修饰键:ctrl、alt、meta、shift

13.说一下vue中父子组件的生命周期？

• 父子组件的生命周期是一个嵌套的过程

• 渲染过程

  • 父beforeCreate -> 父Created -> 父beforeMount -> 子beforeCreate -> 子Created -> 子beforeMount -> 子Mounted ->父Mounted

• 子组件更新过程

  • 父beforeUpdate -> 子 beforeUpdate -> 子Updated -> 父updated

• 父组件更新过程

  • 父beforeUpdate -> 父Updated

• 销毁过程

  • 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

14.说一下diff算法？

diff算法是指对新旧虚拟节点进行对比，并返回一个patch对象，用来存储两个节点不同的地方，最后利用patch记录的消息局部更新DOM。

15.说一下:key的理解？

:key是为 Vue 中 vnode 的唯一标记，因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一对比，当新节点和旧节点的：key值相同时会进行复用，没有设置key值时会对页面的节点进行全部的渲染，性能消耗较大，vue中key值相等于一个性能优化的处理。key值的设置不能是元素的index

16.说一下虚拟DOM的优缺点？

• 缺点
  • 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢
• 优点
  • 减少了dom操作，减少了回流与重绘
  • 保证性能的下限，虽说性能不是最佳，但是它具备局部更新的能力，所以大部分时候还是比正常的DOM性能高很多的

17.说一下vue双向绑定？

vue.js是采用数据劫持结合发布者-订阅者模式德方式，通过Object.definePropoty()来劫持各个属性的getter和setter，在数据变动时发布消息给订阅者，触发相应的监听回调。·

18.说一下为什么vue中有时候数组会更新页面，有时候不更新？

因为在vue内部只能监测数组顺序/位置的改变/数组长度的改变，但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()。

以下方法会触发数组改变，v-for会监测并更新到页面

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

19.说一下keep-alive？

keep-alive是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。（vue文档原话）

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
<component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
<component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
<component :is="view" />
</KeepAlive>

我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

名称	描述
activated	在 keep-alive 组件激活时调用， 该钩子函数在服务器端渲染期间不被调用。
deactivated	在 keep-alive 组件停用时调用，该钩子在服务器端渲染期间不被调用。

20.说一下导航钩子有哪些？他们有什么参数？

导航钩子又称为导航守卫，又分为全局钩子、单个路由独享钩子和组件级钩子

全局钩子有：beforeEach、beforeResolve、afterEach

单个路由独享钩子：beforeEnter

组件级钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

它们有以下参数

• to：即将要进入的目标路由对象。
• from：当前导航正要离开的路由。
• 一定要用这个函数才能到达下一个路由，如果不用就会遭到拦截。

21. 说一下vue-router的模式？

hash模式

• 监听hashchange事件实现前端路由，利用url中的hash来模拟一个hash，以保证url改变时，页面不会重新加载。

history模式

• 利用pushstate和replacestate来将url替换但不刷新，但是有一个致命点就是，一旦刷新的话，就会可能404，因为没有当前的真正路径，要想解决这一问题需要后端配合，将不存在的路径重定向到入口文件。

22.如何封装一个组件？

使用vue.extend()创建一个组件

使用vue.components()注册组件

子组件需要数据时可以通过props进行接收，子组件将数据修改好后若想把数据传给父组件，可以使用emit方法

23.说一下vue页面传参？

• query地址栏显示，刷新不丢失，类似get

• params地址栏不显示，隐藏传参，刷新丢失类似post

• 动态传参，地址栏显示，刷新不丢失

注意：

• 传参是this.$router，接收参数是this.$route
• params搭配的是组件的name名，query搭配的是组件的path
• 接收数据必须在页面加载完成后，也就是在mounted接收，而不是created。

24. 说一下vue中ref的作用?

-作用一（基本用法）:本页面获取dom元素
作用二：获取子组件中的data
作用三：调用子组件中的方法
作用四：子组件调用父组件方法

25.说一下懒加载？

概念：按需加载，使用再加载

因为vue是单页面应用SPA，webpack打包后的文件会比较大，造成进入首页后，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也不利于用户体验。使用懒加载可以将页面进行划分，减少首页加载用时。

1.vue异步组件

2.ES6提案的import()

3.webpack的require.ensure()

26.说一下如何解决vuex刷新数据丢失的方案？

1. 把数据直接存储到浏览器缓存里（sessionStorage、localStorage、cookie）
2. 页面刷新时，再次请求数据，达到数据动态更新的方法
   1. 监听浏览器刷新的事件，在刷新前将数据保存到sessionStorage里，刷新后请求数据，请求到了用vuex，没有请求到就用sessionStorage里的。

27.说一下对vuex的理解？

vuex：集中式状态管理库

使用vuex的情景：

• 多个组件依赖同一个状态
• 不同组件的行为需要该改变的统一状态

属性：

• state：用于定义数据变量，存放公共数据；
• mutations：用于定义修改state数据的方法，同步操作；
• actions：用于操作mutations，可进行异步操作，调用后端接口等；
• getters：state的computed属性，动态获取state数据；
• modules：模块化，给store划分模块，减少代码臃肿，方便维护代码；

vuex中actions和mutations有什么相同点？

第二个参数都可以接收外部提交时传来的参数。

28.说一下vue框架的优缺点？

优点：

• 速度快
• 轻量级
• 低耦合
• 简单易学
• 文档齐全，中文文档
• 可重用性
• 独立开发

缺点：

• 不利于seo
• 可扩展性稍差
• 生态环境差（相对于其他两个框架而言react、angular）

29.说一下vue-loader是什么？它的用途是什么？

vue文件的一个加载器，将template/script/style转换为js模块

用途：js可以写es6、style样式

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

30.说一下Vue优化方式？

• v-if和v-show
• 图片懒加载
• 路由懒加载
• 为减少重新渲染和创建dom的时间，采用虚拟dom
• 使用Object.freeze()方式冻结data中的属性，从而阻止数据劫持
• 组件销毁的时候会断开所有与实例的联系，但是除了addEventListener，所以当一个组件销毁的时候，需要手动去removeEventListener

31.说一下vue-cli项目中src目录每个文件夹和文件的使用方法？

• components：存放组件
• app.vue主页面入口
• index.js主文件入口
• asset存放静态资源文件

32.说一下可能导致首屏白屏的原因？

1. 浏览器兼容
2. js封装问题
3. url网址无效或者含有中文字符
4. 缓存导致的白屏

Vue3x

1.setup中return的一定只能是一个对象吗？

setup可以return一个对象，也可以return一个渲染函数

• return () => h(‘h2’, ‘Hello Vue3’)

协议

• 是什么：超文本传输协议（属于应用层）
• 特点：无状态（http的每一次请求都是一次单独的请求）
• 版本：http 1.0:不支持长连接 / http 1.1 支持长连接 / http 2.0
• 报文(请求报文、响应报文)的组成： 1.报文首行 2.报文头 3.空行（仅仅作为一个分割） 4.报文体
• 注意：Get请求没有请求体

1.说一下GET请求和POST请求的区别？

两者都是协议中的请求方式，本质上都是进行TCP连接

区别：

1. Get请求的参数会携带再URL地址中，Post请求的请求参数在请求体中
2. Get请求比Post请求更不安全，因为请求参数直接暴露在URL地址，因此不能使用Get请求传递敏感信息
3. Get请求的URL中传递的参数有长度限制，Post请求参数传递没有限制
4. Get请求产生一个TCP数据包，Post请求产生两个TCP数据包

2.说一下请求报头和响应报头中Content-Type的区别？

Content-Type 表示 body 的数据格式

请求报头：

• application/x-www-form-urlencoded

  这是 form 表单提交的数据格式，此时 body 的格式就类似于 query string（是键值对的结构，键值对之间使用 & 分割，键与值之间使用 = 分割

• multipart/form-data

  这是 form 表单提交的数据格式（需要在 from 标签上加上 enctyped="multipart/form-data"），通常用于 HTML 提交图片或者文件

• application/json

  此时 body 数据为 json 格式，json 格式就是源自 js 的对象的格式。用一个 { } 括住，里面有多个键值对，键值对之间使用逗号分割，键和值之间使用冒号分割

响应报头

• text/html

  表示数据格式是HTML文件

• text/css

  表示数据格式是css文件

• application/javascript

  表示数据格式是javascript文件

• application/json

  表示数据格式是json

3.说一下常见的http状态码？

2xx：成功相关的响应状态码

• 200：ok 请求成功。一般用于Get和Post请求
• 201：created 已创建。成功请求并创建了新的资源

3xx：重定向相关的响应状态码

• 301：永久移动。浏览器会自动定向到新的url地址
• 302：临时移动。

4xx：客户端错误相关响应状态码

• 400：bad request 请求参数有误
• 401：当前请求需要用户验证
• 403：forbidden 请求拒绝
• 404：not found 资源找不到
• 408：request timeout 请求超时

4.说一下从用户输入url地址，发生了什么？

1. 首先浏览器对url进行解析，查看本地缓存，如果有就直接显示
2. 如果没有缓存，则对进行DNS域名解析，解析出对应的IP地址
3. 浏览器与服务器进行TCP三次握手，建立连接
4. 浏览器发起http请求
5. 服务器收到请求，返回资源
6. 浏览器对获取到的资源进行解析、渲染
7. 最后浏览器显示页面

5.说一下TCP三次握手？

第一次握手：由浏览器发给服务器

第二次握手：由服务器发给浏览器

第三次握手：由浏览器发给服务器

6. 说一下http和https的区别？

http：无状态无连接，明文传输，不安全。

https：传输内容加密，身份验证，保证数据的完整性。

7.说一下http1.0、http1.1和http2.0的区别？

• http0.9：只能进行get请求

• http1.0：无长连接，新增了post、put、option、delete方法

• http1.1：添加了keep-alive长连接，host域等

• http2.0：多路复用，头部压缩，服务器推送

8.网络OSI七层模型都有哪些？TCP是属于哪一层的？

• 七层模型
  • 应用层
  • 表示层
  • 会话层
  • 传输层
  • 网络层
  • 数据链路层
  • 物理层
• TCP属于传输层

9.说一下为什么握手要三次，挥手要四次？

握手之前，还没有进行数据的传输，确保握手就可以了。

挥手之前，正在进行数据的传输，为了确保数据的完整性，必须多经历一次验证（继

续接收）

10.怎么封装的axios？

1.拿到项目和后端接口，首先要配置全局代理

2.接着全局封装axois和request.js

3.过滤axios请求方式，控制地址，参数格式，http等

4.正式封装api.js

5.页面调用

11.说一下TCP和UDP的区别？

12.说一下http头都有哪些字段？

• 请求头
  • cache-control：是否使用缓存
  • Connection：keep-alive 与服务器连接状态
  • Host：主机域
• 响应头
  • cache-control
  • etag：唯一标识，缓存用的
  • last-modified：最后修改时间

13.说一下http缓存？

http缓存分为强缓存和协商缓存

• 强缓存
  • 在浏览器加载资源时，首先会看看cache-control里的max-age，判断数据是否过期，如果没有就直接使用该缓存，如果因为用户刷新了浏览器导致缓存过期，可以设置cache-control中的immutable
• 协商缓存（弱缓存）
  • 当浏览器加载资源没有命中强缓存时，浏览器向服务器发起请求，请求携带两个参数一个是响应头中的etag和last-modified，去检验缓存是否过期，没有过期就服务器会返回一个304状态码给浏览器，表示缓存没有过期，可以使用旧缓存。

浏览器

1.说一下同源策略？

同源策略是浏览器的一种安全策略，所谓同源策略就是协议、域名、端口号完全相同。只有同源的地址才可以相互通过 AJAX 的方式请求。

Git

1.说一下git pull 和 git fetch的区别？

• git pull 下载远程仓库的最新更新并自动合并
• git fetch 下载远程仓库的最新更新，但不会自动合并

操作系统

1.说一下栈和堆

1.栈（操作系统）：由操作系统自动分配释放函数的参数值、局部变量等，基本数据类型存放到栈里面。

2.堆（操作系统）：一般有程序员手动分配，若程序员不释放，由垃圾回收机制回收。复杂数据类型放到堆里面。

持续更新中…