常见浏览器的内核分别是什么?

IE浏览器：Trident 内核
Firefox浏览器：Gecko内核
Safari浏览器：Webkit内核
Opera浏览器：最初是Presto内核，后来是Webkit，现在是Blink内核
Chrome浏览器：Blink(以前是Webkit内核，现在是Blink内核)

WEB标准以及W3C标准是什么?

1、标签闭合
2、标签小写
3、嵌套正确
4、外部链接css和js
5、提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为）

每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗?

<!DOCTYPE>声明位于文档中的最前面的位置，处于 <html>标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

img 的 alt 与 title 有何异同？

alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA），alt 属性用来指定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。

简述一下 src 与 href 的区别？

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js脚本放在底部而不是头部。
href 是 Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href=”common.css” rel=”stylesheet”/>那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

get和post的请求的区别

1.get在浏览器回退不会再次请求，post会再次提交请求
2.get请求会被浏览器主动缓存，post不会，要手动设置
3.get请求参数会被完整保留在浏览器历史记录里，post中的参数不会
4.get请求在URL中传送的参数是有长度限制的，而post没有限制
5.get参数通过URL传递，post放在Request body中
6.get参数暴露在地址栏不安全，post放在报文内部更安全
7.get一般用于查询信息，post一般用于提交某种信息进行某些修改操作
8.get产生一个TCP数据包；post产生两个TCP数据包
get和post的选择：
1.私密性的信息请求使用post（如注册、登陆）。
2.查询信息使用get

DIV+CSS布局较table布局有哪些优点？

改版的时候更方便只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

sessionStorage 中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。
除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为了在本地“存储”数据而生。

网页制作会用到的图片格式有哪些？

png-8、png-24、jpeg、gif、svg、Webp。
WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。FacebookEbay 等知名网站已经开始测试并使用 WebP 格式。在质量相同的情况下，WebP 格式图像的体积要比 JPEG 。

在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？

dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

  • 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端 的距离与页面的距离，如果前者小于后者，优先加载。
  • 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先 下载。
  • 如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
  • 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图， 以提高用户体验。
  • 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示一致。

有哪些方式可以对一个 DOM 设置它的 CSS 样式？

  • 外部样式表，引入一个外部 css 文件
  • 内部样式表，将 css 代码放在 标签内部
  • 内联样式（行内样式），将 css 样式直接定义在 HTML 元素内部

CSS 都有哪些选择器？

基本选择器：

  • 标签选择器
  • 类选择器
  • ID选择器
  • 通配符选择器
  • 属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了）

复杂选择器：

  • 后代选择器（利用空格间隔，比如 div .a{ }）
  • 群组选择器（利用逗号间隔，比如 p,div,#a{ }）
  • 伪类选择器 （如：a:hover{}）
  • 伪元素选择器

注意：伪元素和伪类容易混淆， css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

CSS 选择器的优先级是怎么样定义的？

基本原则：
一般而言，选择器越特殊（复杂），它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
复杂的计算方法：

  • 用 1 表示派生选择器的优先级
  • 用 10 表示类选择器的优先级
  • 用 100 标示 ID 选择器的优先级
    div.test1 .span var 优先级 1+10 +10 +1
    span#xxx .songs li 优先级 1+100 + 10 + 1
    #xxx li 优先级 100 +

看下列代码，<p>标签内的文字是什么颜色的？

<style>
	.classA{ color:blue;}
	.classB{ color:red;}
</style>
<body>
	<p class='classB classA'> 123 </p>
</body>

red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p class='classB classA'>中的先后关系无关。

CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

最基本的：设置 display 属性为 none，或者设置 visibility 属性为 hidden
技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000

超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的
排列顺序: L-V-H-A（link,visited,hover,active）。

使用CSS实现幻灯片特效?

/**css**/
div.ani {
	width: 480px;
	height: 320px;
	margin: 50px auto;
	overflow: hidden;
	box-shadow: 0 0 5px rgba(0, 0, 0, 1);
	background-size: cover;
	background-position: center;
	-webkit-animation-name: "loops";
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes "loops" {
	0% {
		background: url(../img/1.jpg) no-repeat;
	}

	25% {
		background: url(../img/2.jpg) no-repeat;
	}

	50% {
		background: url(../img/3.jpg) no-repeat;
	}

	75% {
		background: url(../img/4.jpg) no-repeat;
	}

	100% {
		background: url(../img/5.jpg) no-repeat;
	}
}

行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联（行内）元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边
距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的
left 和 right 是可以设置的），就是里面文字或图片的大小。

浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

<input> 、<img> 、<button> 、<texterea> 、<label>

什么是外边距重叠？重叠的结果是什么？

在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一
个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠
外边距。
折叠结果遵循下列计算规则：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

px 和 em 的区别?

px 和 em 都是长度单位，区别是：px 的值是固定的，指定是多少就是多少，计算比较容易。
em 的值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体大小都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em，10px=0.625em。

px rem em vh vw之间的区别到底是啥？

px rem em vh vw之间的区别详解

CSS3有哪些新特性？

  1. 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
  2. 圆角 （border-radius:8px）
  3. 多列布局 （multi-column layout）
  4. 阴影和反射 （Shadow / Reflect）
  5. 文字特效 （text-shadow）
  6. 文字渲染 （Text-decoration）
  7. 线性渐变和径向渐变 （gradient）
  8. 旋转 （transform）
  9. 增加了旋转,缩放,定位,倾斜,动画，多背景
    transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg) Animation:

如何垂直居中一个浮动元素？

/* 方法一：已知元素的高宽 */
#div1 {
	background-color: #6699FF;
	width: 200px;
	height: 200px;
	position: absolute; //父元素需要相对定位
	top: 50%;
	left: 50%;
	margin-top: -100px; //二分之一的 height，width
	margin-left: -100px;
}
/* 方法二:未知元素的高宽 */
#div1 {
	width: 200px;
	height: 200px;
	background-color: #6699FF;
	margin: auto;
	position: absolute; //父元素需要相对定位
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
/* 那么问题来了，如何垂直居中一个<img>?（用更简便的方法。） */
#container{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

如何清除浮动？

  1. 利用clear样式
  2. 父元素结束标签之前插入清除浮动的块级元素
/*在有浮动的父级元素的末尾插入了一个没有内容的块级元素div,然后使用clear清除左右两边的浮动*/
  1. 利用伪元素（clearfix）
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility:hidden;
}
.clearfix {
	zoom:1;
}
  1. 利用overflow清除浮动
/*给父元素添加*/
 overflow: auto;

display:none 与 visibility:hidden 的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

在html中，position取值有哪几种，默认值是什么？

取值：static、relative、fixed、absolute、sticky
默认值：static

说一下Flexbox（弹性盒子）的适用场景

注意:主要应用场景为移动端布局。
flexbox的布局是一个用于页面布局的全新css3模块功能。
它可以把列表放在同一个方向（从左到右或从上到下排列），并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩器（flex ，container）来辅助实现。
flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，flexbox可以让元素在容器中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。

怎样处理 移动端 1px 被 渲染成 2px 问题？

meta 标签中的 viewport 属性 ，initial-scale 设置为 1
rem 按照设计稿标准走，外加利用 transfrome 的 scale(0.5) 缩小一倍即可；
meta 标签中的 viewport 属性 ，initial-scale 设置为 0.5
rem 按照设计稿标准走即可；

怎么减少页面加载时间的方法

  1. 压缩css、js文件
  2. 合并js、css文件，减少http请求
  3. 外部js、css文件放在最底下
  4. 减少dom操作，尽可能用变量替代不必要的dom操作

怎么样从web前端方面优化性能？至少列举5点？

  • HTML部分
  1. 语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；
  2. 减少DOM节点：加速页面渲染；
  3. 给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；
  4. 防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；
  5. 正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div></div>的过程；
  6. 链接为目录或首页的地址后面加”/”，如http://www.baidu.org/；
  7. 用LINK而不用@import方式导入样式；
  8. 样式放在页头，JS放在页尾；
  9. 缩小favicon.ico并缓存；
  • CSS部分
  1. 避免使用CSS Expressions(CSS表达式)：如background-color:
  2. expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
  3. 避免使用CSS Filter（CSS滤镜）； 使用CSS缩写，减少代码量；
  4. 通过CSSSprites把同类图片合成一张，减少图片请求； 减少查询层级：如.header .logo要好过.header .top .logo；
  5. 减少查询范围：如.header>li要好过.header li；
  6. 避免TAG标签与CLASS或ID并存：如a.top、button#submit；
  7. 删除重复的CSS；
  • JavaScript部分
  1. 尽量少用全局变量；
  2. 使用事件代理绑定事件，如将事件绑定在body上进行代理；
  3. 避免频繁操作DOM节点；
  4. 减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；
  5. 类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；
  6. 对字符串进行循环操作，譬如替换、查找，应使用正则表达式；
  7. 删除重复的JS；
  • 服务器部分
  1. 尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；
  2. 压缩CSS、JS文件，缩短文件传输时间；
  3. 避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；
  4. 一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，这可以减少网站并行下载的数量，但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡；
  5. 使用CDN加速，使用户从离自己最近的服务器下载文件；
  6. 减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；
  7. 为文件头指定Expires，使内容具有缓存性；
  8. 使用gzip压缩内容；

CSS中可以通过哪些属性，使得一个DOM元素不显示在浏览器的可视范围内？

