新总结的面试题目

此外还有一些面试题都是个人针对面试的时候弄的，没其他作用就是担心有些平时用不到的知识点遗忘

html面试题(一)--html css js_前端菜鸟-CSDN博客前端面试题汇总一、HTML和CSS1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE:trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共...https://blog.csdn.net/dong281500748/article/details/79858120?spm=1001.2014.3001.5502html面试题(二)html css js_前端菜鸟-CSDN博客1、一个200*200的div在不同分辨率屏幕上下左右居中，用css实现div{width:200px;height:200px;background-color:red;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}2、写一个左中右布局占满屏幕，其中左右两块是固定宽度2...https://blog.csdn.net/dong281500748/article/details/82798710?spm=1001.2014.3001.5502

1、叙述原型链

答案：当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

function Person (name){
    this.anme = name
}
Person.prototype.say = funticon(){
    console.log('hello' + this.name)
}
let p1 = new Person('张三')
let p2 = new Person('李四')
p1.say()
这里面的原型就是就是 Person.prototype
函数有原型，函数有个属性叫prototype,函数的这个原型指向一个对象，这个对象叫做原型对象，这个原型对象有个constructor属性，指向这个函数本身
js规定每一个函数都有一个proto属性，而且对应的是自身的原型

2、js如何继承

答案：

        1、对象冒充

 function Parent(username){
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }

  function Child(username,password){
    //通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
    //第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
    //第二步：执行this.method方法，即执行Parent所指向的对象函数
    //第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
    this.method = Parent;
    this.method(username);//最关键的一行
    delete this.method;
    this.password = password;
    this.world = function(){
      alert(this.password);
    }
  }
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello();
  child.hello();
  child.world();

       2、 call()方法方式、

