请问在浏览器中输入 url，浏览器会做那些工作？

1.dns解析url2.浏览器发送请求与服务器交互3.浏览器对接受到的html页面进行渲染

请问你了解浏览器缓存吗？

1.http缓存主要分为强缓存和协商缓存  cookie 4kb  localStorage 5M  session 5M2.本地存储区别：    cookie        a、如果不设置cookie 则表示会话cookie，即浏览关闭之后就消失了；若设置了过期时间，超过过期时间才会消失。        b、cookie支持跨域名访问 可以限制路径        c、cookie始终在同源的http请求中携带    session 不能区分路径 会话存储    localStorage 一直存在共同点：    都是保存在浏览器端的，且同源的

请问 get 请求和 post 请求有什么区别？

1.参数传递：get参数通过url传递，post放在body中2.长度限制：get请求参数在url中传递是有长度限制的3.参数类型：get只接受字符串，post没有限制4.回退影响：get回退是无害的，post会再次请求5.安全性：post比get安全，get参数放在地址栏上，不能用来传递敏感信息6.请求过程：get产生一个tcp数据包，post产生两个tcp数据包

请求什么是同源策略

协议、域名、端口号

请问什么是跨域？常见的跨域方式？

1.通过jsonp跨域 原理：通过script标签进行跨域，只能实现get请求2.nginx反向代理跨域 原理：同源策略是浏览器的安全策略，不是http协议的一部分，服务端调用http接口只是使用http协议，不会执行脚本，不需要同源策略3.跨域资源共享，服务端设置Access-Control-Allow-Origin4.webSocket协议跨域5.doucment.domain+iframe跨域 两个页面都通过js强制设置document.domain为主域，就实现了同域6.window.name+iframe跨域，name值在不同页面甚至不同域名加载后还会存在，可以支持非常长的值（2M）7.postMessage跨域    a.页面与其打开新窗口的数据传递    b.多窗口之间消息传递    c.页面与嵌套iframe之间消息传递    用法：postMessage(data,oragin)

请问你了解浏览器的渲染机制吗？

1.DOM:浏览器将html解析成树形的数据结构2.cssDOM：浏览器将css解析成树形的数据结构3.DOM和cssDOM合并生成的rendTree树4.layout 计算出渲染树的每个节点的位置和样式5.通过显卡将layout的节点内容分别呈现在屏幕上6.浏览器在获得html文件之后是自上而下的加载，在加载过程中进行解析和渲染    加载过程中：        遇到css或者图标、图片会发起另外一个异步请求        遇到js会停止渲染，等待js加载完毕

请问如何解决浏览器加载 js 时候的阻塞问题？

1.推迟加载，把js写在最后2.延迟加载,defer3.异步加载

请问你了解什么是重绘，什么是回流？两者有什么区别？

重绘：背景颜色变化，不影响页面布局的样式修改回流：删除dom节点或者修改一个元素的宽高，页面布局发生变化，dom树结构发生变化，回流必定引发重绘，但重绘也会单独触发

http 请求状态码

1xx:请求状态2xx:成功3xx:重定向4xx:客户端请求错误5xx:服务器错误

ajax、axios、fetch 有何区别？

axios:一个基于promise用于浏览器端和服务器端的http客户端,本质上也是对原生xml的封装，只不过它是promise的实现版本fetch：号称ajax替代品

underfind 与 null 有何异同点？

同：都是基本数据类型异：undefind:"缺少值" null："缺少对象"

请问如何判断 js 变量的数据类型？

1.typeof2.xx instanceof of xx (只能判断两个对象是否属于实例关系)3.Object.prototype.toString.call()4.xx.constructor === xx

双等与三等的区别？

1.== 先转换再比较2.=== 先判断类型再比较 类型不同直接不比较，不转换类型

请问你了解 js 作用域吗？

在用行代码中的某些特定部分中函数、变量、对象的可访问性。1.es6之前，js没有块级作用域

作用域链

当我们需要某个变量的值时，先去他最近的作用域找，如果找不到就找他的上级作用域，以此类推，直到找到全局

什么是变量提升，什么是函数提升？

所有声明（变量和函数）都会被移动到各自作用域的最前端，这个过程被称为变量（函数）提升

请问你了解 js 中的闭包吗？

定义：闭包是指有权访问另一个函数作用域的函数优点：a.可以读取函数内部的变量 b.延长局部变量寿命，不被垃圾回收机制销毁 c.封装变量(模仿块级作用域)缺点：a.消耗内存 b.内存泄漏

请问 js 垃圾回收机制是什么工作原理？

js有垃圾回收机制，垃圾收集器会周期性的找出不在使用的变量，然后释放其内存

请问你了解 js 原型链吗？

当访问一个对象属性和方法时，先会在对象自身中寻找，如果有则直接使用，没有则会去原型对象中寻找，直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined

函数防抖、函数节流？

防抖 debounce：触发高频事件n秒内，函数只会执行一次，如果n秒内高频事件再次触发，则重新计算时间节流 throttle：高频事件触发，n秒内只会执行一次。

