面试题总结

对seo搜索优化的理解

seo即搜索引擎优化，就是通过采用易于搜索引擎索引的合理手段，使网站对用户和搜索引擎更友好，从而更容易被搜索引擎收录及优化排序。。

img的title和alt的区别

title是图片在正常显示的情况下鼠标移动上去显示的解释文字。
alt是图片无法正常加载显示的提示文字。

行内元素和块级元素

行内元素：a、span、strong、b、em、i、input、select、img
块级元素：p、br、div、h1~h6、ol、ul

媒体查询的使用方式

使用Media Queries必须要使用“@media”开头，最大宽度max-width，最小宽度min-width，多个媒体特性使用

    @media screen and (min-width:600px) and (max-width:900px){
      body {background-color:#f5f5f5;}
    }

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备，not关键词表示对后面的表达式执行取反操作

    @media not print and (max-width: 1200px){样式代码}

only关键词

    @media only screen and (min-width:600px) and (max-width:900px){
      body {background-color:#f5f5f5;}
    }

src和href的区别

1. 请求资源类型不同

1. href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
2. 在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2. 作用结果不同

1. href 用于在当前文档和引用资源之间确立联系；
2. src 用于替换当前内容；

3. 浏览器解析方式不同

• 若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
• 当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

4. link和@import的区别

• link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS
• link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
• link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM改变样式；而@import不支持。

css让元素看不到的方法

• opacity: 0;
• display: none;
• overflow:hidden
• visibility:hidden;
• z-index:-1000
• transform:scaleY(0)

重绘和回流

重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘。
回流：当一个元素自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，就产生了回流。

什么时候会进行重绘

列举一些相关的CSS样式：color、background、background-size、visibility、box-shadow

什么时候会进行回流

• 添加或者删除可见的DOM元素的时候
• 元素的位置发生改变
• 元素的尺寸发生改变
• 内容改变
• 页面第一次渲染的时候

如何进行性能的优化

• 用transform 代替 top，left ，margin-top， margin-left… 这些位移属性
• 不要使用 js 代码对dom 元素设置多条样式，选择用一个 className 代替之
• 不要在循环内获取dom 的样式例如：offsetWidth, offsetHeight, clientWidth, clientHeight等。浏览器有一个回流的缓冲机制，获取这些属性时会产生回流
• 避免设置多层内联样式，写个外部类这样只回流一次
• 让多次回流的元素脱离文档流比如动画，使用 position 属性的 fixed 值或 absolute 值
• 一起变化（同时修改所有需要变化的属性）

new操作具体干了什么

创建一个给定构造函数的实例对象

1. 创建一个空对象 var obj = new Object();
2. 让空对象的原型属性指向原型链，设置原型链 obj.proto=Func.prototype;
3. 让构造函数的this指向obj，并执行函数体 var result=Func.call(obj);
4. 判断返回类型，如果是值就返回这个obj，如果是引用类型，返回这个引用对象。 按照以上步骤New

function New () { 
    var obj = new Object();
    obj._proto_ = Object.prototype;
    Object.call(obj);
    return typeof result === 'object'? result : obj; 
}

ajax的原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

• 创建XMLHttpRequest对象。
• 设置请求方式。
• 调用回调函数。
• 发送请求。

    var xmlHttp=new XMLHttpRequest();
    //第一步：创建XMLHttpRequest对象 
    var xmlHttp;
    if (window.XMLHttpRequest) {             //非IE
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {       //IE
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }

常见的设计模式有哪些

单例模式

就是保证一个类只有一个实例，实现的方法一般是先判断实例存 在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类 只有一个实例对象。在 JavaScript 里，单例作为一个命名空间提供者，从全 局命名空间里提供一个唯一的访问点来访问该对象。

观察者模式

观察者的使用场合就是：当一个对象的改变需要同时改变 其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用 观察者模式。总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽 象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化

说说对promise的理解

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态： pending(等待态)，resolved(成功态)，rejected(失败态)；

1. promise.all的使用方法以及promise.race的使用方法;

    let p1=new Promise((res,rej)=>{
        setTimeout(()=>{
            res(1)
        })
    })
    let p2=new Promise((res,rej)=>{
        setTimeout(()=>{
            res(2)
        },1000)
    })
    Promise.all([p1,p2]).then(res=>{
        console.log(res);//[1,2]
    })

    Promise.race([p1,p2]).then(res=>{
        console.log(res);//1
    })

js数据类型有哪些

基本类型：string、number、boolean、null、undefined、symbol、bigint
复杂类型：function、object、Array

js内存存储方式

在 js 中 ，存储方式 有两种 ， 一种是本地 存储， 另一种是临时性 的 本地 存储 。 SessionStorage:临时性 的 本地 存储， 只要关闭浏览器，数据就会被清理掉，仅当次会话有效。

js如何判断是不是数组

1. 通过instanceof判断

    let a = [];
    a instanceof Array; //true

2. 通过constructor判断

    let a = [1,3,4];
    a.constructor === Array;//true

3. 通过Object.prototype.toString.call()判断

    let a = [1,2,3]
    Object.prototype.toString.call(a) === '[object Array]';//true

4. 通过Array.isArray()判断

    let a = [1,2,3]
    Array.isArray(a);//true

map和foreach的区别

• foreEach()方法:针对每一个元素执行提供的函数。
• map()方法:创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。

forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

vue2双向数据绑定原理

vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的，通过object.defineProperty()来劫持对象属性的getter和setter操作，在数据变动时发布消息给订阅者，触发响应的监听回调。
通过object.defineProperty()这个方法接收3个参数，一个是定义属性的对象，第二个是要定义或者修改属性名，第三个是将被定义或者修改的属性描述符。

    object.defineProperty(obj, name,{
        get:function resultGetter() {

        },
        set:function resultSetter() {

        }
    })

• observer：数据监听器，监听数据对象进行遍历，包括子属性对象的属性都加上getter和setter。
• compile：解析模板指令，将模板中的遍历替换成数据，然后初始化渲染页面视图，并将每个指令对应节点绑定更新函数，添加监听数据的订阅者，一旦数据又变化，收到通知，更新视图。
• watcher：订阅者是observer和compile之间的通信桥梁，在自身实例化时往消息订阅器dep里添加自己，自身必须有个updata()方法，待属性变动dep.notice()通知时，能调用自身的updata()方法，并触发compiler中绑定的回调。
• depend: 消息订阅器，当有多个订阅者的时候，需要有一个统一维护者。depend用来收集订阅者，内部维护了一个数组。

数组去重的方法

1. 利用ES6Set去重（ES6中最常用）

    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去重（ES5中最常用）

    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));

防抖和节流

防抖

• 所谓防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流

• 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

apply、call和bind的区别

call,apply,bind主要的功能是改变this指向，但使用上略有不同。
call 和 apply 的主要区别是在传递参数上不同，call 后面传递的参数是以 逗号的形式分开的，apply 传递的参数是数组形式 是以 A 开头的,所以应该是跟 Array(数组)形式的参数 bind 返回的是一个函数形式，如果要执行，则后面要再加一个小括号 例如： bind(obj,参数 1,参数 2,)(),bind 只能以逗号分隔形式，不能是数组形式

this的指向

   console.log(this)//window
   function fn(){
        console.log(this)
   }
   
   fn()//window
   window.fn()
   
   (function(){
       console.log(this)//window
   })()
   
   var obj={
       a:1
       fun:function(){
           console.log(this)//obj
          function foo(){
              console.log(this)//window
          }
          foo()
       }
   }
   obj.fun()
   
   ////////////
   
   function fn(){
       console.log(this)//obj
   }
   
   var obj={
       fun:fn
   }
   
   obj.fun()
   
   setTimeout(function(){
       console.log(this)//window
   },1000)
   
   setInterval(function(){
       console.log(this)//window
   },1000)
   
    function foo() {
        console.log(this);//obj2
        var test=()=>{
            console.log(this);//obj2
        }
        test()
    }
    var obj2={
       fun:foo
   }
   obj2.fun()

判断js的数据类型

1. 最常见的判断方法：typeof
2. 判断已知对象类型的方法： instanceof
3. 根据对象的constructor判断： construc ...
4. 通用但很繁琐的方法： prototype

var  a = "iamstring";
var b = 222;
var c=[1,2,3]
alert(typeof a)  ------------> string
alert(typeof b)  ------------> number
alert(c instanceof Array) --------------->  true
alert(c.constructor === Array) ----------> true
alert(Object.prototype.toString.call(c) === [object Array]) -------> true;

Eventloop的理解

.是 js的一个底层运行原理,js是单线程的,但是也有一些耗时任务, 会影响执行效率.代码都在主线程中执行,当遇见你像ajax请求.setTimeout 定时器时候,会 单独开启异步线程.异步线程耗时之后会推入异步队列中等待执行.然后当主线程执行完毕 之后.会到异步队列中取出到主线程中执行.然后再去异步队列中取第二个.这个来回取的过 程就是您所说的事件循环(eventLoop)吧

常见的跨域方式

1. 是 jsonp

jsonp 实现原理：主要是利用动态创建 script 标签请求后端接口 地址，然后传递 callback 参数，后端接收 callback，后端经过 数据处理，返回 callback 函数调用的形式，callback 中的参数 就是 json

2. 通过代理的方式（前端代理和后端代理）

前端代理我在 vue 中使用那个 vue.config.js 里面配置一个 proxy,里面有个 target 属性指向跨域链接.修改完重启项目就可 以了.实际上就是启动了一个代理服务器.绕开同源策略,在请求 的时候,通过代理服务器获取到数据再转给浏览器

3. 是 CORS

CORS 全称叫跨域资源共享，主要是后台工程师设置后端代码来达 到前端跨域请求的

浏览器的存储方式

cookie

h5之前，存储主要用cookies，缺点是在请求头上带着数据，导致流量增加。大小限制4k

localStorage

以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。IE8+支持，每个域名限制5M打开同域的新页面也能访问得到

sessionStorage

sessionStorage操作的方法与localStroage是一样的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage就比较方便。
注意，刷新页面sessionStorage不会清除，但是打开同域新页面访问不到

cookie、localStorage、sessionStorage之间的区别

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2. 存储大小限制不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4. 作用域不同，sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5. 安全性：需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的，因为它们保存在本地容易被篡改，使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。所以千万不要用它们存储你系统中的敏感数据。

浏览器的缓存策略

• 缓存分为强缓存和协商缓存。其中强缓存包括Expires和Cache-Control，主要是在过期策略生效时应用的缓存。弱缓存包括Last-Modified和ETag，是在协商策略后应用的缓存。强弱缓存之间的主要区别在于获取资源时是否会发送请求。

• Cache-Control中的max-age指令用于指定缓存过期的相对时间，优先级高于Expires。Cache-Control指定为no-cache时，由于no-cache相当于max-age:0,must-revalidate，所以都存在时优先级也是高于Expires。

• no-cache并不是指不缓存文件，no-store才是指不缓存文件。no-cache仅仅是表明跳过强缓存，强制进入协商策略。

• 如果Expires，Cache-Control: max-age，或 Cache-Control:s-maxage都没有在响应头中出现，并且设置了Last-Modified时，那么浏览器默认会采用一个启发式的算法，即启发式缓存。通常会取响应头的Date_value - Last-Modified_value值的10%作为缓存时间

vue2生命周期

vue 生命周期即为一个组件从出生到死亡的一个完整周期， 主要包括以下 4个阶段：创建，挂载，更新，销毁

• 创建前：beforeCreate, 创建后:created
• 挂载前：beforeMount, 挂载后：mounted
• 更新前：beforeUpdate, 更新后：updated
• 销毁前：beforeDestroy, 销毁后：destroyed

http常见的状态码

• 1xx信息。服务器收到请求，请继续执行请求

100继续请求者应当继续提出请求。服务器已收到请求的一部分，正在等待其余部分。
101切换协议请求者已要求服务器切换协议，服务器已确认并准备切换。

• 2xx成功。请求被成功接收并处理

201已创建请求成功并且服务器创建了新的资源。
202已接受服务器已接受请求，但尚未处理。
203非授权信息服务器已成功处理了请求，但返回的信息可能来自另一来源。
204无内容服务器成功处理了请求，但没有返回任何内容。
205重置内容服务器成功处理了请求，内容被重置。

• 3xx重定向。需要进一步操作来完成请求

300多种选择针对请求，服务器可执行多种操作。
301永久移动请求的网页已永久移动到新位置，即永久重定向。
302临时移动请求的网页暂时跳转到其他页面，即暂时重定向。
303查看其他位置如果原来的请求是 POST，重定向目标文档应该通过 GET 提取。
304未修改此次请求返回的网页未修改，继续使用上次的资源。
305使用代理请求者应该使用代理访问该网页。

• 4xx客户端错误。无法完成请求，或请求包含语法错误

400错误请求服务器无法解析该请求。
401未授权请求没有进行身份验证或验证未通过。
403禁止访问服务器拒绝此请求。
404未找到服务器找不到请求的网页。

• 5xx服务器错误。服务器在处理请求的过程中发成错误

500服务器内部错误服务器遇到错误，无法完成请求。
501未实现服务器不具备完成请求的功能。
502错误网关服务器作为网关或代理，从上游服务器收到无效响应。
503服务不可用服务器目前无法使用。

标准盒子模型和怪异盒子模型

标准盒与怪异盒的区别在于他们的总宽度的计算公式不一样。标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）；怪异模式下总宽度=width+margin（左右）（就是说width已经包含了padding和border值）。标准模式下如果定义的DOCTYPE缺失，则在ie6、ie7、ie8下汇触发怪异模式。当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；当设置为box-sizing:border-box时，将采用怪异模式解析计算；

1. 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

2. 而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。盒子的总宽度为一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

如何清除浮动

1. 额外标签法：最后一个浮动标签末尾添加一个空标签

    // 在最后一个浮动标签的末尾添加 如下 
    <div class="clear"></div>

    .clear {
      clear: both;
    }

2. 父级添加 overflow 属性方法

    // 给父级的盒子添加 overflow：hidden；
    <div class="father hidden"></div>

    .hidden {
        overflow: hidden;
    }

3. 使用 after 伪元素清除浮动（最常用，重点）

    // 在父元素中添加 伪类元素清除浮动
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }

4. 使用双伪元素清除浮动

    // 给父类添加一个 clearfix
    .clearfix: before,
    .clearfix: after {
        content: "";
        display: table
    }
    .clearfix: after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

es6新增语法

let、const、箭头函数、解构赋值、Promise、模板字符串、模块的导入和导出，还有一些数组新增的方法，比如查找元素find()和findIndex()

vue父子传值

父传子

父组件通过 import 引入子组件，并注册，在子组件标签 上添加要传递的属性，子组件通过 props 接收，接收有两种形式一是通过数组 形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置 要传递的数据类型和默认值，而数组只是简单的接收

子传父

子组件通过通过绑定事件触发函数，在其中设置 this.$emit(‘要派发的自定义事件’，要传递的值),emit中有两个参数一 是要派发的自定义事件，第二个参数是要传递的值 然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的30 / 73 methods 中的方法接受的默认值,就是传递过来的参数

computed和watch的区别

相同点

• 计算属性和监听属性, 本质上都是一个watcher实例, 它们都通过响应式系统与数据,页面建立通信.

不同点

• 计算属性带有"懒计算"的功能, 为什么我不说是缓存呢? 后面你就知道了.

• 监听的逻辑有差异. 这一点从使用时就特别明显, 监听属性是目标值变了,它去执行函数.而计算属性是函数的值变了, 它重新求值.