call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

  function test(str){
    alert(this.name + " " + str);
  }
  var object = new Object();
  object.name = "zhangsan";
  test.call(object,"langsin");//此时，第一个参数值object传递给了test类(即方法)中出现的this，而第二个参数"langsin"则赋值给了test类(即方法)的str

  function Parent(username){
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  function Child(username,password){
    Parent.call(this,username);
    
    this.password = password;
    this.world = function(){
      alert(this.password);
    }
  }
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello();
  child.hello();
  child.world();

        3、apply()方法方式、

 

apply方法接受2个参数，
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数  
function Parent(username){
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  function Child(username,password){
    Parent.apply(this,new Array(username));
    this.password = password;
    this.world = function(){
      alert(this.password);
    }
  }
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello();
  child.hello();
  child.world();

 

        4、原型链（子类通过prototype将所有的父类中通过prototype追加的属性和方法追加到child，从来实现继承）、

  function Person(){
  }
  Person.prototype.hello = "hello";
  Person.prototype.sayHello = function(){
    alert(this.hello);
  }
  
  function Child(){
  }
  Child.prototype = new Person();//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
  Child.prototype.world = "world";
  Child.prototype.sayWorld = function(){
    alert(this.world);
  }
  
  var c = new Child();
  c.sayHello();
  c.sayWorld();

       5、 混合方式

混合了call方式、原型链方式
  function Parent(hello){
    this.hello = hello;
  }
  Parent.prototype.sayHello = function(){
    alert(this.hello);
  }

  function Child(hello,world){
    Parent.call(this,hello);//将父类的属性继承过来
    this.world = world;//新增一些属性
  }

  Child.prototype = new Parent();//将父类的方法继承过来

  Child.prototype.sayWorld = function(){//新增一些方法
    alert(this.world);
  }

  var c = new Child("zhangsan","lisi");
  c.sayHello();
  c.sayWorld(); 

 另外补充一下

另外补充一下：
call()、applay()以及bind()三者之间的区别？

1、call（obj，param1，param2，param3······）

参数说明：

                obj：指定的对象

                param：指定的对象中所带有的参数

注：参数之间用逗号隔开。

2、applay（obj，[param1、param2、param3······]）

参数说明：

                obj：指定的对象

                param：指定的对象中所带有的参数

注：参数使用数组包含起来。

扩：在不传入参数的情况下，call（obj）和apply（obj）的作用是一样的；

3、bind（obj，param1，param2，param3······）

参数说明：

                obj：指定的对象

                param：指定的对象中所带有的参数

注：参数之间用逗号隔开【和call使用语法一致】

二：使用场景

1、call和apply绑定完this会立即调用当前的函数，而bind绑定完this不会立即调用当前函数，而是将函数返回。

2、call和apply通常用作绑定完立即执行的函数中，而bind通常用来作用在回调函数中定义。

详解可仅限参考-改变this指向 call apply bind_前端菜鸟-CSDN博客var a = { user:"小明", fn:function(){ console.log(this.user); }}var b = a.fn;b(); //undefinedvar a = { user:"小明", fn:function(){ console.log(this.user); }...https://blog.csdn.net/dong281500748/article/details/104291490?spm=1001.2014.3001.5502

3、跨域方式

答案：JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。
当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。有一点必须要注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

4、 XSS接触过吗？说说XSS

答案：黑客通过 “HTML 注入 ” 篡改网页，插入恶意脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击 。

5、js的数据类型有哪些？

答案：数字类型，字符串型，布尔型，undefined，null ,对象类型,数组

6、简单说一下ES6的symbol属性

答案：

1、Symbol属性对应的值是唯一的,解决命名冲突问题 
2、不能参与其他数据运算，包括字符串拼接 
3、for in遍历时，不会遍历symbol属性 
4、可以定义常量 
使用 
let symbol=Symbol(); 
区别不同
Symbol let symbol=Symbol('区分标识任意值'); 
定义常量 
const xx=Symbol('标识');

9、 如何判断Array和Object

答案：

typeof null //object
typeof undefined // undefined
typeof false // boolean
typeof 123 // number
typeof 'abc' //string

null被认为是一个空对象引用，所以，会返回object，这算是一个语言实现的错误。

typeof new Number(12); //object
typeof Number(13) //number
typeof NaN // number

解释一下：
    第一个虽然Number，String，Boolean是基本数据类型，但他们可以通过new创建，而通过new创建，后台会自动转化为对象，使他们看起来像对象。因此，第一个是返回object
    第二个由于没有用new，创建的就是基本数据类型，所以还是number类型
    第三个NaN是属于Number类型的，这里需要注意NaN与任何数据都不相等，包括它本身。


如何判断数据？

1、instanceof操作符 

var arr = [1,2,3,1];
console.log(arr instanceof Array); // true
 
var fun = function(){};
console.log(fun instanceof Function); // true

2、对象的constructor 属性

var arr = [1,2,3,1];
console.log(arr.constructor === Array); // true
 
var fun = function(){};
console.log(arr.constructor === Function); // true

3、使用 Object.prototype.toString 来判断是否是数组
Object.prototype.toString.call( [] ) === '[object Array]'  // true
Object.prototype.toString.call( function(){} ) === '[object Function]'  // true

4、typeof function() {} // function

5、使用 原型链 来完成判断

[].__proto__ === Array.prototype  // true
 
var fun = function(){}
fun.__proto__ === Function.prototype  // true

6、Array.isArray() 

10、深拷贝和浅拷贝的区别。

答案：参考参考其他文章总结出浅拷贝和深拷贝_前端菜鸟-CSDN博客

11、说说js闭包

答案：

闭包的简介：
闭包就是能够读取其他函数内部变量的函数。只有函数内部的子函数才能读取局部变量，在本质上，闭包是函数内部和函数外部连接起来的桥梁。

当函数可以记住并访问所在词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。 - - 出自《你不知道的JavaScript（上卷）》

闭包的定义：
如果在一个内部函数里，对在外部作用域(但不是全局作用域)的变量进行引用，那么内部函数就被认为是闭包(closure)。

闭包的特点：
可以读取自身函数外部的变量(沿着作用域链寻找)先从自身开始查找，如果自身没有才会继续往上级查找，自身如果拥有将直接调用。(哪个离的最近就用哪一个)
延长内部变量的生命周期
函数b嵌套在函数a内部
函数a返回函数b
闭包的作用：
在函数a执行完并返回后，闭包使得JavaScript的垃圾回收机制不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量，闭包需要循序渐进的过程。

闭包的构成：
闭包由俩个部分构成：

函数
以及创建该函数的环境
应用场景：
保护函数内的变量安全。函数a中只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
在内存中维持一个变量

13、以下代码运行后会怎样?为什么？

 var a = 1; let a =1;

答案：// Identifier 'a' has already been declared （标识符“ a”已经被声明）

14、可以修改obj对象的属性吗？

答案：

const obj = {};
const指针指向的地址不可以改变
指向地址的内容是可以改变的
因为const只是保证对象的指针不改变
而对象的内容改变不会影响到指针的改变
所以对象的属性内容是可以修改的。

15、说说Promise

答案：为什么会出现promise？因为回调地狱-

就是解决嵌套而存在的

先理解什么是回调函数？

简单来说，
回调就是等我某件事做完以后才去做回调需要做的事情
首先，回调与同步异步没有什么直接联系，回调只是一种实现方式

异步请求回调：

$.get('ajax/test',function(data){
    xxx
})

点击事件回调：
$('#id').click(() => xxx)

同步回调：
(a,b,sum) => {
 const sum = a + b
 callback(sum)
}

• 常见回调地狱，后面请求依赖前面请求

  $.get(url, data1 => {
      console.log(data1)
      $.get(data1.url, data2 => {
          console.log(data1)
      })
  })
  
  
  
  缺点一眼可见：
  1 代码臃肿，可读性差
  2 复用性差，容易出bug
  3 review维护极其麻烦，完全违背了写出高效易懂易维护的代码

  为了解决嵌套问题，于是Promise规范出现了

• 异步编程的一种解决方法
  比起传统的异步解决方案（回调diyu)，
  更合理，可读性高，而且更贴合js单线程同步
  
  
  new Promise(请求1)
      .then(res => 请求2（res)）
      .then(...)
      .cathc(处理异常)

   

• 小测试题目

  new Promise((resolve) => {
  	setTimeout(() => {
  		console.log(1);
  		resolve();
  	},1000)
  }).then(() => {
      console.log('promise');
      
  })
  
  // 1
  // promise
  因为then里面的函数都是在前一个promise对象进行resolve的时候进行

   

• promise实现

• promise的本质其实就是讲回调函数写得更优雅

   

18、说说重排和重绘

答案：

重绘（repaint）：当元素的外观属性发生变化，即元素的颜色，背景色发生改变但没有影响到dom树的位置改变的时候，会触发重绘；

重排（reflow）：当页面内的元素尺寸发生了变化，导致部分或者全部DOM树，渲染树需要重新更新，会触发重排， 重排又称为回流；

重绘与重排_前端菜鸟-CSDN博客_前端重绘和重排https://blog.csdn.net/dong281500748/article/details/113879052

27、http和https的区别

答案：

http和https的区别_前端菜鸟-CSDN博客_前端http和httpshttps://blog.csdn.net/dong281500748/article/details/113879100

28、Vue中的nextTick了解吗？

答案：

• nextTick的用法：函数(foo)作为参数

• nextTick的用途：在下次DOM更新以后，立即执行函数(foo)

为什么要使用nextTick？因为Vue中数据是异步更新的，即数据的改变会引起虚拟DOM的变化，但不会使真实DOM立马更新的。通过将代码传入nextTick，使得代码在真实DOM数据更新后运行，从而避免因DOM数据未能同步更新而引发的错误。（以下为测试代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nextTick测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue!'
            }
        })
        vm.msg = 'Hello 前端小哥'
        // DOM 还没有更新
        console.log(vm.$el.textContent);
        Vue.nextTick(function () {
            // DOM 更新了
            console.log("nextTick:" + vm.$el.textContent);
        })
