* *面试题

scaling.github.io

面试题

vue有哪些插槽，如何使用

答：
默认插槽：能够接受组件外部传给组件大段的HTML代码 <slot></slot>
具名插槽：具有name属性的插槽 可以结合template标签的slot属性，定向给插槽传递内容
作用域插槽：插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。
		  原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。
		  slot-scope就相当于是一个对象，这个对象里面的数据就是子组件插槽绑定传上来了。

怎样使用props限定传递的数据，有哪些属性？

答：type //限定传递的数据类型
    Required:true false //是否必传
    Default:false //指定默认值
    // 自定义验证函数
    validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
     } 

非父子组件之间如何传递参数

答：bus总线
   兄弟组件可以父传子 子传父 pass
   Vuex也可以实现数据共享(官方推荐使用vuex)
   sessionStorgey，

父子组件怎样实现通讯？

   答：父传子：父组件：<mydiv :list='list'> </mydiv>
	  子组件：props[‘list’]
	  子传父：子组件：this.$emit(‘子组件事件名’，参数)//打电话
      父组件：<mydiv @子组件事件名=‘父组件事件名’></mydiv>

怎样声明全局组件，怎样使用全局组件**

答：Vue.component（‘myHeader’,{
         Template:` <div>全局组件</div>`
	}）
	<my-header></my-header>

怎样声明局部组件，怎样使用局部组件**

   答：声明成 ***.vue文件中模板在<template></template>中。
   Js模块化导出<script></script>
   css<style scoped></style>
   定义  import引入 注册components 调用

你知道那些事件修饰符**

答：.stop阻止事件冒泡
    .once只执行一次，一次性事件
	.self阻止事件冒泡和事件捕获
    .captrue事件捕获阶段触发
	.prevent阻止浏览器默认行为
	.native 触发原生事件

vue中如何自定义指令（全局和局部）**

全局的：参数一:指令调用的dom对象，参数二:指令对象，获取相应的传值信息

Vue.directive('color',function(ele,obj){
  if(obj.value%2==0){
      ele.style.backgroundColor='red';
  }else{
      ele.style.backgroundColor='blue';
  }
})

局部的：
directive:{
	color:function(ele,obj){
		ele.style.backgroundColor='red';
	}
}

v-if和v-for为什么不建议混合使用

被渲染的dom会重复一个创建销毁的过程v-for的优先级比v-if高，
哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表会影响性能，所以，我们可以把他们改为计算属性：
computed：{

	activeClass:function(){

			this.users.filter(function(user)){
		
					return user.isActive
			}
	}

}
``

vue使用的是什么模式？请具体介绍一下这种模式**

答：渐进式开发，采用mvvm的模式

model (模型层) axios data vuex(state)

view (视图层) template < template>< /template>

viewmodel（传递者）是双向绑定实现的机制

延伸问题：什么是渐进式？Vue渐进式-先使用Vue的核心库，再根据你的需要的功能再去逐渐增加加相应的插件。（没有多做职责之外的事。）

• GET 和 POST 的区别

参考回答：
get 参数通过 url 传递，post 放在 request body 中。
get 请求在 url 中传递的参数是有长度限制的，而 post 没有。
get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。
get 请求只能进行 url 编码，而 post 支持多种编码方式

• HTTP 支持的方法

参考回答：
GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

• 如何画一个三角形

参考回答：
三角形原理：边框的均分原理
div {
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}

• 状态码 304 和 200

参考回答：
状态码 200：请求已成功，请求所希望的响应头或数据体将随此响应返回。即返回的数
据为全量的数据，如果文件不通过 GZIP 压缩的话，文件是多大，则要有多大传输量。
状态码 304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的
内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状
态码。即客户端和服务器端只需要传输很少的数据量来做文件的校验，如果文件没有
修改过，则不需要返回全量的数据。

• HTML5 新增的元素

参考回答：
首先 html5 为了更好的实践 web 语义化，增加了 header，footer，nav,aside,section
等语义化标签，在表单方面，为了增强表单，为 input 增加了 color，
emial,data ,range 等类型，在存储方面，提供了 sessionStorage，localStorage,和
离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了
音频和视频元素 audio 和 vedio，另外还有地理定位，canvas 画布，拖放，多线程编
程的 web worker 和 websocket 协议。

• cookie 和 session 的区别

参考回答：
1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
2. cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺
骗
考虑到安全应当使用 session。
3. session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务
器的性能
考虑到减轻服务器性能方面，应当使用 COOKIE。
4. 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存
20 个 cookie。 