display: none;
visibility: hidden;
opacity: 0;

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更高的体验。

  1. 使用精灵图，将小规格的图片整合为一张精灵图，减少浏览器请求次数。（http2.0可以不考虑此问题）
  2. 使用图片懒加载。

sass和less是什么？为什么要使用它们？

CSS预处理器，通过编程的方式来开发CSS，可实现代码简写与复用等。
使用它们是因为：结构清晰，便与拓展、减少无意义的机械劳动、可以轻松实现多重继承。

请讲一下盒模型。

css盒模型分俩种：IE盒子模型和标准盒子模型。
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
在 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

JS的数据类型

5个简单数据类型（基本数据类型）+ 1个复杂数据类型
基本数据类型：number string boolean null undefiend
复杂数据类型：object
ES6 中新增Symbol

例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）
隐式（== 、===）

JS为什么会放在下面，CSS为什么放在上面？

浏览器从上到下依次解析html文档。
将 css 文件放到头部， css 文件可以先加载。避免先加载 body 内容，导致页面一开始样式错乱，然后闪烁。
将 javascript 文件放到底部是因为：若将 javascript 文件放到 head 里面，就意味着必须等到所有的 javascript 代码都被 下载、解析和执行完成 之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。为避免这样的问题一般将全部 javascript 文件放到 body 元素中页面内容的后面。

“ == ” 和 “ === ” 还有 “ != ” 和 “ !== ”的区别？

== ” 和 “ != ”会做数据隐式类型转换，转换完数据类型在做比较。
“ === ” 和 “ !== ”会先判断数据类型，如果俩者的数据类型不一致直接返回false就不会再去做值的比较了。

“ i++ ” 和 “ ++i ”的区别。

i++是先引用i的值而后将i递增1。
++i是先将i的值加1而后引用它的值。

break，renturn，continue三者的区别？

return
在函数体中遇到return语句，则结束函数执行（函数体未执行完部分不再执行），将表达式的值返回到函数调用处。使用return最多只能返回一个值！
break
break主要用在循环语句或者switch语句中，用来退出整个语句块。
break跳出最里层的循环，并且继续执行该循环下面的语句。
break当用于循环结构时，表示退出其所在的整个循环结构，当前次循环未完成任务及未完成循环次数将不再执行！
continue
continue适用于任何循环控制结构中。作用是让程序立即跳转到下一次循环的迭代。
在for循环中，continue语句使程序立即跳转到更新语句。
在while或者do…while循环中，程序立即跳转到布尔表达式的判断语句。
continue只能用于循环结构，表示结束当前次循环，还会判断条件进行下一次循环。

操作节点

查找节点

  • document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个
  • document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。
  • document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
  • document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
  • document.querySelector ：返回单个Node，如果匹配到多个结果，只返回第一个。
  • document.querySelectorAll ：返回一个 NodeList。
  • document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

创建节点

  • createElement创建元素
  • createTextNode创建文本节点
  • cloneNode 克隆一个节点
  • createDocumentFragment 创建文档碎片，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能

修改节点

  • appendChild
  • insertBefore
  • removeChild
  • replaceChild

说一下事件冒泡、事件捕获的区别

**事件冒泡：**事件会从最内层的元素开始发生，一直向上传播，直到document对象。
**事件捕获：**与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
在这里插入图片描述
（补充：addEventListener(event, function, useCapture)冒泡为false、捕获为true）

事件委托

利用事件冒泡的原理，子元素的事件会冒泡到父元素，可以只给父元素添加事件，通过事件目标判断元素。
优点：节省内存，动态添加的子元素也包含事件。

浏览器跨域的问题源自哪里?

浏览器跨域问题是源于浏览器的同源策略。
浏览器的同源策略：一段脚本只能读取来自同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合。
协议，域名，端口，三者有其中一个不一致就属于跨域。
URL网址的组成：http://www.baidu.com:80/index.html?username=xxx&password=yyy#hash
协议://域名:端口/资源路径?查询字符串#hash
在这里插入图片描述

解决跨域的方法

  • 通过jsop解决跨域
  • 通过修改document.domain来跨子域
  • 使用window.name来进行跨域
  • 使用HTML5中新引进的window.postMessage方法来跨域

JavaScript设计模式

  • 单例模式
  • 适配器模式
  • 代理模式
  • 发布-订阅模式
  • 策略模式
  • 迭代器模式

说一说你对Symbol的了解？

symbol 是一种基本数据类型。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。
每个从Symbol()返回的symbol值都是唯一的。