</script>
</body>
</html>

 

30、fixed relative absolute的区别

仅限参考-相对定位和绝对定位的区别_前端菜鸟-CSDN博客position: absolute绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。position: rela...https://blog.csdn.net/dong281500748/article/details/104290885?spm=1001.2014.3001.5502

position:static;
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

什么是相对定位？
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。没有脱离标准文档流。

什么是绝对定位
position:absolute;
脱离标准文档流的定位，可以通过边偏移属性调控位置。

什么固定定位
position:fixed
以浏览器为参考，脱离标准文档流，可用边偏移属性控制位置

31、事件冒泡/捕获

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

32、箭头函数

仅限参考-箭头函数与普通函数的区别_前端菜鸟-CSDN博客箭头函数是匿名函数，不能作为构造函数，不能使用new箭头函数不绑定arguments，取而代之用rest参数...解决箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对this并没有影响。箭头函数没有原型属性箭头函数不能当做Generator函数,不能使...https://blog.csdn.net/dong281500748/article/details/104606612?spm=1001.2014.3001.5502

33.   了解过bfc吗？如何触发bfc

BFC
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的布局规则
一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算

哪些元素或属性能触发BFC
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex,             inline-flex
overflow不为visible 

BFC的应用
1、自适应两栏布局
2、清除内部浮动
3、防止margin上下重叠