• cookie 有哪些编码方式？

 参考回答：encodeURI（）

• http 常见的请求方法

     参考回答：
    get、post，这两个用的是最多的，还有很多比如 patch、delete、put、options 等等
 ###• get 和 post 的区别 
参考回答：
GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。
GET：不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内。
GET 和 POST 的底层也是 TCP/IP，GET/POST 都是 TCP 链接。
GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。
对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应
200（返回数据）；
而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送
data，服务器响应 200 ok（返回数据）。

• link 标签和 import 标签的区别

参考回答：
link 属于 html 标签，而@import 是 css 提供的
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加
载。
link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
link 方式样式的权重高于@import 的。

• transition 和 animation 的区别

参考回答：
Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，
他们的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要
触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从
from .... to，而 animation 可以一帧一帧的

• visibility=hidden, opacity=0，display:none

参考回答：
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一
些事件，如 click 事件，那么点击该区域，也能触发点击事件的 visibility=hidden，
该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元
素删除掉一样。

• 清除浮动的方法，能讲讲吗

参考回答：
方法一：使用带 clear 属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在 CSS 中赋
予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr 
class="clear" />来进行清理。
方法二：使用 CSS 的 overflow 属性
给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在
IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮
动的效果。
方法三：给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，
影响布局，不推荐使用。
方法四：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加 clear 属性。
方法五：使用 CSS 的:after 伪元素
结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）
和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发
hasLayout。
给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪
元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动

• css 动画如何实现

参考回答：
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时
长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是
由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。
transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化
时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种
改变发生（例如 hover）时才能获取样式，这样就会产生过渡动画

• CSS3 中对溢出的处理

参考回答：
cnkOhu
text-overflow 属性，值为 clip 是修剪文本；ellipsis 为显示省略符号来表被修剪的
文本；string 为使用给定的字符串来代表被修剪的文本。

• z-index 的定位方法

参考回答：
z-index 属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之
前，z-index 可以为负，且 z-index 只能在定位元素上奏效，该属性设置一个定位元素
沿 z 轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有
auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承 z-index 属性
的值

• 说一下闭包

 参考回答：
一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调
用，子函数所在的父函数的作用域不会被释放。

• 如何让事件先冒泡后捕获

参考回答：
在 DOM 标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对
于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获  事件，先暂
缓执行，直到冒泡事件被捕获后再执行捕获之间。

• 说一下事件委托

参考回答：
简介：事件委托指的是，不在事件的发生地（直接 dom）上设置监听函数，而是在其父
元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过
判断事件发生元素 DOM 的类型，来做出不同的响应。
举例：最经典的就是 ul 和 li 标签的事件监听，比如我们在添加事件时候，采用事件
委托机制，不会在 li 标签上直接添加，而是在 ul 父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触
发机制。

• mouseover 和 mouseenter 的区别

参考回答：
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的
过程。对应的移除事件是 mouseout
mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会
冒泡，对应的移除事件是 mouseleave

• JS 的 new 操作符做了哪些事情

参考回答：
new 操作符新建了一个空对象，这个对象原型指向构造函数的 prototype，执行构造函
数后返回这个对象。

• 改变函数内部 this 指针的指向函数（bind，apply，call 的区别）

参考回答：
通过 apply 和 call 改变函数的 this 指向，他们两个函数的第一个参数都是一样的表
示要改变指向的那个对象，第二个参数，apply 是数组，而 call 则是 arg1,arg2...这
种形式。通过 bind 改变 this 作用域会返回一个新的函数，这个函数不会马上执行。

• JS 的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及 scrollTop, offsetTop,clientTop 的区别？

参考回答：
clientHeight：表示的是可视区域的高度，不包含 border 和滚动条
offsetHeight：表示可视区域的高度，包含了 border 和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
 clientTop：表示边框 border 的厚度，在未指定的情况下一般为 0
scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐
标(css 定位的元素或 body 元素)距离顶端的高度。

• 如何理解前端模块化

参考回答：
前端模块化就是复杂的文件编程一个一个独立的模块，比如 JS 文件等等，分成独立的
模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问
题，所以有了 commonJS 规范，AMD，CMD 规范等等，以及用于 JS 打包（编译等处   
理的工具 webpack

• JS 监听对象属性的改变