• 页面刷新以后, 计算属性会默认立即执行, 而watch属性则需要我们自己配置

• 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

• 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

vue3 常用的api

setup、reactive、ref、toRefs、ref获取元素

js常见的创建方式

1. 通过{}创建一个对象

    var obj={}

2. 通过new object()创建一个对象

    var obj=new Object()
    obj.name='zhangsan'
    obj.age=10
    obj.fun=function(name){
        conselo.log(this.name)
    }

3. 是用字面量创建对象

    var p = {
            name: 'jack',
            age: 13,
            setName: function (name) {
                this.name = name
            }
     }

4. 使用工厂模式创建对象

    function createPlant(name,age){ //返回一个对象的函数就是工厂函数
        var obj={
            name:name,
            age:age,
            fun:function(name){
                 this.name=name
            }
        }
        return obj
    }

==和===的区别

当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.

比较过程：

1.　　双等号==： 

如果两个值类型相同，再进行三个等号(===)的比较
如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：

2.　　三等号===:

如果类型不同，就一定不相等
如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。  
（判断一个值是否是NaN，只能使用isNaN( ) 来判断）
如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
如果两个值都是true，或是false，那么相等
如果两个值都引用同一个对象或是函数，那么相等，否则不相等
如果两个值都是null，或是undefined，那么相等