sql 注入？

sql注入就是通过把sql命令插入到web表单提交或输入域名的查询字符串，已达到欺骗服务器的效果，执行恶意sql解决办法：    a.把应用服务器的权限将至最低，减少 SQL 注入攻击带来的危害    b.避免网站打印sql错误信息    c.对进入数据库的特殊字符进行转义处理    d.所有查询语句使用数据库提供的参数化查询接口

xss 攻击、csrf 攻击

xss：在网站插入恶意的脚步

require.js

背景：    1.实现js文件的异步加载，避免网页失去响应    2.管理模块之间的依耐性，便于代码编写和维护用法：    1.<script src="require.js"></script>    2.<script src="require.js" data-main="main.js"></script>    require(['Jquery','loadhs','backbone'],function($,_,backbone){        // code here    })    require.config({        path:{            "jquery":"jquery.min"        }    })AMD模块写法：    模块必须采用特定的define()函数来定义    define(function(){        var add = function(x,y){            return x+y        }        return {            add        }    })

js 原生继承的几种方式

1.原型链继承    定义：将父类的实例作为子类的原型    优点：        a: 纯粹的继承关系        b:父类新增原型方法和属性，子类都能访问到    functin Animael(name){        this.name = name    }    Animael.prototype.eat = function(){        console.log(`${this.name}正在吃`)    }    function Dog(){}    Dog.prototype = new Animael('狗狗')    vat dog = new Dog()    console.log('dog=',dog)2.构造函数继承    定义：使用父类的构造函数来增强子类实例，相当于复制父类的实例属性给子类    function Animael(name){        this.name = name        this.age = 12    }    Animael.prototype.eat = function(){        console.log(`${this.name}正在吃`)    }    function Dog(name){        Animael.call(this)        this.name = name || 'tom'    }    var dog = new Dog('恐龙')    console.log(dog)    特点：        解决了子类实例共享父类引用属性的问题，可以实现多继承 3.实例继承    定义：为父类实例添加新特性，作为子类实例返回     function Animael(name){        this.name = name        this.age = 12    }    Animael.prototype.eat = function(){        console.log(`${this.name}正在吃`)    }    function Dog(name){        var animael = new Animael(name)        animael.color = 'white'        return animale    }    var dog = new Dog('大象')    console.log('dog=',dog)    特点：        不限制调用方式4.组合继承 （原型继承+构造函数继承）    定义：通过调用父类构造，继承父类的属性，然后通过将父类实例作为子类原型，实现函数复用    function Animael(name){        this.name = name        this.age = 12    }    Animael.prototype.eat = function(){        console.log(`${this.name}正在吃`)    }    function Dog(name){        Animael.call(this)        this.name = name    }    Dog.prototype = new Animale()    var dog = new Dog('兔子');    console.log('dog=',dog)5.寄生组合继承    定义：通过寄生方式，砍掉父类的实例属性，这样在两次调用父类的时候，就不会初始化两次实例方法/属性    function People(name){        this.name = name || 'people'        this.age = 17    }    People.prototype.speak = function(){        console.log('说话')    }    function Tom(name){        People.call(this)        this.name = name    }    (        function(){            // 创建一个没有实例方法的类            var Super = function(){            }            Super.prototype = People.prototype            Tom.prototype = new Super()        }    )()    // 修复构造函数指向    Tom.prototype.constructor = Tom    var tom = new Tom('tom')    console.log('tom=',tom)

canvas 使用Vue 组件通信

a.父子通信    1.props $emit    2.ref    3.$children $parent    4.$attrs $listents    5.provide injectb.兄弟通信    1.eventBus 事件总线    2.vuexc.跨级通信    1.provide inject    2.$attrs $listents

new 操作符接下来 js 会做什么？

1.在内存中创建一个空对象2.让this指向这个空对象3.执行构造函数里面的代码，给这个新对象添加属性和方法4.返回这个新对象

原型链继承

function extend(child, parent) {  var F = function () {}  F.prototype = parent.prototype  child.prototype = new F()  child.prototype.constructor = child}

Vue 父子组件的钩子过程

a:渲染过程    1.父beforeCreate    2.父created    3.父beforeMount    4.子beforeCreate    5.子created    6.子beforeMount    7.子mounted    8.父mountedb.子组件更新过程    1.父beforeUpdate    2.子beforeUpdate    3.子updated    4.父updatedc.子组件更新过程    1.beforeUpdate    2.父updatedd.销毁过程是    1.父beforeDestroyed    2.子beforeDestroyed    3.子destroyed    4.父destroyed总结：    1.在created钩子中可以对data数据进行操作，这个时候可以进行ajax请求将返回的数据赋给data    2.虽然updated函数会在数据变化时被触发，但却不能准确的判断是那个属性值被改变，所以在实际情况中用computed或match函数来监听属性的变化，并做一些其他的操作    3.在mounted钩子对挂载的dom进行操作，此时，DOM已经被渲染到页面上    4.在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子触发    5.所有的生命周期钩子自动绑定 this 上下文到实例中，所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是导致this指向父级