参考回答：
我们假设这里有一个 user 对象,
(1)在 ES5 中可以通过 Object.defineProperty 来实现已有属性的监听
Object.defineProperty(user,'name',{
set：function(key,value){
}
})
缺点：如果 id 不在 user 对象中，则不能监听 id 的变化
(2)在 ES6 中可以通过 Proxy 来实现
 var user = new Proxy({}，{
set：function(target,key,value,receiver){
}
})
这样即使有属性在 user 中不存在，通过 user.id 来定义也同样可以这样监听这个属性
的变化哦。

• 实现一个两列等高布局，讲讲思路

 参考回答：
 为了实现两列等高，可以给每列加上 padding-bottom:9999px;
margin-bottom:-9999px;同时父元素设置 overflow:hidden;

• 事件代理在捕获阶段的实际应用

参考回答：
可以在父元素层面阻止事件向子元素传播，也可代替子元素执行某些操作。

• 去除字符串首尾空格

参考回答：
使用正则(^\s*)|(\s*$)即可

• 能来讲讲 JS 的语言特性吗

参考回答：
运行在客户端浏览器上；
不用预编译，直接解析执行代码；
是弱类型语言，较为灵活；
与操作系统无关，跨平台的语言；
脚本语言、解释性语言

• webpack 用来干什么的

参考回答：
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当
webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其
中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。   

5月24日

