< 面试题整理 >

面试题整理

Posted by CodingWithAlice on July 8, 2019

试题整理

刷题错题整理：

  1. 关闭tab标签页后，sessionStrorage存储的数据才会删除；

  2. 如果对象有两个相同名称的键，则键会被替换掉：它仍然处于第一个键出现的位置，但是值是最后出现的那个键的值；

  3. 隐式字符串化：当对象的键也被设置为对象时，会字符串化一个对象，它会变成[Object object];

  4. 不要在块内声明一个函数，如果需要的话，就使用函数表达式；

  5. stopPropagation()阻止事件冒泡，但不会阻止定义在元素上的其他事件；

    stopImmediatePropagation()彻底阻止事件，在其之后绑定在元素上的其他监听事件都不会触发；

  6. 视口的缩放配置的目的：为了让css样式中的逻辑像素匹配手机终端的物理像素，让网页视图适合手机屏幕；

    使用rem单位的目的：为了让一份代码适应大部分不同屏幕的手机；

    自适应：在同一终端下，页面布局根据视口本身的变化而自动调节布局（如PC端页面变化、resize事件等）；

    响应式：指页面根据检测到的不同终端类型，自动调整布局；

  7. 执行优先级由高到低：小括号(xxx) > 属性访问. > new foo() > foo()

function getName(){
    console.log(1)
}
function Foo() {
    this.getName = function () {
        console.log(2); 
    };
    return this;
}
Foo.getName = function () {
    console.log(3);
};

var a=new Foo.getName();//属性.的优先级高于new foo()，该行等于new (Foo.getName)();，返回3

var b=new Foo().getName();//new foo()的优先级高于foo()，该行等于(new Foo()).getName()；，返回2

var c=new new Foo().getName();//new foo()优先级低于属性.，该行等于new (new Foo().getName)();，相当于new一个new foo()的getName属性函数，返回2

//再举个栗子
new Date().getTime();//===((new Date()).getTime)()
(new Date).getTime();//===((new Date()).getTime)()
new Date.getTime();//Uncaught TypeError: Date(...).getTime is not a function；===new (Date.getTime)()

2. 有哪几种存储方式？有什么不同？

cookie、localStorage、sessionStorage；

相同点：都保存在浏览器端；

不同点：

①传递方式不同

​ cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。

​ sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

②数据大小不同

​ （cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。） ​ 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

​ sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

③数据有效期不同

​ sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

​ localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

​ cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

④作用域不同

​ sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

​ localStorage 在所有同源窗口中都是共享的；

​ cookie也是在所有同源窗口中都是共享的。

3.点击按钮进行数据请求，怎么实现按序执行请求？

问：点击页面上一个按钮发送两个ajax请求，其中一个请求会不会等待另一个请求执行完毕之后再执行？

答：不会，这两个异步请求会同时发送，执行的快与慢是看响应的数据量的大小及后台逻辑的复杂程度。

问：怎么让它们按序执行？

答：两种方案：

  1. Ajax2()方法的执行放到Ajax1()的success回调函数的最后一行。
  2. Ajax1()的异步请求方法中，增加一个回调函数 ：complete : Ajax2

5.cookie和session了解吗？

cookie和sessiom是两种保持会话状态的方法。

​ cookie就是指客户端在向服务端发起请求的时候，服务端会在进行response的时候给当前客户端的一小段文本信息，并保存在当前的客户端的浏览器中，这一小段cookie文本信息也就是这个客户端去访问服务端的通行证，有了这个通行证，以后当这个客户端再去访问服务端的时候，服务端便知道是谁拿着通行证去进行访问了。

​ session和cookie的功能类似，也是一种保持会话状态的方式，在用户使用浏览器发起会话时，服务器会为每一个用户浏览器提供一个单独的session对象来保存用户的数据，并将它保存在服务端，而当用户访问其他web资源的时候，则可以从保存用户数据的session对象中把用户数据抽取出来并进行访问。

区别：

  1. cookie的用户数据是保存在用户浏览器的cookie中的；

session的用户数据是保存在服务器为用户浏览器单独创建的session对象中的。

  1. 数据的读取和调用，cookie可以采用request.getCookies这种方法；

    session则可以用request.Session的方法。

  2. 安全性，cookie是存储在用户浏览器中的；

    而session是存储在服务器上的，所以session比cookoe要相对安全；

30. npm中的工具了解过吗？（yarn）

npm就是JavaScript的包管理工具。npm主要用来下载，安装，管理第三方模块。

创建一个包描述文件：npm init [-y]

查看包的信息 npm info <package-name>

查看包的版本信息 npm info <package-name> versions

安装指定的包：npm install <package-name> 默认会安装在当前目录下的 node_modules 目录下，如果 node_modules 不存在，则会自动创建。 本地安装包，如果包里有可执行文件，则npm会把可执行文件安装到 node_modules/.bin 目录下。

安装指定版本的包：npm install <package-name>@<version>

安装包并记录依赖，会在 package.json 中 dependencies 属性记录依赖npm install <package-name> --save

卸载包：npm uninstall <package-name>

更新包：npm update <package-name>

全局安装包，把包安装在全局目录，供所有项目使用:npm install <package-name> -g 全局安装包，如果包里有可执行文件，则npm会把可执行文件安装到 node_modules 上一级目录中。

查看全局目录：npm root -g

修改全局目录的路径：npm config set prefix "新路径" 默认情况下全局安装的包不能直接在项目中加载，如果要直接加载，需要在系统环境变量中添加一个名为 NODE_PATH 的变量，值为全局安装目录下 node_modules 位置。

查看npm配置 npm config list

7. Node.js了解吗？

​ 根据官方文档可以知道，node就是一个给予谷歌v8引擎的一个javascript的运行时，可以理解为运行js的一个虚拟机。他使用的是一个事件驱动，非阻塞I/O模型 ，他是将js的运行环境搬到了服务器端，和客户端没有一点关系。是一个纯服务端的东西，node只是为js提供了一个平台。

　　node里面其实还分了两块，一是封装了v8引擎，目的是为了执行es（如定义变量，定义函数等），另外一个提供了大量的工具库，是帮助node实现各种功能的，提供了一些以前js的环境办不到的事情，比如文件操作，网络操作，操作系统的操作。

​ 既然node是一个平台（所谓的平台就是用来运行特定语言的），也就意味着node是用来运行语言的，那么java也是语言，node能运行java吗？据nodejs创始人Ryan Dahl回忆，他最初是选择了Ruby这门语言，但是Ruby这门语言的虚拟机效率不怎么样最终放弃了，按照这种思路，貌似node将java的虚拟机集成进来应该可以运行java，但node作者最终选择了javascript。

　　这样js就实现了在服务端运行的可能，js运行在node平台上（分为v8部分，用来执行es，和大量的工具库组件（API）称之为libuv，提供了以前js的环境办不到的事，如文件操作，网络操作等等）。

用途：

​ （1）node可以接受客户端用户的所有请求，并且能够快速的给出响应，因此node可以用来做网站。

　　（2）node可以作为一个中间层来来分发调用数据接口，比如有一个网站数据是有java提供的，我们可以让node作为一个中间层，来接受用户的请求，然后通过node来调用java数据接口，获取到数据后直接在node层面做html的封装，然后将渲染好的页面直接给用户。为什么要这样做，直接请求java接口不行吗，这是因为node被称之为高性能的web服务器，在并发和抗压方面都比传统的平台要好很多，因此这样一包装可以极大的减轻服务器的开发。

　　通过上面的两点，可以总结出，node在web中要么从前端页面到后端服务全包了，一个是只做其中的一点。

　　一言以蔽之，node就是一个javascript的运行环境（平台），他不是一门语言，也不是javascript的框架。可以用来开发服务端应用程序，web系统。其特点是体积小，快速，高性能。

8.城市搜索和区块联动用的组件怎么实现的？

城市搜索功能是将input输入的内容，绑定到变量keyword上面，然后用watch监听这个变量，一旦变量变化，就用变量执行indexOf的方法去便利城市的name和value值，将得到的值push进入数组，然后将数组遍历显示在ul>li里面。

 watch: {
    keyword () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.keyword) {
        this.list = []
        return
      }
      this.timer = setTimeout(() => {
        const result = []
        for (let i in this.cities) {
          this.cities[i].forEach((value) => {
            if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
              result.push(value)
            }
          })
        }
        this.list = result
      }, 100)
    }
  },

	<div
      class="search-content"
      ref="search"
      v-show="keyword"
    >
      <ul>
        <li
          class="search-item border-bottom"
          v-for="item of list"
          :key="item.id"
          @click="handleCityClick(item.name)"
        >
          
        </li>
        <li class="search-item border-bottom" v-show="hasNoData">
          没有找到匹配数据
        </li>
      </ul>
    </div>

区块联动的组件

给每个字母都绑定ref，同时绑定方法，点击的时候；移动的时候，根据高度来进行区域块的联动

<template>
  <ul class="list">
    <li
      class="item"
      v-for="item of letters"
      :key="item"
      :ref="item"
      @touchstart.prevent="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @click="handleLetterClick"
    >
      
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  computed: {
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  },
  data () {
    return {
      touchStatus: false,
      startY: 0,
      timer: null
    }
  },
  updated () {
    this.startY = this.$refs['A'][0].offsetTop
  },
  methods: {
    //点击字母的时候，将点击得到的内容字母向父级传输，触发change的方法
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    //手指移动的时候，节流一下，同时也是触发父级的change，将手指滑动的内容传递
    handleTouchMove (e) {
      if (this.touchStatus) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          const touchY = e.touches[0].clientY - 79
          const index = Math.floor((touchY - this.startY) / 20)
          if (index >= 0 && index < this.letters.length) {
            this.$emit('change', this.letters[index])
          }
        }, 16)
      }
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>

10.bootstrap中的栏栅一行有12个，是怎么做到的？

​ 总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col-、小.col-sm-、中 .col-md-、大.col-lg-、特大.col-xl-。

​ 使用的row行必须包裹在container和container-fluid下，外部容器一个是container，一个是container-fluid，第一个container是固定宽度，居中在网页中间，第二个container-fluid是百分比宽度，宽度为100%，根据情况我们可以选择不同的容器。

工作原理：

​ 栅格系统提供了内容居中、水平填充网页内容的方法，.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐。

​ 行(.row)是列(.col-*)的横向组合和父容器，每列都有水平的padding值，用于控制列与列之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。

​ .row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"...。

​ .col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响。

  超小屏幕（新增规格）<576px 小屏幕 次小屏≥576px 中等屏幕 窄屏≥768px 大屏幕 桌面显示器≥992px 超大桌面 大桌面显示器≥1200px
container最大宽度 None（auto） 540px 720px 960px 1140px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
列数 12列 12列 12列 12列 12列
Gutter width（都是每列两侧各15px） 30px 30px 30px 30px 30px
列间隙（都是每列两侧各15px） 30px 30px 30px 30px 30px
都可嵌套、可排序          

11.轮播图实现的时候是怎么考虑的？

四种方式实现：

​ swiper插件实现轮播图；

​ JS实现轮播图；

​ jQuery实现轮播图；

​ css3实现轮播图；

// 1. 克隆元素
ul.appendChild(ul.children[0].cloneNode(true));
// 2.创建ol 和li
var ol = document.createElement("ol");//创建ol元素
scroll.appendChild(ol);// 把ol放到scroll盒子里面去
for (var i=0;i<ulList.length-1;i++) {
    var li = document.createElement("li");// 创建li元素
    li.innerHTML = i + 1;// 给li里面添加文字  1 2 3 4 5
    ol.appendChild(li);// 将li元素添加到ol里面
}
ol.children[0].className = "current";
// ol中的第一个li背景色为purple现无缝滚动就需要多一张图片才行，即克隆第一张图片，放到最后面

//动画函数：
// 动画函数的第一个参数，代表动画对象；第二个参数代表动量
// 让图片做匀速运动，匀速动画的原理是:当前的位置 + 速度,即 offsetLeft + speed
function animate(obj,target){
    // 首先清除掉定时器
    clearInterval(obj.timer);
    // 用来判断 是+ 还是 -  即说明向左走还是向右走
    var speed = obj.offsetLeft < target ? 15 : -15;
    obj.timer = setInterval(function(){
        var result = target - obj.offsetLeft;//它们的差值不会超过speed
        obj.style.left = obj.offsetLeft + speed + "px";
        // 有可能有小数的存在，所以在这里要做个判断             
        if (Math.abs(result) <= Math.abs(speed)) {
            clearInterval(obj.timer);
            obj.style.left = target + "px";
        }
    },10);
}

//定时器函数：
var timer = null; 	// 轮播图的定时器
var key = 0;		// 控制播放的张数
var circle = 0;		// 控制小圆点

timer = setInterval(autoplay,1000);// 自动轮播
function autoplay(){
    /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,就要重头开始播放.  
		因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/
    key++; 						// 先++
    if(key > ulLis.length-1){	// 后判断
        ul.style.left = 0; 		// 迅速调回
        key = 1; 				// 因为第6张是第一张，所以播放的时候是从第2张开始播放
    }
    // 动画部分
    animate(ul,-key*liWidth);

    // 小圆点circle，当显示第几张图片是，对应的小圆点的颜色也发生变化 
    /*同理,对小圆点也要有一个判断*/
    circle++;
    if (circle > olLis.length-1) {
        circle = 0;
    }
    // 小圆点颜色发生变化
    for (var i = 0 ; i < olLis.length;i++) {
        // 先清除掉所用的小圆点类名
        olLis[i].className = ""; 
    }
    // 给当前的小圆点 添加一个类名
    olLis[circle].className = "current";

}

12.前端性能优化的方法，举例说明

①内容方面

减少HTTP请求次数（使用精灵图） 减少DOM操作 减少DNS查询：当客户端DNS缓存（浏览器和操作系统）缓存为空时，DNS查找的数量与要加载的Web页面中唯一主机名的数量相同，包括页面URL、脚本、样式表、图片、Flash对象等的主机名。减少主机名的 数量就可以减少DNS查找的数量。减少唯一主机名的数量会潜在减少页面中并行下载的数量（HTTP 1.1规范建议从每个主机名并行下载两个组件，但实际上可以多个），这样减少主机名和并行下载的方案会产生矛盾，需要大家自己权衡。建议将组件放到至少两个但不多于4个主机名下，减少DNS查找的同时也允许高度并行下载。

使用Ajax 可缓存：POST的请求，是不可以在客户端缓存的，每次请求都需要发送给服务器进行处理，每次都会返回状态码200。（可以在服务器端对数据进行缓存，以便提高处理速度）。GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。

②css方面

把css样式HTML代码页的头部，防止白屏 从页面中分离css代码，从外部引入 压缩代码 不要使用@import 避免css表达式width: expression(func(),document.body.clientWidth > 400 ? "400px" : "auto");

③js方面

脚本放到HTML代码页底部

从页面中分离js代码，从外部引入。

压缩代码 减少对DOM的访问 移除重复的脚本

④图片方面

优化图片（少用图片用css3新特性代替，使用矢量图代替位图） 矢量图：图标字体。 位图：GIF、JPG、PNG 不要在HTML中使用缩放图片 使用恰当的图片格式 按照HTTP协议设置合理的缓存 用css或js实现预加载 WebP图片格式能给前端带来优化 WebP格式：谷歌开发一种旨在加快图片加载速度的图片格式

(function(){
	try{
		console.log(a);
		
		var a="a";
		console.log(a);
		b();
		c(); 
		
		function b(){
			console.log("b");
		}
		var c=function(){
			console.log("c");
		}
		console.log("d")
        
        }
})

13.SEO搜索引擎优化有哪些方法？

1.创建唯一且准确的网页标题 <title>

<title>前端搜索引擎优化的技巧</title>

2.使用 <meta> 的 keywords 元数据来提炼网页重要关键字，以及 description 元数据准确总结网页内容。

<meta name='keywords' content='SEO,title,meta,语义化,alt'>
<meta name='description' content='介绍搜索引擎优化的技巧:语义化标签、img的alt属性等。'>

3.使用语义化元素：<em> 或 <strong>

4.利用 <img> 中的alt 属性

5.设置rel='nofollow' 忽略跟踪

6.尽量让结构（HTML）、表现（CSS）及行为（JavaScript）三者分离。如果在一个 HTML 页面中，编写大量的 CSS 样式或脚本，会拖慢其加载速度，此外，如果不为 <img> 定义宽高，那么会引起页面重新渲染，同样也会影响加载速度。一旦加载超时，“蜘蛛”就会放弃爬取。如果这个 HTML 文档内容比较独特丰富（合理插入图片说明）等，会被认为质量较高符合用户需求，从而提高 SEO 的排名。

18.事件委托是什么？

将事件的处理程序绑定给一个父级元素，当任何子节点触发了匹配的父级元素绑定的事件，即可触发父级节点的处理程序，这就是 事件委托 。

事件委托是通过事件 ”冒泡“ 来用单个父节点而非多个子节点响应 UI Events 的技巧。

优点：

  • 减少事件绑定，事件委托将很多子元素的事件绑定都集中到一个通用的父元素，使得动态创建和移除的元素更加方便，对于新添加的元素也会有之前的事件，不需要考虑元素的事件绑定逻辑。假设需要对 <li> 标签进行增加，只管进行操作就行，不用增加元素的 “onclick” 事件。
  • 减少事件监听使用的内存，这可能对那些经常重新加载的小页面效果不明显，但是对需要长时间运行的应用很重要。因为当元素被从 DOM 中移除之后很难追踪它对内存的使用，造成内存泄露，这是由元素的事件绑定造成的。有了事件委托，在移除子元素之后不用担心没有解除绑定事件。

那什么样的事件可以用事件委托，什么样的事件不可以用呢？

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

<ul id='ul'>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
 </ul>
 <button id='button'>添加元素</button>

window.onload = function(){
      let Ul = document.getElementById('ul');
      let Li = oUl.getElementsByTagName('li');
      let but = document.getElementById('button');
      let now = 3;
      // 事件源：event对象，不管在哪个事件中，只要你操作的哪个元素就是事件源
      // ie：window.event.srcElement
      // 标准：event.target
      //Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）
      oUl.onmouseover = function(e){
        let ev = e || window.event;
        let target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li'){
          target.style.background = 'red';
        }
      }
      oUl.onmouseout = function(e){
        let ev = e || window.event;
        let target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li'){
          target.style.background = '';
        }
      }
      but.onclick = function(){
        now ++;
        let newLi = document.createElement('li');
        newLi.innerHTML = 111111 * now;
        Ul.appendChild(newLi);
      }
    }

19.前端框架Vue、angular、React的优点和缺点

其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。

Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。

Vue.js的特性如下：

1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化

优点：

1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点

1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3. 不支持IE8：

angularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

angularJS的特性如下：

1.良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试

优点：

1. 模板功能强大丰富，自带了极其丰富的angular指令。
2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
3. 自定义指令，自定义指令后可以在项目中多次使用。
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点：

1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
5. DI 依赖注入 如果代码压缩需要显示声明.

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

React特性如下：

1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合。

优点：

1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的[架构](https://link.jianshu.com/?t=http://lib.csdn.net/base/16)，它随着React视图库的开发而被Facebook概念化。
5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6. *兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点：

React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用

20.前端路由有哪些

1571447049844

22.简单的数值运算

1+'2'+'2'="122"
1+ +'2'+'2'="32"
1+ -'1'+'2'="02"
'A'-'B'+'2'="NaN2"
'A'-'B'+2=NaN

  1. Canvas绘图；

  2. vue-cli如何使用json数据模拟？

  3. 项目中轮播图、列表、联动、递归展示使用，后台数据怎么模拟，获取的地址是怎么写的，面试官会详细听，问到代码，甚至会给出一定的意见（v-for改为数组管理），项目的难点在哪里

  4. 学习的方法有哪些，《js高级程序设计》中函数重载了解吗

  5. eval()函数可以解释由js源代码组成的字符串吗？该函数能用调试工具进行断点调试吗？该函数是js自带的函数，会不会引起安全性问题？该函数动态解释字符串，会存在效率问题吗？

  6. 属性document.body.scrolWidth表示网页中滚动条的宽度吗？

  7. js或DOM操作方便，浏览器兼容的注意项有哪些

  8. Web前端开发常见的安全漏洞

  9. 轮播图的实现及后台数据抓取

  10. 安全性，在无法使用HTTPS的情况下，局域网如何实现防止报文攻击

  11. 列举常用浏览器以及说明其内核

  12. react的核心是什么

  13. 为什选择vue+element这样一个体系搭建系统？有什么吗优点？

  14. 公司要求写代码，用js原生仿照发布者订阅者模式写。

  15. 写一个左侧导航栏，不能调试，鼠标移动底部变色，参照京东左侧导航栏

  16. 虚拟DOM说一下？在生命周期里的对应阶段？

  17. 用的前端组件是什么？

  18. 验证码有写过没

  19. npm有学过除简单命令之外的服务构建么？

  20. echarts有用过么？WebGL知道么？

  21. 数据结构了解多少？数据库呢？

  22. 怎么样去查看内存、性能：性能chrome调试的时候用network的网络选项，内存不清楚

  23. react用过吗？讲了一下react和vue之前，jQuery和bootstrap，问学过吗？

  24. 实现0.5px横线

  25. 定时器一秒加一次

  26. Webscoket（解决痛点）

  27. Vue写插件的时候，比较核心的install方法是怎么实现的

  28. 我现有项目里面使用的微信开发者工具是比较原生的小程序开发方法，有没有了解过比较新的小程序写法

  29. es6中Promise、async await、generator分别是怎么使用的，她给了一个场景：按序分别请求三次数据，前一次调用结束才能开始下一次，怎么写

    我回答：在promise里面，await+请求方法，resolve的时候回调下一个请求

    她说这种性能比较低，链式的结果就是一个常见的回调地狱

  30. keep-alive标签的原理是什么？有什么功能？

  31. http里面cache-control了解吗？有什么作用？

  32. 在页面中的动画，设置一个定时器，间隔一段时间就动一次，考虑性能，以及考虑整个页面的刷新时间，应该设置多长时间？我？？？不知道要问我什么，我说我平常是写死的，500ms

  33. 在同源的标签里面要传递数据，会用什么方法？

  34. ajax的原理

  35. 参数序列化

  36. z-index的生效前提

  37. react生命周期

  38. use strict是什么？

  39. 什么是window对象？什么是document对象

  40. 替代图片有哪几种

  41. MVVM的原理

  42. set有那些用处？

  43. created和mounted的区别？

  44. vue中v-model的原理？说一下Object.defineProperty上的方法？

  45. v-if与v-show computed与watched的区别和应用场景？

  46. 浏览器策略–同源策略

  47. 写一个函数判断一个字符串回文

  48. 写一个方法将多个对象合并成一个对象（大概是这个，当时我理解错了）

  49. vue-router原理

  50. 计算机网络中，客户端发送请求到客户端可以怎么发送

  51. 用style和.css文件引入css样式有什么不同？分别适用于什么场景？

  52. 项目中的公共样式是使用提取出来的单独文件好，还是统一放在style里面好？

  53. 使用rem作为手机端适配单位的过程中有没有遇到什么问题？会不会出现用px更好的情况？

  54. 什么是http协议？

  55. 三次握手中，服务端在发送ACK包+SYN包时做了什么

  56. 线程和进程有什么区别

  57. 手写一个单向链表

  58. vue生命周期有哪些？destroy用过吗？

  59. 手写代码实现一个eventbus。分别实现三种方法listen、trigger、remove

  60. 回流和重绘

  61. XSS脚本攻击

  62. input、onmousedown、onmouseup、click、onfocus之间的区别

  63. fetch请求是什么

  64. 缓存相关Header

  65. node里的事件机制

  66. Promise常用API有哪些？

  67. await后面跟的是什么？

  68. defineProperty的缺陷？怎么解决这个问题？

  69. three.js学得怎么样

CATALOG
    FEATURED TAGS
    《JavaScript高级程序设计4》 < LTN3 > < LTN2 > < JS原生基础相关 > < 算法题 > < vue相关知识点 > < CSS相关内容 > < HTTP相关 > < 面试题整理 > < LTN1 > < 工作经验沉淀 > < 小程序 > < webpack > < 工程化 > < 浏览器原理 > < 重构2 > < React17+TS4 >
    FRIENDS