19.   如何判断对象为空

1.根据for...in遍历对象，如果存在则返回true，否则返回false

for ( let i in obj) {
	return true;
}
return false

2.利用JSON自带的JSON.stringify()方法来判断
大概思路就是转化为字符串’{}'来进行判断

if (JSON.stringify(obj) === '{}') {
	return true;
}
return false;


3.利用ES6中Object.keys()来进行判断 （推荐）
Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。
如果我们的对象为空，他会返回一个空数组。

Object.keys(obj).length === 0 ? '空' : '不为空'

20.   数组的方法

JS方法常用方法，array数据常用方法_前端菜鸟-CSDN博客字符串常用属性.length------>字符串的长度.charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串.fromCharCode(数字值,可以是多个参数),返回的是ASCII码对应的值.concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串.lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,...https://blog.csdn.net/dong281500748/article/details/104606097?spm=1001.2014.3001.5502

22.   简单叙述XHR发送请求的过程

仅限参考-在浏览器输入url后，发生了什么过程_前端菜鸟-CSDN博客1、浏览器查找该域名ip地址2、浏览器根据解析得到的ip地址，向web服务器发生一个Http请求3、服务器接收请求并进行处理4、服务器返回一个相应5、浏览器对该响应进行代码解码，渲染显示6、页面完成后，浏览器发生异步请求...https://blog.csdn.net/dong281500748/article/details/104395411?spm=1001.2014.3001.5502

输入一个网址发生的过程_前端菜鸟-CSDN博客_输入一个网站的过程总结就是：1.【用户】输入 URL2.【浏览器】从 URL 中解析出 主机名3.【浏览器】将 主机名 转换成 服务器ip地址（先查找本地DNS缓存列表，没有的话再向默认的DNS服务器发送查询请求并缓存）4.【浏览器】从 URL 中解析出 端口号5.【浏览器】与 目标服务器 建立 TCP连接（三次握手）6.【浏览器】向 服务器 发送一条 HTTP请求报文7.【服务器】向 浏览器 返回一条 HTTP响应报文8.关闭连接，【浏览器】解析文档如果文档中有其他资源，重复6 7 8 动作，直至资..https://blog.csdn.net/dong281500748/article/details/80597567?spm=1001.2014.3001.5502

24.   跨域的解决方案个人总结关于跨域的解决办法_前端菜鸟-CSDN博客最直接的就是后台直接改1、jsonp的方式 动态插入script标签，但是不能自定义修改header头部信息例如：var script = document.createElement('script')script.type = 'text/javascript'script.src='10.2.34:9090?user=admin&callback=handleCal...https://blog.csdn.net/dong281500748/article/details/104559881?spm=1001.2014.3001.5502

29.   说说MVVM框架

30.   Vue的数据双向绑定的渲染

01.   写代码获取DOM元素：考察类选择器和属性选择器

<!-- 获取所有title属性值以baidu开头的元素 -->
<div title="baidu-video">百度视频</div>
<div title="baidu-music">百度音乐</div>
<div title="baidu-doc">百度文档</div>
<div title="google-doc">谷歌文档</div>
参考答案：
<script>
    var list = document.querySelectorAll("div[title^='baidu']");
</script>

4、GET和POST的区别
5、跨域是什么?怎样解决跨域?
7、git常见命令
9、MVC/MVVM，挑一个你熟悉的说说。说的MVVM...
10、接上边，Vue的双向数据绑定怎么实现的
11、Vue中v-if和v-show的区别
12、单页应用如何在浏览器中实现的?单页应用的优缺点
13、聊到了堆，说了堆排序的过程
14、算法题:反转单向链表  

3. 事件冒泡和捕获机制了解多少？

1. 基本概念?

2. window.addEventListener监听的是什么阶段的事件?

4. 工作中用过防抖和节流吗？

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数

才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持

续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时

触发scroll事件。 debounce.webp

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节

流通俗解释就比如我们水⻰头放水，阀⻔一打开，水哗哗的往下流，秉着勤俭节约的优良传统

美德，我们要把水⻰头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的

往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行

一次handle函数。

1. 防抖和节流的基本概念?

2. 分别适合用在什么场景？

3. 来写一个节流?

4. 这是写的首节流还是尾节流?

 

Vue 面试题

生命周期函数面试题

1.什么是 vue 生命周期2.vue 生命周期的作用是什么

3.第一次页面加载会触发哪几个钩子

4.简述每个周期具体适合哪些场景

5.created 和 mounted 的区别

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

7.请详细说下你对 vue 生命周期的理解？

vue 路由面试题

1.mvvm 框架是什么？

2.vue-router 是什么?它有哪些组件

3.active-class 是哪个组件的属性？

4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

5.vue-router 有哪几种导航钩子?

6.$route 和 $router 的区别

7.vue-router 响应路由参数的变化

8.vue-router 传参

9.vue-router 的两种模式

10.vue-router 实现路由懒加载（ 动态加载路由 ）

vue 常见面试题

1.vue 优点

2.vue 父组件向子组件传递数据？

3.子组件像父组件传递事件4.v-show 和 v-if 指令的共同点和不同点

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

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

7.如何获取 dom

8.说出几种 vue 当中的指令和它的用法？

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

10.为什么使用 key

11.axios 及安装

12.axios 解决跨域

13.v-modal 的使用

14.scss 的安装以及使用

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

16.分别简述 computed 和 watch 的使用场景

17.v-on 可以监听多个方法吗

18.$nextTick 的使用

19.vue 组件中 data 为什么必须是一个函数

20.vue 事件对象的使用

21 组件间的通信

22.渐进式框架的理解

23.Vue 中双向数据绑定是如何实现的

24.单页面应用和多页面应用区别及优缺点

25.vue 中过滤器有什么作用及详解26.v-if 和 v-for 的优先级

27.assets 和 static 的区别

28.列举常用的指令

29.vue 常用的修饰符

30.数组更新检测

31.Vue.set 视图更新

32.自定义指令详解

33.vue 的两个核心点

34.vue 和 jQuery 的区别

35 引进组件的步骤

36.Vue-cli 打包命令是什么？打包后悔导致路径问题，应该在哪里修改

37.三大框架的对比

38. 跨组件双向数据绑定

39.delete 和 Vue.delete 删除数组的区别

40.SPA 首屏加载慢如何解决

41.Vue-router 跳转和 location.href 有什么区别

42. vue slot

43.你们 vue 项目是打包了一个 js 文件，一个 css 文件，还是有多个文件？

44.vue 遇到的坑，如何解决的？

45.Vue 里面 router-link 在电脑上有用，在安卓上没反应怎么解决？

46.Vue2 中注册在 router-link 上事件无效解决方法

47.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题

48.axios 的特点有哪些49.请说下封装 vue 组件的过程？

50.vue 各种组件通信方法（父子 子父 兄弟 爷孙 毫无关系的组件）

51.params 和 query 的区别

52. vue mock 数据

53 vue 封装通用组件

54.vue 初始化页面闪动问题

55.vue 禁止弹窗后的屏幕滚动

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

57.vue 常用的 UI 组件库

58. vue 如何引进本地背景图片

59. vue 如何引进 sass

60.vue 修改打包后静态资源路径的修改

vuex 常见面试题

1.vuex 是什么？怎么使用？哪种功能场景使用它？

2.vuex 有哪几种属性

3.不使用 Vuex 会带来什么问题

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

5.vuex 一个例子方法

6.Vuex 中如何异步修改状态

7.Vuex 中 actions 和 mutations 的区别

vue 项目实战1.顶部悬停效果

2.电话本列表效果（ 右边字母分类 上下滑动 旁边字母显示高亮）

3.vue 做代理

4.Vue 路由切换时的左滑和右滑效果示例

ES6 面试题

ES6 新增方法面试题

1.let const var 比较

2.反引号（`）标识

3.函数默认参数

4.箭头函数

5.属性简写

6.方法简写

7.Object.keys()方法，获取对象的所有属性名或方法名

8.Object.assign ()原对象的属性和方法都合并到了目标对象

9.for...of 循环

10.import 和 export

11.Promise 对象

12.解构赋值

13.set 数据结构（可用于快速去重）

14.Spread Operator 展开运算符(...)15.字符串新增方法

ES6 数组面试题

1.forEach()

2.map()

3.filter()

4.reduce()

5.some()

6.every()

7.all()方法

ES6 编程题

1.使用解构，实现两个变量的值的交换

2.利用数组推导，计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。

3.使用 ES6 改下面的模板

4.把以下代码使用两种方法，来依次输出 0 到 9？

react 面试题

react 生命周期面试题

1.react 生命周期函数

2.react 生命周期中，最适合与服务端进行数据交互的是哪个函数

3.运行阶段生命周期调用顺序

4.shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）

5.指出(组件)生命周期方法的不同

react 基础面试题1.React 中 keys 的作用是什么？

2.React 中 refs 的作用是什么？

3.React 中有三种构建组件的方式

4.调用 setState 之后发生了什么？

5.react diff 原理（常考，大厂必考）

6.为什么建议传递给 setState 的参数是一个 callback 而不是一个对象

7.除了在构造函数中绑定 this，还有其它方式吗

8.setState 第二个参数的作用

9.(在构造函数中)调用 super(props) 的目的是什么

10.简述 flux 思想

11.在 React 当中 Element 和 Component 有何区别？

12.描述事件在 React 中的处理方式。

13.createElement 和 cloneElement 有什么区别？

14.如何告诉 React 它应该编译生产环境版本？

15.Controlled Component 与 Uncontrolled Component 之间的区别是什么？

react 组件面试题

1.展示组件(Presentational component)和容器组件(Container component)之间

有何不同

2.类组件(Class component)和函数式组件(Functional component)之间有何不同

3.(组件的)状态(state)和属性(props)之间有何不同

4.何为受控组件(controlled component)5.何为高阶组件(higher order component)

6.应该在 React 组件的何处发起 Ajax 请求

7.react 中组件传值

8.什么时候在功能组件( Class Component )上使用类组件( Functional

Component )？

9.受控组件( controlled component )与不受控制的组件( uncontrolled

component )有什么区别？

10.react 组件的划分业务组件技术组件？

redux 面试题

1.redux 中间件

2.redux 有什么缺点

3.了解 redux 么，说一下 redux 吧

react 性能比较面试题

1.vue 和 react 的区别

2.react 性能优化的方案

3.React 项目用过什么脚手架

4.介绍一下 webpack webpack

5.如果你创建了类似于下面的 Twitter 元素，那么它相关的类定义是啥样子

的？

6.为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的

map？react 的生命周期及不同生命周期的含义？

react 新版本中 Hook 的怎么使用？

js 面试题

1. 简述同步和异步的区别

2.怎么添加、移除、复制、创建、和查找节点

3.实现一个函数 clone 可以对 Javascript 中的五种主要数据类型（Number、string、

Object、Array、Boolean）进行复制

4.如何消除一个数组里面重复的元素

5.写一个返回闭包的函数

6.使用递归完成 1 到 100 的累加

7.Javascript 有哪几种数据类型

8.如何判断数据类型

9.console.log(1+'2')和 console.log(1-'2')的打印结果

10.Js 的事件委托是什么，原理是什么

11.如何改变函数内部的 this 指针的指向

12.列举几种解决跨域问题的方式，且说明原理

13.谈谈垃圾回收机制的方式及内存管理

14.写一个 function ，清除字符串前后的空格

15.js 实现继承的方法有哪些

16.判断一个变量是否是数组，有哪些办法17.let ，const ，var 有什么区别

18.箭头函数与普通函数有什么区别

19.随机取 1-10 之间的整数

20.new 操作符具体干了什么

21.Ajax 原理

22.模块化开发怎么做

23.异步加载 Js 的方式有哪些

24.xml 和 json 的区别

25.webpack 如何实现打包的

26.常见 web 安全及防护原理

27.用过哪些设计模式

28.为什么要同源限制

29.offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的

区别

30.javascript 有哪些方法定义对象

31.说说你对 promise 的了解

32.谈谈你对 AMD、CMD 的理解

33.web 开发中会话跟踪的方法有哪些

34.介绍 js 有哪些内置对象？

35.说几条写 JavaScript 的基本规范？

36.javascript 创建对象的几种方式？

37.eval 是做什么的？38.null，undefined 的区别？

39.[“1”, “2”, “3”].map(parseInt) 答案是多少？

40.javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？

41.js 延迟加载的方式有哪些？

42.defer 和 async

43.说说严格模式的限制

44.attribute 和 property 的区别是什么？

45.ECMAScript6 怎么写 class 么，为什么会出现 class 这种东西?

46.常见兼容性问题

47.函数防抖节流的原理

48.原始类型有哪几种？null 是对象吗？

49.为什么 console.log(0.2+0.1==0.3) //false

50.说一下 JS 中类型转换的规则？

51.深拷贝和浅拷贝的区别？如何实现

52.如何判断 this？箭头函数的 this 是什么

53.== 和 ===的区别

54.什么是闭包

55.JavaScript 原型，原型链 ? 有什么特点？

56.typeof()和 instanceof()的用法区别

57.什么是变量提升

58.all、apply 以及 bind 函数内部实现是怎么样的

59.为什么会出现 setTimeout 倒计时误差？如何减少60.谈谈你对 JS 执行上下文栈和作用域链的理解

61.new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区

别？

62.prototype 和 proto 区别是什么？

63.使用 ES5 实现一个继承？

64.取数组的最大值（ES5、ES6）

65.ES6 新的特性有哪些？

66.promise 有几种状态, Promise 有什么优缺点 ?

67.Promise 构造函数是同步还是异步执行，then 呢 ?promise 如何实现 then 处

理 ?

68.Promise 和 setTimeout 的区别 ?

69.如何实现 Promise.all ?

70.如何实现 Promise.finally ?

71.如何判断 img 加载完成

72.如何阻止冒泡？

73.如何阻止默认事件？

74.ajax 请求时，如何解释 json 数据

75.json 和 jsonp 的区别?

76.如何用原生 js 给一个按钮绑定两个 onclick 事件？

77.拖拽会用到哪些事件

78.document.write 和 innerHTML 的区别

79.jQuery 的事件委托方法 bind 、live、delegate、on 之间有什么区别？80.浏览器是如何渲染页面的？

81.$(document).ready()方法和 window.onload 有什么区别？

82. jquery 中$.get()提交和$.post()提交有区别吗？

83.对前端路由的理解？前后端路由的区别？

84.手写一个类的继承

85.XMLHttpRequest：XMLHttpRequest.readyState;状态码的意思

浏览器 /html/css 面试题

什么是盒模型

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元

素有什么区别？

3.简述 src 和 href 的区别

4.什么是 css Hack5.什么叫优雅降级和渐进增强

6.px 和 em 的区别

7.HTML5 为什么只写

8.Http 的状态码有哪些

9.一次完整的 HTTP 事务是怎么一个过程

10.HTTPS 是如何实现加密

11.浏览器是如何渲染页面的

12.浏览器的内核有哪些？分别有什么代表的浏览器

13.页面导入时，使用 link 和@import 有什么区别

14.如何优化图像，图像格式的区别

15.列举你了解 Html5. Css3 新特性

16.可以通过哪些方法优化 css3 animation 渲染

17.列举几个前端性能方面的优化

18.如何实现同一个浏览器多个标签页之间的通信

19.浏览器的存储技术有哪些

20.css 定位方式

21.尽可能多的写出浏览器兼容性问题

22.垂直上下居中的方法

23.响应式布局原理

25.清除浮动的方法

26.http 协议和 tcp 协议

27.刷新页面，js 请求一般会有哪些地方有缓存处理28.如何对网站的文件和资源进行优化

29.你对网页标准和 W3C 重要性的理解

30.Http 和 https 的区别

31.data-属性的作用

32.如何让 Chrome 浏览器显示小于 12px 的文字

33.哪些操作会引起页面回流（Reflow）

34.CSS 预处理器的比较 less sass

35.如何实现页面每次打开时清除本页缓存

36.什么是 Virtual DOM,为何要用 Virtual DOM

37.伪元素和伪类的区别

38.http 的几种请求方法和区别

39.前端需要注意哪些 SEO

40.的 title 和 alt 有什么区别

41.从浏览器地址栏输入 url 到显示页面的步骤

42.如何进行网站性能优化

43.语义化的理解

44.HTML5 的离线储存怎么使用，工作原理能不能解释一下？

45.浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢

46.iframe 有那些缺点？

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

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

49.HTML 全局属性(global attribute)有哪些50.Canvas 和 SVG 有什么区别？

51.如何在页面上实现一个圆形的可点击区域？

52.网页验证码是干嘛的，是为了解决什么安全问题

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

54. CSS 选择器有哪些？哪些属性可以继承？

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

56.CSS3 有哪些新特性？

57.请解释一下 CSS3 的 flexbox（弹性盒布局模型）,以及适用场景？

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

59.常见的兼容性问题？

60.为什么要初始化 CSS 样式

61.absolute 的 containing block 计算方式跟正常流有什么不同？

62.CSS 里的 visibility 属性有个 collapse 属性值？在不同浏览器下以后什么区别？

63.display:none 与 visibility：hidden 的区别？

64.position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

65.对 BFC 规范(块级格式化上下文：block formatting context)的理解？

66.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

67.上下 margin 重合的问题

68. 设置元素浮动后，该元素的 display 值是多少？

69.移动端的布局用过媒体查询吗？

70.CSS 优化、提高性能的方法有哪些？

71.浏览器是怎样解析 CSS 选择器的？72.在网页中的应该使用奇数还是偶数的字体？为什么呢？

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

74.元素竖向的百分比设定是相对于容器的高度吗？

75.全屏滚动的原理是什么？用到了 CSS 的哪些属性？

76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？

77. 视差滚动效果？

78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作

用

79.让页面里的字体变清晰，变细用 CSS 怎么做？

80. position:fixed;在 android 下无效怎么处理？

81.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

82.li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

83.display:inline-block 什么时候会显示间隙？

84. 有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填

满剩下的高度

85.png、

jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

86.style 标签写在 body 后与 body 前有什么区别？

87.CSS 属性 overflow 属性定义溢出元素内容区的内容会如何处理?

88.阐述一下 CSS Sprites

89. 一行或多行文本超出隐藏

90.请你谈谈 Cookie 的弊端

91.浏览器本地的储存92.Web storage 和 cookie 的区别

93.display:none 和 visibility:hidden 的区别？

94.CSS 中 link 和@import 的区别是？

95.position 的 absolute 与 fixed 共同点与不同点

96.介绍一下 CSS 的盒子模型？

97.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增

伪类有那些？

98.列出 display 的值，说明他们的作用。position 的值， relative 和 absolute 分别

是相对于谁进行定位的？

99.CSS3 有哪些新特性？

100.为什么要初始化 CSS 样式。

101.对 BFC 规范的理解？

102.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

103.说说你对语义化的理解？

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

105.你知道多少种 Doctype 文档类型？

 

 

常见兼容性问题？

解释下浮动和它的工作原理？清除浮动的技巧

浮动元素引起的问题和解决办法？

IE 8 以下版本的浏览器中的盒模型有什么不同

DOM 操作——怎样添加、移除、移动、复制、创建和

查找节点。

html5 有哪些新特性、移除了那些元素？如何处理HTML5 新标签的浏览器兼容问题？如何区分 HTML 和

HTML5？

iframe 的优缺点？

如何实现浏览器内多个标签页之间的通信?

webSocket 如何兼容低浏览器？

线程与进程的区别

你如何对网站的文件和资源进行优化？

请说出三种减少页面加载时间的方法。

你都使用哪些工具来测试代码的性能？

什么是 FOUC（无样式内容闪烁）？你如何来避免

FOUC？

null 和 undefined 的区别？

JSON 的了解？

js 延迟加载的方式有哪些？

如何解决跨域问题?

documen.write 和 innerHTML 的区别.call() 和 .apply() 的区别和作用？

哪些操作会造成内存泄漏？

JavaScript 中的作用域与变量声明提升？

如何判断当前脚本运行在浏览器还是 node 环境中

其他问题？

你有哪些性能优化的方法？

http 状态码有那些？分别代表是什么意思？

一个页面从输入 URL 到页面加载显示完成，这个过

程中都发生了什么？

平时如何管理你的项目？

说说最近最流行的一些东西吧？常去哪些网站？

javascript 对象的几种创建方式

javascript 继承的 6 种方法

ajax 过程异步加载和延迟加载

前端安全问题？

ie 各版本和 chrome 可以并行下载多少个资源

javascript 里面的继承怎么实现，如何避免原型链上

面的对象共享

grunt， YUI compressor 和 google clojure 用来进

行代码压缩的用法。

Flash、Ajax 各自的优缺点，在使用中如何取舍？

请解释一下 JavaScript 的同源策略。

GET 和 POST 的区别，何时使用 POST？

哪些地方会出现 css 阻塞，哪些地方会出现 js 阻塞？

闭包相关问题？

js 事件处理程序问题？

eval 是做什么的？

写一个通用的事件侦听器函数?

Node.js 的适用场景？JavaScript 原型，原型链 ? 有什么特点？

页面重构怎么操作？

WEB 应用从服务器主动推送 Data 到客户端有那些方

式？

事件、IE 与火狐的事件机制有什么区别？ 如何阻止

冒泡？

ajax 是什么?ajax 的交互模型?同步和异步的区别?

如何解决跨域问题?

js 对象的深度克隆

AMD 和 CMD 规范的区别？

网站重构的理解？

如何获取 UA？

js 数组去重

HTTP 状态码

cache-control

js 操作获取和设置 cookie

***************************************************************