1 $(this)和 this 的区别是什么？

 $(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用      val() 获取值
 等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。

2、http 和 https 的区别是什么？

 http 和 https 使用的是完全不同的连接方式,用的端口也不一样,前者是 80,后者是 443。
 HTTPS 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版。
 由于 https 要还密钥和确认加密算法的过程，所以更安全

3 Js 的原型和原型链？有什么特点？

  每个对象都会在其内部初始化一个属性，就是 prototype(原型)，当我们访问一个对象的属性时，
  如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个 prototype 又会有自      己的
  prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
  关系：instance.constructor.prototype = instance.__proto__
  特点：
  JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当      我们
  修改原型时，与之相关的对象也会继承这一改变。

4、prototype 是什么？他是怎么使用的？

 function 定义的对象有一个 prototype 属性，prototype 属性又指向了一个 prototype 对象，注意       prototype 属性
 与 prototype 对象是两个不同的东西，要注意区别。在 prototype 对象中又有一个 constructor 属      性，这个
 constructor 属性同样指向一个 constructor 对象，而这个 constructor 对象恰恰就是这个       function 函数本身
  Prototype 允许我们在创建对象之后来改变对象或类的行为，并且这些通过 prototype 属性添加的字段
 或方法所有对象实例是共享的。原型继承。

5 对 json 的了解？

 Json 指的是 js 对象表示法。
  1.轻量级的数据交互格式
  2.可以形成复杂的嵌套格式
  3.解析非常方便
  4.易于读写，占用带宽小

6、什么是内存泄漏，哪些常见操作会造成内存泄漏

  内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。在 C++中，因为是手动管理内存，内存泄露是经常出现的事情。而现在流行的 C#和 Java 等语言采用了自动垃圾回收方法管理内存，正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有 bug，会产生内存泄露。
  1 全局变量引起的内存泄漏
  2 闭包引起的内存泄漏
  3 dom 清空或删除时，事件未清除导致的内存泄漏

7、跨域的几种解决方式

 ① 通过 jsonp 跨域
 ② 通过修改 document.domain 来跨子域
 ③ 使用 window.name 来进行跨域
 ④ 使用 HTML5 中新引进的 window.postMessage 方法来跨域传送数据
 ⑤ CORS核心思想：在服务器端通过检查请求头部的 origin，从而决定请求应该成功还是失败。具体的方法是在服务端设置 Response Header 响应头中的 Access-Control-Allow-Origin 为对应的域名，实现了 CORS（跨域资源共享），这里出于在安全性方面的考虑就是尽量不要用 *，但对于一些不重要的数据则随意。

8、同源策略

 1. 同源，就是指两个页面具有相同的协议，主机（域名），端口，浏览器会对不同源的脚本或者文本的访问方式进行的限制
 2. 页面中的链接，重定向以及表单提交不会受到同源策略的限制，允许跨域资源嵌入

9、ajax 的缺点（答出三点即可）

 1、ajax 不支持浏览器 back 按钮。 2、安全问题 AJAX 暴露了与服务器交互的细节。
 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。 5、不容易调试

10、jQuery 中.bind() .live() .delegate() .on()的区别

  bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
  $("a").bind("click",function(){alert("ok");});
  live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
  $("a").live("click",function(){alert("ok");});
  delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
  $("#container").delegate("a","click",function(){alert("ok");})
  on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
  差别： 
  .bind()是直接绑定在元素上
  .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到 document DOM 节点上。和.      bind()
  的优势是支持动态数据。
  .delegate()则是更精确的小范围使用事件代理，性能优于.live()
  .on()则是最新的 1.9 版本整合了之前的三种方式的新事件绑定机制

5月23日

1 Sass、LESS 是什么？大家为什么要使用他们？

 他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
 例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。为什么要使用它们？结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。
 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS代码也可以与 LESS 代码一同编译。

2 行内元素有哪些？块级元素有哪些？空(void)元素有那些？样式之间的转换

（1）CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display值，比如 div 默认 display 属性值为“block”，成为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。 
（2）行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 
（3）知名的空元素： 
br><hr><img><input><link><meta>鲜为人知的是： <area><base><col><command>
embed><keygen><param><source><track><wbr>
（4）样式转换：
display:block 行内元素转换为块级元素
display:inline 块级元素转换为行内元素
display:inline-block 转为内联元素

3、移动端优先使用弹性布局（flex）来解决布局问题，请列出弹性布局的相关属性，并说明属性用途

flex 的 3 个属性 flex-grow | flex-shrink/ʃrɪŋk/ | flex-basis
flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
用 js 设置 flex
object.style.flex="1"

4、CSS3 的兼容问题怎么处理？

 一般加私有前缀否则不做特殊处理，再有就是遵循 2 大原则，渐进增强和优雅降级

5 你能描述 CSS3 的哪些属性可以用到渐进增强原则

 半透明（rgba），圆角（border-radius），边框阴影： box-shadow，高光 渐变（linear-gradient、radial-gradient）

6 移动端性能优化

  尽量使用 css3 动画，开启硬件加速。适当使用 touch 事件代替 click 事件。避免使用 css3 渐变阴影效果。 尽
 可能少的使用 box-shadow 与 gradients。box-shadow 与 gradients 往往是页面的性能杀手

7、HTML5 为什么只需要写!DOCTYPE HTML？

 答：
 HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏
 览器的行为（让浏览器按照它们应该的方式来运行）；而 HTML4.01 基于 SGML,所以需要
 对 DTD 进行引用，才能告知浏览器文档所使用的文档类型

8 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

 答：微格式（Microformats）是一种让机器可读的语义化XHTML 词汇的集合，是结构化
 数据的开放标准。是为特殊应用而制定的特殊格式。
 优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。
 （应用范例：豆瓣，有兴趣自行 google）

9 什么是 Web Worker？为什么我们需要它？

 参考答案：
 查看如下代码（模拟会执行上百万次的繁重代码）：
 function test(){
 for(i=0;i< 10000000000 ; i ++){
 x = x + i;
 }
 }
 如果上述代码在 HTML 按钮点击以后执行，这种执行是同步的，即，浏览器必须等到
 此执行完毕之后才能进行其他操作。因为此操作耗时较长，那么这个操作会导致浏览器冻结
 并且没有响应，而且屏幕还会出现异常信息。
 如果可以将这些繁重的代码移动到 Javascript 文件中，并采用异步的方式运行，就可
 以解决这个问题。这就是 web worker 的作用。Web Worker 用于异步执行 JavaScript 文
 件，提高浏览器的敏捷度。

10 HTML5 应用程序缓存和浏览器缓存有什么区别？

 参考答案：
 应用程序缓存是 HTML5 的重要特性之一，提供了离线使用功能，让应用程序可以获取
 本地的网站内容，例如 HTML、CSS、图片以及 Javascript。这个特性可以提高网站性能，
 它的实现借助于 manifest 文件，代码如下：
 <!doctype html>
 <html manifest="example.appcache">
 ....</html>
 与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

5月22日

1• JSONP 的缺点

 参考回答：
 JSON 只支持 get，因为 script 标签只能使用 get 请求；
 JSONP 需要后端配合返回指定格式的数据。

2• 跨域（jsonp，ajax）

参考回答：
JSONP：ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中
的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数
据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

3• 关于 dom 的 api 有什么

参考回答：
节点创建型 api，页面修改型 API，节点查询型 API，节点关系型 api，元素属性型
api，元素样式型 api 等

4 移动 web 开发 ： 知道 PWA 吗

参考回答：
PWA 全称 Progressive Web App，即渐进式 WEB 应用。一个 PWA 应用首先是一个网页, 
可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest [ˈmænɪˌfest] 和 Service 
Worker 来实现 PWA 的安装和离线等功能

5• Rem 布局及其优缺点

参考回答：
首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例
如:font-size:10px;,那么（1rem = 10px）了解计算原理后
首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比
缩放，一般是基于宽度。
优点
可以快速适用移动端布局 字体图片 高度
缺点
①目前 ie 不支持，对 pc 页面来讲使用次数不多；
②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的
适配；
③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。
也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在
css 样式之前。

6• webpack 和 gulp[ɡʌlp] 区别（模块化与流的区别）

 参考回答：
 gulp 强调的是前端开发的工作流程，我们可以通过配置一系列的 task，定义 task 处
 理的事务（例如文件压缩合并、雪碧图、启动 server、版本控制等），然后定义执行
 顺序，来让 gulp 执行这些 task，从而构建项目的整个前端开发流程。
 webpack 是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图
 片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins ['plʌgɪn]（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

7• 有使用过 Vue 吗？说说你对 Vue 的理解

 参考回答：
 Vue 是一个构建数据驱动的渐进性框架，它的目标是通过 API 实现响应数据绑定和视图
 更新。

8、描述 css reset 的作用和用途？

 答：Reset 重置浏览器的 css 默认属性 ，览器的品种不同，样式不同，然后重置，让他们统一。

9 console 有哪些常用方法?（答出三种并说出它的用法即可，想考察你有没有工作经验）

 console.log/console.info,console.error/console.warning, console.time/console.timeEnd,      console.trace, console.table

10、为什么利用多个域名来存储网站资源会更有效？

① CDN 缓存更方便
②突破浏览器并发限制
③节约 cookie 带宽
④节约主域名的连接数，优化页面响应速度
⑤防止不必要的安全问题

5月21日

1• ES6 箭头函数的特性

参考回答：
ES6 增加了箭头函数，基本语法为
let func = value => value;
相当于
let func = function (value) {
return value;
};
箭头函数与普通函数的区别在于：
1、箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值，这就意味着如
果箭头函数被非箭头函数包含，this 绑定的就是最近一层非箭头函数的 this，
2、箭头函数没有自己的 arguments 对象，但是可以访问外围函数的 arguments 对象
3、不能通过 new 关键字调用，同样也没有 new.target 值和原型

2• 怎么获得对象上的属性：比如说通过 Object.key（）

参考回答：  
从 ES5 开始，有三种方法可以列出对象的属性
for（let I in obj）该方法依次访问一个对象及其原型链中所有可枚举的类型
object.keys:返回一个数组，包括所有可枚举的属性名称
object.getOwnPropertyNames:返回一个数组包含不可枚举的属性

3• 给出以下代码，输出的结果是什么？原因？

for(var i=0;i<5;i++) 
{ setTimeout(function(){ console.log(i); },1000); } 
console.log(i) 
参考回答：
在一秒后输出 5 个 5
每次 for 循环的时候 setTimeout 都会执行，但是里面的 function 则不会执行被放入
任务队列，因此放了 5 次；for 循环的 5 次执行完之后不到 1000 毫秒；1000 毫秒后全
部执行任务队列中的函数，所以就是输出 5 个 5。

4• 知道 private 和 public 吗

参考回答：
public：public 表明该数据成员、成员函数是对所有用户开放的，所有用户都可以直
接进行调用
private：private 表示私有，私有的意思就是除了 class 自己之外，任何人都不可以
直接使用

5• JS 加载过程阻塞，解决方法。

参考回答：
指定 script 标签的 async 属性。
如果 async="async"，脚本相对于页面的其余部分异步地执行（当页面继续进行解析
时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

6• JavaScript 中的轮播实现原理？假如一个页面上有两个轮播，你会怎么实现？

参考回答：
图片轮播的原理就是图片排成一行，然后准备一个只有一张图片大小的容器，对这个
容器设置超出部分隐藏，在控制定时器来让这些图片整体左移或右移，这样呈现出来
的效果就是图片在轮播了。
如果有两个轮播，可封装一个轮播组件，供两处调用

7• es6 的常用

参考回答：
promise，await/async，let、const、块级作用域、箭头函数

8 • 说 promise，没有 promise 怎么办

参考回答：
没有 promise，可以用回调函数代替

9• arguments

参考回答：
arguments 是类数组对象，有 length 属性，不能调用数组方法
可用 Array.from()转换

10• 箭头函数获取 arguments

参考回答：
可用…rest 参数获取

5月19日

1• eval 是做什么的

参考回答：
它的功能是将对应的字符串解析成 JS 并执行，应该避免使用 JS，因为非常消耗性能
（2 次，一次解析成 JS，一次执行）

2• 实现一个两列等高布局，讲讲思路

参考回答：
为了实现两列等高，可以给每列加上 padding-bottom:9999px;
margin-bottom:-9999px;同时父元素设置 overflow:hidden;

3• 之前说了 ES6set 可以数组去重，是否还有数组去重的方法

参考回答：
法一：indexOf 循环去重
法二：Object 键值对去重；把数组的值存成 Object 的 key 值，比如
Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，
就说明该值是重复的。

4• 跨域的原理

参考回答：
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏
览器对 JavaScript 实施的安全限制，那么只要协议、域名、端口有任何一个不同，都
被当作是不同的域。跨域原理，即是通过各种方式，避开浏览器的安全限制。

5 • null == undefined 为什么

参考回答：
要比较相等性之前，不能将 null 和 undefined 转换成其他任何值，但 null == 
undefined 会返回 true 。ECMAScript 规范中是这样定义的。

6• 暂停死区

参考回答：
在代码块内，使用 let、const 命令声明变量之前，该变量都是不可用的。这在语法
上，称为“暂时性死区”

7 • 什么是按需加载

参考回答：
当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，
包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大
小更改等。加载的文件，可以是 JS、图片、CSS、HTML 等。

8• 说一下什么是 virtual dom

参考回答：
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，
插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树
进行比较，记录两棵树差异 把所记录的差异应用到所构建的真正的 DOM 树上，视图就
更新了。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。

9• 简单介绍一下 symbol

参考回答：
Symbol 是 ES6 的新增属性，代表用给定名称作为唯一标识，这种类型的值可以这样创
建，let id=symbol(“id”)
Symbl 确保唯一，即使采用相同的名称，也会产生不同的值，我们创建一个字段，仅为
知道对应 symbol 的人能访问，使用 symbol 很有用，symbol 并不是 100%隐藏，有内置
方法 Object.getOwnPropertySymbols(obj)可以获得所有的 symbol。
也有一个方法 Reflect.ownKeys(obj)返回对象所有的键，包括 symbol。
所以并不是真正隐藏。但大多数库内置方法和语法结构遵循通用约定他们是隐藏的。

10• JS 中 string 的 startwith 和 indexof 两种方法的区别

参考回答：
JS 中 startwith 函数，其参数有 3 个，stringObj,要搜索的字符串对象，str，搜索的
字符串，position，可选，从哪个位置开始搜索，如果以 position 开始的字符串以搜
索字符串开头，则返回 true，否则返回 false
Indexof 函数，indexof 函数可返回某个指定字符串在字符串中首次出现的位置。

5月18日

1• calc 属性

参考回答：
Calc ['kælk] 用户动态计算长度值，任何长度值都可以使用 calc()函数计算，需要注意的是，
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

2• display：table 和本身的 table 有什么区别

参考回答：
Display:table 和本身 table 是相对应的，区别在于，display：table 的 css 声明能
够让一个 html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，是我
们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样
的制表标签导致的语义化问题。
之所以现在逐渐淘汰了 table 系表格元素，是因为用 div+css 编写出来的文件比用
table 边写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显
示，table 的嵌套性太多，没有 div 简洁

3• 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

参考回答：
DOM 的变化影响到了元素的几何属性比如宽高，浏览器重新计算元素的几何属性，
其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重
排，浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘，引起重排重绘的原
因有：
添加或者删除可见的 DOM 元素，
元素尺寸位置的改变
浏览器页面初始化，
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，
减少重绘重排的方法有：
不在布局信息改变时做 DOM 查询，
使用 csstext,className 一次性改变属性
使用 fragment
对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

4• overflow 的原理

参考回答：
要讲清楚这个解决方案的原理，首先需要了解块格式化上下文，A block formatting 
context is a part of a visual CSS rendering of a Web page. It is the region 
in which the layout of block boxes occurs and in which floats interact with 
each other.翻译过来就是块格式化上下文是 CSS 可视化渲染的一部分，它是一块区
域，规定了内部块盒 的渲染方式，以及浮动相互之间的影响关系
当元素设置了 overflow 样式且值部位 visible 时，该元素就构建了一个 BFC，BFC 在
计算高度时，内部浮动元素的高度也要计算在内，也就是说技术 BFC 区域内只有一个
浮动元素，BFC 的高度也不会发生塌缩，所以达到了清除浮动的目的。

5• box-sizing 的语法和基本用处

参考回答：
box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit
content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内
边距和边框
border-box：为元素设定的宽度和高度决定了元素的边框盒，
inherit：继承父元素的 box-sizing

6• display:none 和 visibilty:hidden 的区别

参考回答：

1. visibility /ˌvɪz.əˈbɪl.ə.t̬i/ ：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该
   元素已经绑定的事件
2. display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把
   该元素删除掉。

7• get 请求传参长度的误区

参考回答：
误区：我们经常说 get 请求参数的大小存在限制，而 post 请求的参数大小是无限制
的。
实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对 get 请求参数的限制
是来源与浏览器或 web 服务器，浏览器或 web 服务器限制了 url 的长度。为了明确这
个概念，我们必须再次强调下面几点:
HTTP 协议 未规定 GET 和 POST 的长度限制
GET 的最大长度显示是因为 浏览器和 web 服务器限制了 URI 的长度
不同的浏览器和 WEB 服务器，限制的最大长度不一样
要支持 IE，则最大长度为 2083byte，若只支持 Chrome，则最大长度 8182byte

8• 说一下闭包

参考回答：
一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调
用，子函数所在的父函数的作用域不会被释放。

9• 说一下图片的懒加载和预加载

参考回答：
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

10• 异步加载 JS 的方法

参考回答：
defer：只支持 IE 如果您的脚本不会改变文档的内容，可将 defer 属性加入到
script 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文
档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为
止。
async [ə’zɪŋk]，HTML5 属性仅适用于外部脚本，并且如果在 IE 中，同时存在 defer 和 async，
那么 defer 的优先级比较高，脚本将在页面完成时执行。
创建 script 标签，插入到 DOM 中

5月17日

1• 怎么看网站的性能如何

参考回答：
检测页面加载时间一般有两种方式，一种是被动去测：就是在被检测的页面置入脚本
或探针，当用户访问网页时，探针自动采集数据并传回数据库进行分析，另一种主动
监测的方式，即主动的搭建分布式受控环境，模拟用户发起页面访问请求，主动采集
性能数据并分析，在检测的精准度上，专业的第三方工具效果更佳，比如说性能极
客。

2• 介绍 HTTP 协议(特征)

参考回答：
HTTP 基于 TCP/IP 通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）
HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式
超媒体信息系统。它于 1990 年提出，经过几年的使用与发展，得到不断地完善和扩
展。目前在 WWW 中使用的是 HTTP/1.0 的第六版，HTTP/1.1 的规范化工作正在进行之
中，而且 HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP 协议工作于客户
端-服务端架构为上。浏览器作为 HTTP 客户端通过 URL 向 HTTP 服务端即 WEB 服务器发
送所有请求。Web 服务器根据接收到的请求后，向客户端发送响应信息。

3• 输入 URL 到页面加载显示完成发生了什么?

参考回答：
DNS 解析
TCP 连接
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
连接结束

4• cookie 有哪些编码方式？

参考回答：
encodeURI（）

5 • link 标签和 import 标签的区别

参考回答：
link 属于 html 标签，而@import 是 css 提供的
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加
载。
link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。
link 方式样式的权重高于@import 的。

6• transition 和 animation 的区别

参考回答：
Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，
他们的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要
触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从
from .... to，而 animation 可以一帧一帧的    

7• BFC（块级格式化上下文，用于清楚浮动，防止 margin 重叠等）

参考回答：
直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
BFC 区域不会与 float box 重叠
BFC 是页面上的一个独立容器，子元素不会影响到外面
计算 BFC 的高度时，浮动元素也会参与计算
那些元素会生成 BFC：
根元素
float 不为 none 的元素
position 为 fixed 和 absolute 的元素
display 为 inline-block、table-cell、table-caption，flex，inline-flex 的元素
overflow 不为 visible 的元素

8• 关于 JS 动画和 css3 动画的差异性

参考回答：
渲染线程分为 main thread 和 compositor thread，如果 css 动画只改变 transform 和
opacity，这时整个 CSS 动画得以在 compositor trhead 完成（而 JS 动画则会在 main 
thread 执行，然后出发 compositor thread 进行下一步操作），特别注意的是如果改
变 transform 和 opacity 是不会 layout 或者 paint 的。
区别：
功能涵盖面，JS 比 CSS 大
实现/重构难度不一，CSS3 比 JS 更加简单，性能跳优方向固定
对帧速表现不好的低版本浏览器，css3 可以做到自然降级
css 动画有天然事件支持
css3 有兼容性问题

9• 介绍一下盒模型

参考回答：
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，
和实际内容。
标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
怪异盒模型：一个块的总宽度=width+margin（左右）（既 width 已经包含了 padding
和 border 值）
设置盒模型：box-sizing:border-box

10• CSS3 中对溢出的处理

参考回答：
text-overflow 属性，值为 clip 是修剪文本；ellipsis /iˈlɪp.sɪs/ 为显示省略符号来表被修剪的
文本；string 为使用给定的字符串来代表被修剪的文本。

5月16日

1• fetch 发送 2 次请求的原因

   参考回答：
fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功？
原因很简单，因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个
Options 请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发
送真正的请求。

2• iframe 是什么？有什么缺点？

参考回答：
定义：iframe 元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在<iframe></iframe>之间，来提示某些不支持 iframe 的    浏
览器
缺点：
会阻塞主页面的 onload 事件
搜索引擎无法解读这种页面，不利于 SEO
iframe 和主页面共享连接池，而浏览器对相同    区域有限制所以会影响性能。

3• Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?

参考回答：
Doctype 声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严
格模式和混杂模式。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

4• Cookie 如何防范 XSS 攻击

参考回答：
XSS（跨站脚本攻击）是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这
些攻击，需要在 HTTP 头部配上，set-cookie：
httponly-这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。
secure /səˈkjʊr/ - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie。
结果应该是这样的：Set-Cookie=<cookie-value>.....

5• 强缓存、协商缓存什么时候用哪个

参考回答：
因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，这个时候如果我
们还访问本地缓存，那么对用户来说，那就相当于资源没有更新，用户看到的还是旧
的资源；所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使
用本地的缓存，以最大程度的减少因网络请求而产生的资源浪费。

6• 前端优化

参考回答：
降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。

7• 如何画一个三角形

参考回答：
三角形原理：边框的均分原理
div {
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}

8• 在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

参考回答：
这是一个必考的面试问题，
输入 url 后，首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip，浏览器首先
会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存
-》路由器缓存，缓存中没有则查找系统的 hosts 文件中是否有记录，如果没有则查询
DNS 服务器，得到服务器的 ip 地址后，浏览器根据这个 ip 以及相应的端口号，构造一
个 http 请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请
求附带的数据，并将这个 http 请求封装在一个 tcp 包中，这个 tcp 包会依次经过传输
层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返
回相应的 html 给浏览器，因为 html 是一个树形结构，浏览器根据这个 html 来构建
DOM 树，在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树
来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html
代码的后面，之后根据外部央视，内部央视，内联样式构建一个 CSS 对象模型树 CSSOM
树，构建完成后和 DOM 树合并为渲染树，这里主要做的是排除非视觉节点，比如
script，meta 标签和排除 display 为 none 的节点，之后进行布局，布局主要是确定各
个元素的位置和尺寸，之后是渲染页面，因为 html 文件中会含有图片，视频，音频等
资源，在解析 DOM 的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下
载数量有一定的限制，一般是 4-6 个，当然在这些所有的请求中我们还需要关注的就
是缓存，缓存一般通过 Cache-Control、Last-Modify、Expires 等首部字段控制。
Cache-Control 和 Expires 的区别在于 Cache-Control 使用相对时间，Expires 使用的
是基于服务器 端的绝对时间，因为存在时差问题，一般采用 Cache-Control，在请求
这些有设置了缓存的数据时，会先 查看是否过期，如果没有过期则直接使用本地缓
存，过期则请求并在服务器校验文件是否修改，如果上一次 响应设置了 ETag 值会在
这次请求的时候作为 If-None-Match 的值交给服务器校验，如果一致，继续校验
Last-Modified，没有设置 ETag 则直接验证 Last-Modified，再决定是否返回 304。

9常见的 HTTP 的头部

参考回答：
可以将 http 首部分为通用首部，请求首部，响应首部，实体首部
通用首部表示一些通用信息，比如 date 表示报文创建时间，
请求首部就是请求报文中独有的，如 cookie，和缓存相关的如 if-Modified-Since
响应首部就是响应报文中独有的，如 set-cookie，和重定向相关的 location，
实体首部用来描述实体部分，如 allow 用来描述可执行的请求方法，content-type 描
述主题类型，content-Encoding 描述主体的编码方式。

10• cache-control 的值有哪些

参考回答：
cache-control 是一个通用消息头字段被用于 HTTP 请求和响应中，通过指定指令来实
现缓存机制，这个缓存指令是单向的，常见的取值有 private、no-cache、max-age、
must-revalidate 等，默认为 private。