说一下ES6的新特性

  • 新增了块级作用域(let,const)
  • 提供了定义类的语法糖(class)
  • 新增了一种基本数据类型(Symbol)
  • 新增了变量的解构赋值
  • 函数参数允许设置默认值，引入了 rest 参数，
  • 新增了箭头函数
  • 数组新增了一些 API，如 isArray / from / of方法;
  • 数组实例新增了entries()，keys() 和 values() 等方法
  • 对象和数组新增了扩展运算符
  • ES6新增了模块化(import/export)
  • ES6 新增了 Set 和 Map 数据结构
  • ES6 原生提供 Proxy 构造函数，用来生成Proxy 实例
  • ES6 新增了生成器(Generator)和遍历器(Iterator)

简单说一下你对箭头函数的理解

js中我们在调⽤函数的时候经常会遇到this作⽤域的问题，这个时候ES6给我们提箭头函数。
1、 箭头函数是匿名函数不能作为构造函数，不能使用new
2、 箭头函数不绑定arguments,取而代之用rest参数…解决
3、 this指向不同,箭头函数的this在定义的时候继承自外层第一个普通函数的this
4、 箭头函数通过call()或apply()调用一个函数,只传入了一个参数,对this并没有影响.
5、 箭头函数没有prototype(原型)，所以箭头函数本身没有this
6、 箭头函数不能当做Generator函数,不能使用yield关键字
7、 写法不同，箭头函数把function省略掉了 （）=> 也可以吧return 省略调 写法更简洁
8、箭头函数不能通过call（）、apply（）、bind（）方法直接修改它的this指向。

说一下你的promise的理解

1、Promise 是异步编程的一种解决方案，主要用于异步计算，支持链式调用，可以解决回调地狱 的问题，自己身上有all、reject、resolve、race 等方法，原型上有then、catch等方法。
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果，可以在对象之间传递和操作 promise，帮助我们处理队列
3、promise 有三个状态：pending[待定]初始状态，fulfilled[实现]操作成功，rejected[被否决]操作失败
4、Promise 对象状态改变：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了
5、如果不设置回调函数，Promise内部抛出的错误，不会反应到外部，但是写了then 和 catch ，会被then的第二个参数 或 catch所捕获。

promise 的 then 为什么可以支持链式调用？

promise 的then会返回一个新的 promise 对象，能保证 then 方 可以进行链式调用。

async、await的原理

Async 和 await 是一种同步的写法，但还是异步的操作，两个必须配合一起使用
函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象。
await 是个运算符，用于组成表达式，await 表达式的运算结果取决于它等的东西，如果是promise则会等待promaise 返回结果，接普通函数直接进行链式调用.
await 能够获取promise执行的结果 await必须和async一起使用才行，async配合await使用是一个阻塞的异步方法
如果await后面不是Promise对象, 就直接返回对应的值，只能在async函数中出现, 普通函数直接使用会报错
await语句后的Promise对象变成reject状态时，那么整个async函数会中断，后面的程序不会继续执行
**使用场景：**执行第一步，将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据，然后使用第一步返回的数据执行第 二步操作的接口调用，达到异步操作。

如何让CSS只在当前组件中起作用？

答：在组件中的style前面加上scoped

<keep-alive></keep-alive>的作用是什么?

答:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

vue-loader是什么？使用它的用途有哪些？

答：vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

为什么使用key?

答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。

axios及安装?

答：请求后台资源的模块。npm install axios --save装好，
js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。

请说出vue.cli项目中src目录每个文件夹和文件的用法？

答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置; app.vue是一个应用主组件；main.js是入口文件。

.$nextTick的使用

答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

axios的特点有哪些

  1. 从浏览器中创建XMLHttpRequests；
  2. node.js创建http请求；
  3. 支持Promise API；
  4. 拦截请求和响应；
  5. 转换请求数据和响应数据；
  6. 取消请求；
  7. 自动换成json。
  8. axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送params一般适用于get请求，data一般适用于post put 请求。

请说下封装 vue 组件的过程？

答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。
　　2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
　　3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
　　4. 封装完毕了，直接调用即可

params和query的区别?

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this. r o u t e . q u e r y . n a m e 和 t h i s . route.query.name和this. route.query.name和this.route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据；params刷新 会 丢失 params里面的数据。

vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
首先：在css里加上[v-cloak] {display: none;}。
如果没有彻底解决问题，则在根元素加上style=“display: none;” :style=“{display: ‘block’}”

vue更新数组时触发视图更新的方法

答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()

vue常用的UI组件库

答：Mint UI，element，VUX

vue获取数据在哪个周期函数

答：一般 created/beforeMount/mounted 皆可.

$route 和 $router 的区别

答：$router是VueRouter的实例，在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

vue-router的两种模式

答:hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。

Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

Vue.extend 作用和原理

官方解释：Vue.extend 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
其实就是一个子类构造器，是Vue组件的核心api。实现思路就是使用原型继承的方法返回了 vue 的子类，并且利用 mergeOptions 把传入组件的 options 就和父类的 options 进行了合并。

欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…

# 前端 # javascript # vue.js # es6 # node.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue