面试总结上一、对SEO搜索优化的了解搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站的有关搜索引擎内的自然排名的

对SEO搜索优化的了解

搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站的有关搜索引擎内的自然排名的方式。
简单理解是通过总结搜索引擎的排名规律对网站进行合理优化，使网站在各搜索引擎的排名提高
深刻的杰是通过SEO这样一套给予搜索引擎的营销思路为网站提供生态式的自我营销解决方案，让网站在行业内占领先地位，从而获得品牌收益。

img的title和alt的区别

1、alt属性

在图片加载不出来的时候，就会在图片末显示的地方出现一段alt设置的属性内容
浏览器的搜索引擎可以通过alt属性的文字描述来获取图片。 2、 title属性
title属性可以用在任何元素上,当用户把鼠标移动到元素上，就会显示预先设置的title的内容，起到对图片说明的作用，实际上就是对图片的解释和备注总结

   alt是图片加载失败时显示在网页上的替代文字。  
   title是鼠标放在图片上时显示的文字，title是对图片的描述和进一步的说明

行内元素和块级元素

1、行内元素

不会占据整行，和其他元素在一行上显示
对margin设置左右方向有效，而上下无效；padding设置左右方向有效，而上下无效
设置宽、高无效，宽度是它的文字或图片的宽度，不可改变
内联元素中能容纳文本或者其他内联元素
例如： <span> <br> <a> <strong> <img> <input> <sup> <sub> 等

2、块级元素

块级元素占据一行，垂直排列
块级元素可以包含行内元素和块级元素；行内元素不能包裹块级元素
块级元素可以设置宽、高，外边距和内边距
例如： <div> <p> <h1>~<h6> <ul> <ol> <dl>等

媒体查询的使用

@media：媒体查询可以指定的设备上使用对应的样式代替原有的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

1、媒体查询的语法和操作符

   @meida not|only scree and (media feature){
       
   }

用@media开通注意@符号
关键字and not only
media feature 媒体特性，必须有小括号包含
1.1关键字
and：可以将多个媒体特性链接到一起，相当于"且"于的意思
not：排除某个媒体类型，相当于"非"的意思
only：指定某个特定媒体类型
1.2媒体特性
width：定义输出设备中页面可见区域的宽度
min-width:定义输出设置中页面最小可见区域宽度
max-width:定义输出设备中页面最大可见区域宽度

src和href之间的区别

1、href
href他指向一些网络资源，建立和当前元素或者说是当前文档的链接关系。在加载它的时候，不会停止对当前的处理，浏览器会继续往下执行。通常在a、link等标签中使用

2、src
Src表示的是对资源的引用，它执行的内容会嵌入到当前标签所在的位置（可替换元素）。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时，会停下来对后续文档的处理，直到src的内容加载完毕。常用在img、iframe、video、audio、script等标签中，

    <script src='JavaScript.js'></script>

当浏览器链接到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js脚本放在底部而不是头部

css让元素看不到的方法

1、display:none 隐藏之后不占据空间
2、visibility:hidden 隐藏之后占据空间
3、opacity:0 隐藏之后占据空间

重绘和回流

1、重绘
没有元素添加和删除，只是样式改变，针对浏览器对某一元素进行单独的渲染，这个过程就叫做重绘
2、回流
元素样式改变而影响到其在页面中的位置和大小，
元素被增加或者删除，浏览器重新的去渲染整个DOM树，回流比重绘更消耗性能，发生回流必定重绘，重绘不一定会导致回流
例如：
元素的颜色的改变会导致元素的样式改变此时就触发了重绘，但是其并没有影响其在页面的位置和大小所以就没有触发回流；但是元素通过定位或者改变大小导致样式的改变此时即符合重绘的定义也符合回流的定义；因而即触发了重绘又触发了回流

new操作符都做了什么

通过构造函数创建实例对象

1、创建一个空对象

  let obj=new Object()

2、链接到原型

把obj的proto指向构造函数Func的原型对象prototype,此时便建立了obj对象的原型链

  obj.__proto__=Func.prototype

3、绑定this值（让Func中的this指向obj，并执行Func的函数体）

   let result=Func.call(obj)

4、返回新对象（判断Func的返回值类型：如果无返回值或者返回一个非对象值，则将obj作为新对象返回；否则会将result作为新对象返回。)

   if(typeof(result)=='object'){ 
      func=result; 
   }else{ 
      func=obj 
   }

ajax的原理

1、先创建Ajax对象(XMLHttpRequest) 2、open准备发送，有三个参数，一个是提交方式（post/get），二是url接口地址，三是同步异步
3、send发送
4、发送过程中通过onreadystatechange来监听接收的回调函数，可以通过判断readyState==4和status==200来判断是否成功返回，然后通过responseText接收成功返回的数据

常见的设计模式

1、单例模式
单例模式保证一个类仅有一个实例，并提供一个全局访问点，实现方法为先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，确保一个类只有一个实例对象
2、工厂模式
工厂模式就是专门负责将大量有共同接口（或者共同抽象父类）的类实例化,而且不必事先知道每次是要实例化哪一个类的模式。它定义一个用于创建对象的接口，由子类决定实例化哪一个类。

谈谈对promise的了解

Promise 是异步编程的一种解决方案，相比传统的解决方案——回调函数和事件更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise
Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。 Promise 对象的状态不受外界影响
1、promise是一个构造函数，可以通过new Promise()得到一个promise的实例
2、在promise上，有两个函数，分别叫做resolve（成功之后的回调函数）和reject（失败之后的回调函数）
3、在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到这个 .then() 方法
4、Promise 表示一个异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；
5.、既然 Promise 创建的实例，是一个异步操作，那么，这个异步操作的结果，只能有两种状态：

异步执行成功了，需要在内部调用成功的回调函数 resolve 把结果返回给调用者；
异步执行失败了，需要在内部调用失败的回调函数 reject 把结果返回给调用者；
6、由于 Promise 的实例，是一个异步操作，所以，内部拿到操作的结果后，无法使用 return 把操作的结果返回给调用者；这时候，只能使用回调函数的形式，来将成功或失败的结果，返回给调用者；
7、我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，【预先】为这个 Promise 异步操作，指定成功（resolve）和失败（reject）回调函数；

js数据类型有哪些

1、基本数据类型
number、string、Boolean、null、undefined、symbol
2、引用数据类型
array、function、data等

js里如何判断是不是一个数组

1、instanceof方法
instanceof运算符是用来测试一个对象是否在其原型链构造函数的属性

   var arr=[]; 
   arr instanceof Array;//true'm'

2、constructor方法
constructor属性返回对创建此对象的数组函数的引用，就是返回对象相对应的构造函数

  var arr=[]; 
  arr.constructor==Array;//true

3、Object.prototype.toString.call()判断
Object.prototype.toString.call()可以获取到对象的不同类型

   let a=[7,8,9]; 
   Object.prototype.toString.call(a)=='[Object Array]';//true

4、Array.isArray()判断
Array.isArry()用于确定传递的值是否是一个数组，返回一个布尔值

   let a=[7,8,9];
   Array.isArray(a);//true9p

map和foreach的区别

1、map会返回一个新的数组，不会改变原来的数组，有返回值，可以return出来，foreach不会返回新的数组，允许对原数组进行修改
2、都有参数，item（每一项），index（下标），arr（原数组）

vue2的双向数据绑定原理

通过es5的Object.defineProperty()来实现，通过里面的getter和setter来双向数据绑定

数组去重的方法

1、利用ES6 Set去重

   var arr = [1,1,8,8,12,12,15,15,16,16];
   function unique (arr) {
      return Array.from(new Set(arr))
   }
   console.log(unique(arr))//[1,8,12,15,16]

2、利用for嵌套for，然后splice去重

    var arr = [1, 1, 8, 8, 12, 12, 15, 15, 16, 16];

    function unlink(arr) {
        for (var i = 0; i < arr.length; i++) {    // 首次遍历数组
            for (var j = i + 1; j < arr.length; j++) {   // 再次遍历数组
                if (arr[i] == arr[j]) {          // 判断连个值是否相等
                    arr.splice(j, 1);           // 相等删除后者
                    j--;
                }
            }
        }
        return arr
    }
    console.log(unlink(arr));

3、利用indexOf去重

    var arr = [1, 1, 8, 8, 12, 12, 15, 15, 16, 16];
    function unlink(arr) {
        if (!Array.isArray(arr)) {
            console.log('错误！')
            return
        }
        var array = [];
        for (var i = 0; i < arr.length; i++) {    // 首次遍历数组
            if (array.indexOf(arr[i]) === -1) {   // 判断索引有没有等于
                array.push(arr[i])
            }
        }
        return array
    }
    console.log(unlink(arr));

4、利用includes

    var arr = [1, 1, 8, 8, 12, 12, 15, 15, 16, 16];
    function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        var array =[];
        for(var i = 0; i < arr.length; i++) {
                if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                        array.push(arr[i]);
                  }
        }
            return array
    }
    console.log(unique(arr))

5、利用filter

    var arr = [1, 1, 8, 8, 12, 12, 15, 15, 16, 16];
    function unlink(arr) {
        return arr.filter(function (item, index, arr) {
            //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
            return arr.indexOf(item, 0) === index;
        });
    }
    console.log(unlink(arr));

..........

防抖和节流

1、防抖(debounce)：用于将用户的操作行为触发转换为程序行为触发，防止用户操作的结果抖动。一段时间内，事件在我们规定的间隔 n 秒内多次执行，回调只会执行一次。
2、节流：用于用户在与页面交互时控制事件发生的频率，一般场景是单位的时间或其它间隔内定时执行操作。一段时间内，事件在每次到达我们规定的间隔 n 秒时触发一次。

call、apply、bind的区别

call、apply、bind都是用来改变this指向的，他们在传递参数上很大的区别：
call传递的参数是以逗号形式隔开的，apply传递的参数是数组类型，bind不是立即执行的，返回的是一个函数形式，如果要执行在后面加一个()。

js的内存存储方式