组织事件冒泡的方式

比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡

event.stopPropagation()方法

	$('.btn').click(function (event) {
		event.stopPropagation();
		alert('按钮被点击了');
	})

event.preventDefault()方法

    	$('.btn').click(function (event) {
		event.preventDefault();
		alert('按钮被点击了');
	})

return false

	$('.btn').click(function (event) {
		alert('按钮被点击了');
		return false;
	})

http请求方式有哪些

• GET请求指定的页面信息，并返回实体主体。
• POST向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
• PUT从客户端向服务器传送的数据取代指定的文档的内容。
• DELETE请求服务器删除指定的页面。

rem和em的区别

1. em是一个相对长度单位，它的单位长度取决于当前元素行内文本的字体尺寸，如当前元素行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸。em最初是指字母M的宽度，故名em，现指字符宽度的倍数，用法类似百分比，如：0.8em、1.2em、2em等。 `

2. 跟rem 是基于根元素的 font-size 值，也就是<html>元素。 如果 元素没有指定字体大小，则使用浏览器默认值16px

具体内容请链接查看 www.runoob.com/w3cnote/px-…

实现一个div上下左右居中的三种方法

• 定位实现

div{
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
}

• flex弹性盒子实现

div{
    width:400px;
    height:300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

• line-height实现

<div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
   <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
</div>
<style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
      .father {line-height: 500px; text-align: center; font-size: 0;}
      .son { display: inline-block;
      /* display: inline-flex;
      display: inline-grid;
      display: inline-table; */
    }
</style>
 

v-for和v-if的区别

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中所以，不推荐v-if和v-for同时使用

router传参的方式

方式一params

methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
 }
 this.$route.params.id

方式二query

methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
 }
 this.$route.query.id

v-if和v-show的区别

v-if 是惰性的，只是值为 false 就不会加载对应元素，为 true 才动态加 载对应元素
v-show:是无论为 true 和为 false 都会加载对应 html 代码，但为 false 时用 display:none 隐藏不在页面显示，但为 true 时页面上用 display:block 显示其效果

url输入到地址栏后发生了什么

1. DNS 解析
2. TCP 连接
3. 发送 HTTP 请求
4. 服务器处理请求并返回需要的数据
5. 浏览器解析渲染页面
6. 连接结束

输入了一个域名,域名要通过 DNS 解析找到这个域名对应的服务器地址(ip),通过 TCP 请求链接服务,通过 WEB 服务器(apache)返回数据,浏览器根据返回数据构建 DOM 树,再把 css 形成一个样式表.这两个东西结合,变成了 render 树.页面上通过重绘和回流的过程,渲 染出页面来

Number和parseInt的区别

Number与parseInt都是JS数值转换的函数。
Number()可以用于任何数据类型转换成数值；parseInt()用于将字符串转换成数值

Number() ，从翻译中看语义，number就是数字的之意。
它意味着无论给Number()传入任何参数，它可以把内容转换为数字

parseInt()，在英语上，`分析词句`之意，而 Int 则是我们定义变量时的整数类型。
显而易见，则是通过分析把词句转换为整型。
而在JS中，我们词句的数据类型，就是我们常见的`string`字符串
因此，parseInt()就是把字符串转换为整型之意

axios的封装有哪一些

创建request文件，针对axios做适合业务发展的封装，很多时候架构师做公共机制都是为了迎合自身项目需要，而并非一味求大做全，所以这个大家要适当调整，比如我们只用get/post请求。 import axios from 'axios' // 导入
axios Vue.prototype.$axios = axios // 将axios挂载到Vue实例上

axios 请求拦截

    // 添加请求拦截器
    axios.interceptors.request.use(
      function (config) {
        // 在发送请求之前做些什么
        return config
      },
      function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
      },
    )

• axios.get(url[, config]) //get请求用于列表和信息查询

• axios.delete(url[, config]) //删除

• axios.post(url[, data[, config]]) //post请求用于信息的添加

• axios.put(url[, data[, config]]) //更新操作

vueRouter的原理

vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式

1. hash ---- 利用URL中的hash（“#”）
2. 利用History interface在 HTML5中新增的方法, 详情点击

闭包和它解决的问题

是什么是闭包

闭包通常来讲是函数外部访问函数内部的变量,一般来讲函数外部是访问不到函数内部的变量。作用域分为：全局作用域、块级作用域、函数作用域。

如何判断闭包

函数嵌套函数内部函数return，内部函数调用外层函数的局部变量。

优点/缺点

• 可以隔离作用域，避免全局的污染。
• 由于闭包长期的驻留存储，会导致内存泄露

解决内存泄露

将暴露在外部的闭包变量置为null