1、简单数据类型的存储
简单数据类型保存在栈中，这些类型在内存中占有固定大小，他们的值保存在栈空间，按值访问。会在栈中开辟一段内存空间，变量值直接存在该内存中，变量读写的使他们实际保存的值。
2、复杂数据类型存储方式
复杂数据类型是不固定大小的数据，但是存放他们的地址大小是固定的，所以把地址保存在栈中，值保存在堆中，复杂数据类型是一个指针，指针保存在栈中，但是指针指向的是堆。即存储复杂数据类型的变量保存在栈中，数据本身保存在堆中。读取其数据时，先访问栈中的地址，通过地址找到存在堆中的数据

this的指向

1、箭头函数的this指向
当this是以函数的形式调用时，this指向的是全局对象，对于箭头函数来讲，箭头函数的this指向始终为外层的作用域
2、this指向绑定事件的元素
在DOM元素绑定元素时，事件处理函数里面的this指向绑定了事件的元素，target是指向触发事件的元素
3、普通函数中的this指向
普通函数的方式调用，this指向全局对象
4、this指向当前对象
在对象里面使用this，则指向当前对象

判断js的数据类型

1、typeof
通常用来判断基本数据类型，他返回表示数据类型的字符串（用typeof来判断null和引用类型返回的结果都是'object'）
2、instanceof

instanceof检测的是原型，表达式为：A instanceof B,如果A是B的实例，则返回true，否则返回false。
instanceof只能用来判断两个对象是否属于实力关系，而不能判断一个对象实例具体属于那种类型

3、constructor
这种判断方式其实涉及到原型、构造函数和实例之间的关系
在定义一个函数（构造函数）的时候，js引擎会为其添加prototype原型，原型上有其对应的constructor属性指向该构造函数，从而原型和构造函数之间互相知道对方。当构造函数实例化的时候，其实例可以访问原型上的constructor属性，这样该实例就可以了解到通过谁生产了自己，这样就可以在新对象产生之后了解其数据类型。
虽然该方法可以判断其数据类型，但存在两个缺点：

null和undefined是无效的对象，因此是不会有constructor存在的，这两种类型需要通过其他方式来判断
函数constructor是不稳定的，这个主要体现在自定义对象上，当开发者重写prototype后，原有的constructor引用会丢失，constructor或默认为object
4、toString()
toString()是object的原型方法，调用该方法，默认返回当前对象的[[Class]]。这是一个内部属性，其格式为[object Xxx],其中Xxx就是对象的类型，所以利用 Object.prototype.toString()方法可以对变量的类型进行比较准确的判断

eventLoop的理解

js是单线程的，主要用于DOM操作，如果是多线程，一个线程操作某个DOM节点，一个线程又在删除这个节点，此时就会出现问题。为了保证不会发生类似的情况，js选择只用一个主线程来执行，每次只能执行一项任务，其他任务按照顺序排队等待被执行，只有当前的任务执行完成之后，才会执行下一个，当遇见ajax请求、setTimeout定时器是，会单独开启异步线程，异步线程耗时之后会推入到异步队列中中等待执行，当主线程执行完毕之后，会到异步队列中取出到主线程，执行完再去异步队列中去第二个，来回取的过程就是事件循环机制。

常见的跨域的方式

不同协议、不同域名、不同端口会造成跨域
1、动态创建script
动态创建一个script标签。利用script标签的src属性不收同源策略限制。因为所有的src属性和href属性都不受同源策略限制，可以请求第三方服务器数据内容

去创建一个script标签
script的src属性设置接口地址
接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
通过定义函数名去接受后台返回数据
2、jsonp
主要利用动态创建script标签请求后端接口地址，然后传递callback参数，后端接收callback，后端经过数据处理，返回callback函数调用的形式，callback中的参数就是json
3、通过代理的方式
在vue中使用vue.config.js里面配置一个proxy，里面有一个target属性指向跨域链接，修改完重启项目
4、CORS
CORS全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的

存储方式浏览器

1、cookie
2、sessionStorage
3、localStorage

浏览器的缓存策略

1、强制缓存
强制缓存是在浏览器加载资源的时候，先检查缓存时间是否过期，若未过期则直接从缓存中查找请求结果，如果缓存时间过期或不存在该缓存结果，则向服务器端发起请求
2、协商缓存
不指定缓存的有效时间，而是在请求时直接发送资源标识到服务端确认缓存是否需要更新，如果请求响应返回的HTTP状态为304，则表示缓存任然有效，否则返回状态码200，最新的资源和最新的资源标识。

watch、computed、methods

1、watch 监听属性

watch是监听一个特定的值，当该值发生变化时执行特定的函数

watch支持异步
监听的函数有两个参数，一个是新的值（newVal），一个是之前的值（oldVal）
watch不支持缓存，当监听数据发生改变时立即执行相应的操作
当一个数据影响多个数据的时候考虑使用watch

2、computed计算属性

计算属性是同步，不支持异步，如果内有异步操作时无效，无法监听数据的变化
必须有一个返回值，通过return来返回
有缓存，如果都没有发生变化，就不再执行计算，直接把第一次计算的值返回。只有监测到属性值发生变化的时候，才会执行计算
多个数据影响一个数据的时候考虑使用computed 3、methods
没有缓存，每次都会重新计算