前端常用面试题

、

1.  什么是路由，如何实现路由

    不同的 url 或地址加载不同的页面

    路由实现有两种：hash 模式和 history 模式两种

    hash 模式： 1. url 路径会出现 # 字符 2. hash 值不包括在 HTTP 请求中，它是交由前端路由处理，所以改变 hash 值时不会刷新页面，也不会向服务器发送请求 3. hash 值的改变会触发 hashchange 事件

        history模式：

        1.  整个地址重新加载，可以保存历史记录，方便前进后退

        2.  使用 HTML5 API（旧浏览器不支持）和 HTTP服务端配置，没有后台配置的话，页面刷新时会出现404

2.  怎么用 web 前端技术开发移动端应用

    媒体查询响应式设计,flex 弹性盒子布局,流式布局,rem 自适应布局

3.  flutter 和其他移动端框架的区别

    本质上是一套跨平台的 UI 框架，实现了一套代码跨多端运行

4.  前端代码为什么要打包

    模块化开发中，我们会编写大量模块，如果不打包就进行上线，那么页面加载或交互时，将会发起大量的请求。为了性能优化，需要使用 webpack 这样的打包器对模块进行打包整合，以减少请求数

5.  什么是 nodejs，怎么实现一台电脑里有多个 nodejs 版本

    Node.js 只是一个让 JavaScript 运行在浏览器之外的平台

    nvm,nvm 则是提供切换 node 版本的工具。

6.  响应式布局应该注意的点

    头部添加 meta：

    头部添加 link，不同屏幕分辨率使用不同的 css 样式：

    各个模块尺寸尽量使用百分比。

    (1)设置 viewport 元标签

    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">

    (2)避免使用绝对单位(px)，用相对单位代替(%、auto、em 等)

    (3)使用流式定位：float

    (4)图片大小实现自适应：

    img { max-width: 100%; }

    会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真。

    (5)根据浏览器屏幕的特征，有选择性的执行某些 CSS 样式——CSS3 媒体查询技术(Media Query)

7.  对象解构赋值和数组解构赋值

    对象展开运算符

    let obj = {

    hello: 'hello',

    world: 'world',

    name: 'Tim',

    age: 18

    }

    let {hello, world, ...hi} = obj;

    console.log(hello) => hello

    console.log(world) => world

    console.log(hi) => {name: 'Tim', age: 18}

    数组使用扩展运算符解构

    function f () {

    return ['hello', 'world', 'my', 'name', 'is Lilei'];

    }

    let [hello, world, ...who] = f()

    console.log(hello) => hello

    console.log(world) => world

    console.log(who) => ['my', 'name', 'is Lilei']

8.  v-if 和 v-show 的异同点 1.相同点 ：v-if 和 v-show 都可以动态控制 DOM 元素的显示隐藏。 2.不同点：v-if 是动态地向 DOM 树中添加或删除 DOM 元素节点；v-show 是通过向 DOM 元素设置样式 display 属性值控制显示隐藏。

9.  vue 父子组件传值如何操作

    通过 props 和 v-bind

    子组件内, props 定义变量, 在子组件使用变量

    父组件内, 使用子组件, 属性方式给 props 变量传值

    子向父传值

    通过$emit  

父组件内, 给组件@自定义事件="父methods函数"

子组件内, 恰当时机this.$emit('自定义事件名', 值)

10. vue 中如何正确使用定时器

    在 data 中声明一个变量，定时器绑定到变量中，然后在 beforeDestory 中销毁这个定时器

    export default {

    data() {

    return {

    timer: null // 定时器名称  

     };

    },

    mounted() { // 定时器一般写 mounted() 生命周期内

    this.timer = (() => {

    // 某些操作

    console.log(1);

    }, 1000) // 1000 毫秒

    },

    // 最后在 beforeDestroy()生命周期内清除定时器：

    beforeDestroy() {

    clearInterval(this.timer);

    this.timer = null;

    }

    };

11. img 标签中 alt 和 title 属性的区别

    title：通常当鼠标滑动到元素上的时候显示

    alt：alt 是 img 标签的特有属性，是图片内容的等价描述，用于图片无法正常加载时显示

12. CSS 选择符、优先级算法以及内联和 important 哪个优先级高？

    css 继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性。

    所有元素可继承：

    visibility 和 cursor

    块级元素可继承

    text-indent 和 text-align

    内联元素可继承的：

    letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

    优先级为!important > [ id > class > tag ]

    !Important 比 内联优先级高

13. link 和@import 的区别是?

    区别 1：link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。

    区别 2：link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。

    区别 3：link 是 XHTML 标签，无兼容问题；@import 兼容 IE5 以上

    区别 4：link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持改变样

14. axios 怎么解决跨域的

    使用 axios 直接进行跨域访问不可行，我们就需要配置代理了

    proxyTable: {

    '/api': {

    target:'http://api.douban/v2', // 你请求的第三方接口

    changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

    pathRewrite:{ // 路径重写，

    '^/api': '' // 替换 target 中的请求地址，也就是说以后你在请求http://api.douban/v2/XXXXX这个地址的时候直接写成/api即可。

    }

    }

    },

15. vue 两大核心

    数据驱动和组件系统

16. v-on 可以监听多个方法吗？如何写？|| vue 如何一个元素绑定多个事件

    <button v-on="{ click: onClick, focus: onFocus, blur: onBlur }"></button>

17. vue 如何跨组件传值

    provide 和 inject

    父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。不论子组件有多深，只要调用了 inject,那么就可以注入 provide 中的数据。

18. vue 路由有几种实现方式？异同

    一种是哈希模式，还有一种是 history 模式

    hash 模式： 1. url 路径会出现 # 字符 2. hash 值不包括在 HTTP 请求中，它是交由前端路由处理，所以改变 hash 值时不会刷新页面，也不会向服务器发送请求 3. hash 值的改变会触发 hashchange 事件

    history 模式： 1. 整个地址重新加载，可以保存历史记录，方便前进后退 2. 使用 HTML5 API（旧浏览器不支持）和 HTTP 服务端配置，没有后台配置的话，页面刷新时会出现 404

19. tcp 三次握手是什么

    第一次握手：客户端发送一个数据包给服务端，当服务端接收到这个数据后，服务端可知客户端是想要建立连接；

    第二次握手：服务端要对客户端的联机请求进行确认，向客户端发送应答号 ACK=1、SYN=1 确认号 Ack=J+1，此值是客户端的序列号加 1，还会产生一个随机的序列号 Seq=K，这样就告诉客户端可以进行连接；

    第三次握手：客户端收到数据后检查 Ack 是否为 J+1，以及标志位 ACK 的值是否为 1，若为 1，则会发送 ACK=1、确认号码 Ack=K+1，告诉服务端,你的请求连接被确认，连接可以建立

20. DOCTYPE 作用？严格模式混杂模式的区别？有什么意义？

    如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。

    1.<!DOCTYPE>声名位于文档的最前面，在<HTML> 标签的前面，告知浏览器以何种模式来渲染文档。 2.严格模式的排版和 JS 运作模式都是以浏览器支持的最高的标准运行。按照 W3C 的标准来解析代码。 3.混杂模式是以宽松的，向后兼容的方式来解析代码。是指浏览器用自己的方式解析代码，模拟老式浏览器的行为以防止网站停止工作。 4.若 DOCTYPE 为声名或格式不正确，页面将会以怪异模式的方式解析。

    5.Doctype 标签可声明三种 DLD 类型，分别是严格型，过渡型，框架型。

21. 如何居中一个浮动元素

    用定位 position

22. box-sizing 常用属性有那些，分别有什么作用

    box-sizing ： content-box || border-box || inherit

    1、content-box:此值为其默认值，其让元素维持 W3C 的标准 Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

    2、border-box:此值让元素维持 IE 传统的 Box Model（IE6 以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面 Box Model 介绍可知，我们这里的 content width/height 包含了元素的 border,padding,内容的 width/height【此处的内容宽度/高度=width/height-border-padding】）。

23. css 选择器权重优先级

    import>内联>id>类>标签>通配符>继承>浏览器默认

    ！important（仅可直接选中）：使得优先级最大

24. 如何禁止页面缩放

    在 html 中，可以使用 user-scalabel 属性设置禁止页面缩放，只需要在 mate 元素中添加“user-scalabel=0”样式即可

25. js 获取 dom 的方法

    通过 ID 获取（getElementById）

    通过 name 属性（getElementsByName）

    通过标签名（getElementsByTagName）

    通过类名（getElementsByClassName）

    获取 html 的方法（document.documentElement）

    获取 body 的方法（document.body）

    通过 css 选择器获取一个元素（document.querySelector）

    通过选择器获取一组元素（document.querySelectorAll）

26. 获取和设置元素属性的方法

    元素.setAttribute('属性名',属性值) 设置元素的行间属性，如果原来有这个行间属性会覆盖原来的行间属性

    元素.getAttribute('属性名') 获取元素的行间属性对应的属性值，不能获取 css 样式对应的属性值 如果获取的属性不存在返回 null

    getComputedStyle 获取经过浏览器计算后的属性 获取的结果是带单位的字符串

27. js dom 元素方法

    如何在 dom 元素前面添加元素（内部添加）

    dom.insertBefore(newDom,dom.firstChild)

    如何在 dom 元素前面添加元素（外部添加）

    dom.parentNode.inserBefore(newDom,dom)

    如何在 dom 元素后面添加元素(外部添加)

    dom.parentNode.insertBefore(newDom,dom.nextSibling)

    js 有哪些动态添加 dom 元素的方法

    dom.appendChild(dom 元素)，元素尾部添加新元素（内部添加）

    parent.appendChild(newDom,existDom) 在 existDom 的前面添加新元素，parent 为 existDom 的父元素

    js 有哪些删除元素的方法

    dom.remove();自身调用 remove 删除

    parent.removeChild(child) 父元素删除子元素

28. js 如何判断一个变量时 null/undefined

    用==null 来判断是否为 undefined 或 null 值

    因为!null 为真，所以也可以简单的把判断语句改为！null 写法来同时判断 undefined 或 null 值

    例：

    if (firstName == null) {

    console.log('变量 firstName 为 undefined 或者 null.');

    }

    if (firstName == undefined) {

    console.log('变量 firstName 为 undefined 或者 null.');

    }

    if (!变量) {

    //!null 为 true

    console.log('变量为 undefined 或者 null');

    }

    如果要严格区分是 null 或者是 undefined，用===来判断，例子如下：

    if (typeof phone === "undefined") {

    console.log(phone);

    console.log('变量 phone 为 undefined.');

    }

    else if (phone === null) {

    console.log('变量 phone 为 null.');

    }

29. js 判断是否为对象

    Object.prototype.toString.call(obj) === '[object Object]'

    obj.constructor === Object

    obj instanceof Object

    typeof obj === Object

30. 字符串反转方式

    let newStr = str.split("").reverse().join("");

31. axios是什么

   axios 是一个轻量的 HTTP 客户端

   基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端

   axios 的请求是使用 Promise 来实现 XMLHttpRequset 的，promise 本身就是一个异步的处理的方案，所以 axios 是异步的

32. 为什么要封装axios

   axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。

   不过随着项目规模增大，如果每发起一次 HTTP 请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍

   这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用

33. axios如何封装

   封装的同时，你需要和 后端协商好一些约定，请求头，状态码，请求超时时间…

   设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分

   请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)

   状态码: 根据接口返回的不同 status ， 来执行不同的业务，这块需要和后端约定好

   请求方法：根据 get、post 等方法进行一个再次封装，使用起来更为方便

   请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问

   响应拦截器：这块就是根据 后端`返回来的状态码判定执行不同业务

37. 异步

    (1)具体 JS 是如何实现异步操作的呢？ 答案就是 JS 的事件循环机制(Event Loop)。

    当 JS 解析执行时，会被引擎分为两类任务，同步任务（synchronous） 和 异步任务（asynchronous）。

    对于同步任务来说，会被推到执行栈按顺序去执行这些任务。

    对于异步任务来说，当其可以被执行时，会被放到一个 任务队列（task queue） 里等待 JS 引擎去执行。

    当执行栈中的所有同步任务完成后，JS 引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，就叫做事件循环(Event Loop)。

    (2)对于任务队列，其实是有更细的分类。其被分为 微任务（microtask）队列 & 宏任务（macrotask）队列

    宏任务: setTimeout、setInterval 等，会被放在宏任务（macrotask）队列。

    微任务: Promise 的 then、Mutation Observer 等，会被放在微任务（microtask）队列。

    (3)Event Loop 的执行顺序是：

    首先执行执行栈里的任务。

    执行栈清空后，检查微任务（microtask）队列，将可执行的微任务全部执行。

    取宏任务（macrotask）队列中的第一项执行。

    回到第二步。

    注意： 微任务队列每次全执行，宏任务队列每次只取一项执行。

38. 在浏览器输入 URL 回车之后发生了什么？

    URL 解析

    DNS 查询

    TCP 连接

    处理请求

    接受响应

    渲染页面

39. 浏览器渲染过程

    将获取的 html 解析成 dom 树

    处理 css，构成层叠样式表模型 CSSOM

    将 dom 树和 CSSOM 合并为渲染树

    根据 CSSOM 将渲染树的节点布局计算

    将渲染树节点样式绘制到页面上

40. 浅拷贝与深拷贝 1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用 2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

    深拷贝：

    1 .先转换成字符串，在转换成(数组/对象) JSON.parse(JSON.stringify(XXXX))

    //注意：

    如果 obj 里面有时间对象，则 JSON.stringify 后再 JSON.parse 的结果，时间将只是字符串的形式。而不是时间对象；

    如果 obj 里有 RegExp、Error 对象，则序列化的结果将只得到空对象；

    如果 obj 里有函数，undefined，则序列化的结果会把函数或 undefined 丢失；

    如果 obj 里有 NaN、Infinity 和-Infinity，则序列化的结果会变成 null

    如果对象中存在循环引用的情况也无法正确实现深拷贝；

    2 .手动写递归

    递归就是一个函数在它的函数体内调用它自身，递归要有两个要素，结束条件与递推关系

41. 空元素有那些？

    在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。所有自封闭的 html 标签

    在 HTML 中有以下这些空元素：

        <br>

        <hr>

        <img>

        <input>

        <link>

        <meta>

42. 统计字符串中每个字母出现的次数

    //创建一个空对象，目的：把字母作为键，次数作为值

    var obj={};//创建一个空对象

    for(var i=0; i < str.length;i++){//遍历字符串,获得每个字母

    var key=str[i];//每个字母

    if(obj[key]){

    obj[key]++;//判断 obj 中有没有这个键

    }else{

    //对象中没有这个字母，那就把字母加到对象中，并且给这个字母一个出现的次数，默认一次

    obj[key]=1;//此时会把每个字母变成属性，并赋予属性值 1

    }

    }  

    //遍历对象，显示每个字母的次数

    for(var key in obj){

    console.log(key+"出现了"+obj[key]+"次");

    }

43. 什么是 IIFE

    立即执行函数表达式：IIFE（Immediately-invoked function expression）

    总结 IFEE 的优点： 1.创建块级（私有）作用域，避免了向全局作用域中添加变量和函数，因此也避免了多人开发中全局变量和函数的命名冲突；

    2.IIFE 中定义的任何变量和函数，都会在执行结束时被销毁。这种做法可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链了；

44. join 和 split 的去比

    Split()方法是把字符串切割成数组的形式，

    Join()方法是将数组转换成字符串。

45. call（）与 apply（）的作用与区别

    call（）：第一个参数是 this 值没有变化，变化的是其余参数都直接传递给函数。在使用 call（）方法时，传递给函数的参数必须逐个列举出来。

    apply（）：传递给函数的是参数数组

46. 如何阻止事件冒泡和默认事件

    1.event.stopPropagation()方法

    这是阻止事件的冒泡方法，不让事件向 documen 上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

    2.event.preventDefault()方法

    这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

    3.return false ；

    这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为 return false 就等于同时调用了 event.stopPropagation()和 event.preventDefault()

47. JavaScript 三大对象：本地对象、内置对象、宿主对象

    a.本地对象

    与宿主无关，无论在浏览器还是服务器中都有的对象，就是 ECMAScript 标准中定义的类(构造函数)

    在使用过程s需要我们手动 new 创建

    例如：Boolesn、Number、String、Array、Function、Object、Date、RegExp 等

    b.内置对象

    与宿主无关s无论在浏览器还是服务器中都有的对象

    ECMAScript s已经帮我们创建好的对象

    在使用过程中无需我们动手 new 创建

    例如：Global、Math、JSON

    c.宿主对象

    什么是宿主？

    宿主就是指 JavaScript 运行环境，js 可以在浏览器中运行，也可以在服务器上运行(nodejs)

    对于嵌入到网页中的 js 来说，其宿主对象就是浏览器，所以宿主对象就是浏览器提供的对象

    包含：Window 和 Docuument 等

    所有的 DOM 和 BOM 对象都属于宿主对象

48. html5 的新标签

    article、footer、header、nav、section、video、audio

49. css 几种元素垂直居中的方式

    弹性盒子

    .box{

    display: flex;

    justify-content:center;

    align-items:Center;

    }

    绝对定位和负边距

    .box{position:relative;}

    .box span{

    position: absolute;

    width:100px;

    height: 50px;

    top:50%;

    left:50%;

    margin-left:-50px;

    margin-top:-25px;

    text-align: center;

    }

    translate

    .box {position:relative;}

    .box span{

    position: absolute;

    top:50%;

    left:50%;

    width:100%;

    transform:translate(-50%,-50%);

    text-align: center;

    }

50. css 伪类和伪元素

    常见的状态伪类

    :link 应用于未被访问过的链接；  

    :hover 应用于鼠标悬停到的元素；

    :active 应用于被激活的元素；

    :visited 应用于被访问过的链接，与:link 互斥。

    :focus 应用于拥有键盘输入焦点的元素。

    常见的结构性伪类

    :first-child 选择某个元素的第一个子元素；  

    :last-child 选择某个元素的最后一个子元素；

    :nth-child() 选择某个元素的一个或多个特定的子元素；

    常见的伪元素选择器：

    ::before 在元素内容的最前面添加新内容。

    ::after 在元素内容的最后面添加新内容。

51. 清除浮动 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear：both；）（不推荐） 2.父级添加 overflow 属性（父元素添加 overflow:hidden）（不推荐） 3.使用 after 伪元素清除浮动（推荐使用）

52. 数组扁平化/数组拉平

    方法一：

    用 ECMAscript 2019 中的 flat 方法

    方法二：

    利用 arr.toString(），将数组转换为字符串

    再利用 str.split（‘ ，’），将字符串转换为新的数组

    方法三：使用 ES6 新增的扩展运算符

    /_console.log([].concat(...[1, 2, [3, 4]])); => [1, 2, 3, 4]

    console.log([].concat(...[1, [2, [3, 4]]])); =>[1, 2, [3, 4]]_/

    function flatArray3(arr){

    while(arr.some( item => Array.isArray(item) )){

    arr = [].concat(...arr);

    }

    return arr;

    }

    方法四：reduce+递归

    function flatArray4(arr){

    return arr.reduce((result, item) => {

    return result.concat(Array.isArray(item) ? flatArray4(item) : item);

    }, []);

    }

53. vue 自定义指令

    自定义指令：使用 Vue.directive(id,definition)注册全局自定义指令，使用组件的 directives 选项注册局部自定义指令。

    指令定义函数提供了几个钩子函数（可选）：

    bind:第一次指令绑定时候执行，用于初始化数据

    inserted：相当于 mounted，用于处理 dom

    update：当组件更新的时候，操作

    componentUpdate：当自己和所有子元素都更新完毕后执行

    unbind：接触指令与元素的绑定

    钩子函数的参数：(el, binding, vnode, oldVnode)

    el:指令绑定的元素

    binding：元素的属性，其中 value 是指令赋予的值

    vnode：当前最新的虚拟 dom

    oldnode：旧的虚拟 dom

54. webpack 的 bundle，chunk，module 的意思

    module 是 webpack 支持解析的模块；

    chunk 包含多个 module，存在于 webpack 处理过程中的阶段；

    bundle 包含一个或多个 chunk，是源码经过 webpack 处理后的最终版本；

55. map,filter,forin 的区别

    map 则可以改变当前循环的值，返回一个新的被改变过值之后的数组（map 需 return）

    filter 函数可以看成是一个过滤函数，返回符合条件的元素的数组

    for…in 循环数组索引、对象的属性，但使用 for…in 原型链上的所有属性都将被访问，用 hasOwnProperty() 方法解决。map 方法有返回值，可以 return 出来

56. axios 实现原理

    axios 原理还是属于 XMLHttpRequest， 因此需要实现一个 ajax。

    还需要但会一个 promise 对象来对结果进行处理。

57. js 中实例方法和原型方法的区别

    实例方法就是只有实例可以调用，静态方法只有构造函数可以调用，原型方法是实例和构造函数都可以调用，是共享的方法

58. 节流和防抖的区别

    防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。

59. html5 如何嵌入音频，h5 的媒体标签

    <audio src="xxx.mp3" id="myAudio">Audio player not available.</audio>

    音频： <audio>

    视频： <video>

60. 浏览器内核

    1、IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；

    2、Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink 内核；

    3、Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；

    4、苹果 Safari 浏览器内核：Webkit 内核，特点是不受 IE、Firefox 等内核的约束，比较安全；

    5、Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核；

61. H5 新增 API

    地理定位：navigator. geolocation

    拖拽和释放 拖拽：Drag 释放：Drop

    Web 存储 sessionStorage 约 5M、localStorage 约 20M

62. position 的值有那些

    默认值： static

    绝对定位：absolute 相对于最近一个有定位的父元素偏移，若其父元素没有定位则逐层上找，直到 document——页面文档对象

    相对定位：relative 相对于自身原本位置进行偏移

    固定定位：fixed 相对于浏览器窗口进行定位

    粘性定位：sticky 该定位基于用户滚动的位置

63. 实现浏览器内多个标签页面之间通信

    一、cookie + setInterval 方式

    二、localStorage 方式

    三、webSocket 方式

64. html5 应用程序缓存和浏览器缓存区别

    HTML5 的应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存在本地。该特性加速了网站的性能，可通过如下方式实现：

    <!doctype html>

    <html manifest="example.appcache">

    .....

    </html>

    与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

    离线浏览--用户可在离线时使用它们。

    速度--已经缓存的资源加载得更快。

    减少服务器负载--浏览器将只从服务器下载更改过的资源。

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

    原理：HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

    如何使用：

    页面头部像下面一样加入一个 manifest 的属性；

    在 cache.manifest 文件的编写离线存储的资源

    在离线状态时，操作 window.applicationCache 进行需求实现

    CACHE MANIFEST

    #v0.11

    CACHE:

    js/app.js

    css/style.css

    NETWORK:

    resourse/logo.png

    FALLBACK:

    /offline.html

66. HTML5canvans 是什么

    ​ <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

    <canvas>看起来和<img>标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。

67. HTML 5 中不同的新表单元素类型是什么？

    Date 如果你想显示日历对话框。

    Datetime-local 如果你想用本地时间显示日历。

    Email 如果你想用电子邮件验证创建一个 HTML 文本，那么我们可以设置类型为“email”。

    Url 对于 URL 验证设置类型为“url”，如下面的 HTML 代码所示。

    Range 如果你想显示范围调整控件，那么你可以使用 range 作为类型。

    Telephone 想要文本框接受电话号码。

    Number 如果你想用文本框显示号码范围，您可以将设置类型为 number。

    Search 让文本框作为搜索引擎框。

68. HTML5 的输出元素

    html5 的<output>标签可以定义不同类型的输出。

    <output>标签的属性：

    for 定义输出字段相关的一个或多个元素。

    form 定义输入字段所属的一个或多个表单。

    name 定义对象的唯一名称（表单提交时使用）。

69. jQuery 对象与 DOM 对象的相互转化

    jQuery 对象转化为 DOM 对象

    方法一：利用数组下标的方式读取 jQuery 中的 DOM 对象

    javascript 代码:

    1 var $div =$('div'); //jQuery 对象

    2 var div = $div[0];  //转化为DOM对象

  3 div.style.color = 'red'  //操作DOM对象的属性

  方法二：通过jQuery自带的get()方法

  jQuery对象自身提供一个.get()方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供了一个元素的索引

  1 var $div = $('div')  //jQuery对象

  2 var div = $div.get(0); //通过 get 方法，转化为 DOM 对象

    3 div.style.color = 'red'; //操作 DOM 对象的属性

    DOM 对象转化为 jQuery 对象

    相比较 jQuery 对象转化为 DOM 对象，开发中更多的是把一个 DOM 对象加工成一个 jQuery 对象。$(参数)是一个对功能大方法，通过传递不同的参数而产生不同的作用，如果传递的参数是一个 DOM 对象，jQuery 就可以把 DOM 对象包装转化为一个 jQuery 对象。

    javascript 代码：

    1 var div = document.getElementsByTagName('div'); //DOM 对象

    2 var $div = $(div); //jQuery 对象

    3 var $first = $div.first(); //找到第一个 div 元素

    4 $first.css('color','red');

70. 关于 jquery 的 load()方法

    jquery load 方法是对 jQuery.ajax()进行封装以方便我们使用的一个方法，当我们需要处理较为复杂的逻辑时候，还是需要用到 jQuery.ajax()这个比较全面的方法的。

    load()主要用来加载 header、footer、siderbar、tip(提示框/输入框)等多个公共组件，以及简单的调用动态接口。

    完整语法格式：load( url, [data], [callback] )

    参数:

    url 是指要导入文件的地址。

    data： 可选参数；因为 load 不仅仅可以导入静态的 html 文件，还可以导入动态脚本，例如 PHP 文件，所以要导入的是动态文件时，

    我们可以把要传递的参数放在这里。

    callback：可选参数；是指调用 load 方法并得到服务器响应后，再执行的另外一个函数；回调参数：response, status, xhr

71. document.ready 和 window.onload 的区别

    页面加载完成有两种事件，一是 ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是 onload，指示页面包含图片等文件在内的所有元素都加载完成。

72. jq 给所有元素加虚线

    \$("\*").css("border:2px dotted/dashed #000;")

73. 瀑布流实现的原理

    瀑布流布局要求要进行布置的元素等宽，然后计算元素的宽度与浏览器宽度之比，得到需要布置的列数。

    创建一个数组，长度为列数，里面的值为已布置元素的总高度（最开始为 0）

    然后将未布置的元素依次布置到高度最小的那一列，就得到了瀑布流布局。

74. lazyload 的实现原理

    图片可视 iscando 为 false，获取当页面滚动高度，再判断图片是否在用户可视范围之内，如果在的话，将图片的 iscando 设为 true，声明一个 src 地址合集，当可视范围为 true 时，将 src 赋值给图片的 src 属性

    加载条件

    img.offsetTop < window.innerHeight + document.body.scrollTop;

    var imgs = document.querySelectorAll('img');

    window.onscroll = function(){

    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

    var winTop = window.innerHeight;

    for(var i=0;i < imgs.length;i++){

    if(imgs[i].offsetTop < scrollTop + winTop ){

    imgs[i].src = imgs[i].getAttribute('data-src');

    }

    }

    }

    实现性能提高需要将节流和懒加载一起使用

75. Array 与 ArrayBuffer 的区别

    ArrayBuffer 只能定义长度，无法直接读取它的内容

    每个 ArrayBuffer 对象表示的只是内存中指定的字节数;

    但不会指定这些字节用于保存什么类型的数据；

    通过 ArrayBuffer 能做的，就是为了将来使用而分配一定数量的字节.

76. MVVM 模式

    MVC 允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对 View 的操作交给了 Controller 处理，在 Controller 中响应 View 的事件调用 Model 的接口对数据进行操作，一旦 Model 发生变化便通知相关视图进行更新。

    MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变

77. Vue 响应式原理 1.通过 Object.defineProperty 来实现监听数据的改变和读取（属性中的 getter 和 setter 方法） 实现数据劫持 2.观察者模式（发布者-订阅者）

    观察者(订阅者) – Watcher：

    update()：当事件发生时，具体要做的事情

    目标(发布者) – Dep:

    ①subs 数组：存储所有的观察者

    ②addSub()：添加观察者

    ③notify()：当事件发生，调用所有观察者的 update() 方法 3.当数据发生改变通过发布者订阅者模式来进行通知 进行界面刷新

78. Vue 组件内部实现一个双向数据绑定

    父组件通过 props 传值给子组件，子组件通过 \$emit 来通知父组件修改相应的 props 值

79. Vue 如何监控一个属性值的变化

    watch 或者 computed

80. Vue 中给 data 中的对象属性添加一个新的属性时会发生什么，如何解决？

    在 Vue 实例创建时， 新属性并未声明，因此就没有被 Vue 转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用 Vue 的全局 api—— $set()：

    $set() 方法相当于手动的去把 新属性 处理成一个响应式的属性

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

    delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。

    Vue.delete 直接删除了数组改变了数组的键值。

82. SPA（单页应用）首屏加载速度慢怎么解决？

    减小入口文件体积

    UI 框架按需加载

    图片资源的压缩

    组件重复打包

    静态资源本地缓存

    使用 SSR

83. jQuery 获取的 dom 对象和原生的 dom 对象有何区别？

    js 原生获取的 dom 是一个对象，jQuery 对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。

84. Jq 如何扩展自定义方法

    \$.extend({

    　　 a:function (){

    　　　　 alert('I' m lc');

    　　}

    })

85. js 在浏览器兼容有那些问题 \*

    HTML 对象获取问题

    FireFox：document.getElementById(“idName”);

    ie:document.idname 或者 document.getElementById(“idName”).

    自定义属性问题

    IE 下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox 下，只能使用 getAttribute() 获取自定义属性。

    解决方法：统一通过 getAttribute() 获取自定义属性。

86. document.write()和 innerHTML 的区别

    document.write 是重写整个 document, 写入内容是字符串的 html

    innerHTML 是 HTMLElement 的属性，是一个元素的内部 html 内容

87. JavaScript 中的作用域、作用域链 \*

    作用域的本质是一个保存变量的对象，作用域避免了不同范围内的数据的相互干扰。

    变量的作用域无非就是两种：全局变量和局部变量。

    全局作用域：

    最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：

    局部作用域：

    和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，最常见的例如函数内部

    作用域链是由多级作用域串联形成的链式结构

    根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问。

88. 为什么异步加载 js ，加载方式 \*

    异步加载是立即下载 js 脚本的同时又不妨碍页面中的其他操作。

    defer：规定是否对脚本执行进行延迟，但却是并行下载，要等到 DOM 文档全部加载解析好了，才会被执行。只有 IE 能用，也可以将代码写到内部

    <script type="text/javascript" src="demo.js" defer="defer"></script>

    async：异步加载，加载好了就执行，不管页面是否解析好。async 只能加载外部脚本，不能把 js 写在 script 标签里(IE9 以上都能执行，比较普遍)

    动态创建 script 标签插入到 dom 元素中

89. js 面向对象的继承方法

    原型继承，混合继承

90. display:none 与 visibility：hidden

    display：none：会让元素从渲染树中消失，渲染的时候不占据任何空间；

    visibility：hidden：不会让元素从渲染树中消失，渲染的时候任然占据空间，只是内容不可见。

    display: none：是非继承属性，子孙节点消失是由于元素从渲染树中消失造成的，通过修改子孙节点的属性无法显示；

    visibility: hidden：是继承属性，子孙节点消失是由于继承了 hidden，通过设置 visibility：visible，可以让子孙节点显示。

    display：none 隐藏产生的 reflow 和 repaint（回流与重绘），而 visibility：hidden 没有这个影响前端性能的问题。

91. 重绘和重排

    重绘是一个元素外观的改变导致的浏览器行为（例如改变 visibility，outline，background 等属性），浏览器会根据元素新的属性呈现新的外观；

    重排是 DOM 元素被 js 触发某种变化，渲染树需要重新计算。浏览器对 DOM 树进行重新排列；这便是重排。排列完成之后重新绘制元素则是重绘。

92. 怎么让 Chrome 支持小于 12px 的文字？

    针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放！

93. js 去除空格

    str.replace(/\s+/g,"");

94. 移动端适配怎么做的

    1、设置理想窗口 meta viewport

    2、媒体查询，使用@media 查询，可以针对不同的媒体类型定义不同的样式。

    3、动态 rem 方案(手机专用自适应方案)

95. CSS Sprites 是什么，谈谈这个技术的优缺点 \*

    精灵图

    CSS Sprites 是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

    减少网页的 http 请求，提高性能，这也是 CSS Sprites 最大的优点，也是其被广泛传播和应用的主要原因；

    减少图片的字节：多张图片合并成 1 张图片的字节小于多张图片的字节总和；

    减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

    更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

    图片合成比较麻烦；

    背景设置时，需要得到每一个背景单元的精确位置，；

    维护合成图片时，最好只是往下加图片，而不要更改已有图片。

96. == 和 === 的去比

    " == " 只要求值相等; " === " 要求值和类型都相等

97. 使用 es5 语法，如何将一个类似数组的对象转换为数组？（比如 document.getElementsByTagName(...)的返回值）

    Array.prototype.slice.call(document.getElementsByTagName(...))

98. 后台请求异步的解决方案（callback 除外）

    promise，async

99. 如何做 vue 权限控制

    检查本地 token

    有 token 无 token

    获取 Authorization,获取数据权限 跳转登录页

    登录返回 token，存储 token

    获取 Authorization,获取数据权限

100.  wbepack 组成部分 \*

      mode：模式有两种 development 开发环境

      production 生产环境

      entry： 入口文件

      output： 出口

      module： 模块 --> loader

      plugins: 插件

      devServer: 开启本地服务,代码热更新

101.  js 如何判读一个对象是否为空对象

      for in 变量这个对象，如果有值的话，就不是空，否则就是空

      var obj = {};

      var b = function() {

      for(var key in obj) {

      return false;

      }

      return true;

      }

      将对象转化为 json 字符串，再判断该字符串是否为"{}"

      var data = {};

      var b = (JSON.stringify(data) == "{}");

      alert(b);//true

102.  dom 元素上的 property 和 attribute 的区别

      对属性 Property 可以赋任何类型的值，而对特性 Attribute 只能赋值字符串！

      对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的

      但是对于自定义的属性来说，他们是不同步的.(自定义属性不会自动添加到 property)

      property 比 attribute'霸道',估计是'表哥'

      property 和 attribute 两者是属于单方面通信,即:

      1.property 能够从 attribute 中得到同步；

      2.attribute 不会同步 property 上的值；

103.  js 控制循环的方法

      break

      终止循环

      跳出本层循环，继续执行循环后面的语句。

      如果循环有多层，则 break 只能跳出一层

      continue

      跳过本次循环剩余的代码，继续执行下一次循环。

104.  斐波那契

      function Fibonacci(n){

      if(n == 1 || n == 2){

      return 1;

      }

      else{

      return Fibonacci(n - 1) + Fibonacci(n - 2);

      }

      }

105.  事件冒泡

      事件冒泡：当某个元素的某类型事件被触发时（如 onclick），它父级的同类型事件也会被触发，它的父级的父级同类型事件也会被触发，以此类推，一直触发到根元素。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。

106.  JavaScript 的同源策略

      同源：协议、域名、端口全部相同才是同源，考虑到安全性，不同源之间不能够进行数据通信

107.  margin 重叠问题解决

      对于父子元素 margin 重叠，内层元素设为 BFC

      对于兄弟元素 margin 重叠，都设为 bfc

108.  如何创建 BFC

      float 属性的值不为 none

      position 属性的值为 absolute 或者 fixed

      display 为 inline-block，flow-root，table-cell，table-caption，以及 table 相关的属性，例如 table-caption，table-row 等

      overflow 属性值不为 visible

      display 属性值为 flex ，grid ，inline-flex ，inline-grid

109.  for of 可以直接遍历对象吗？

      不能

      for of 循环首先会向被访问对象请求一个迭代器对象，然后通过调用迭代器对象的 next() 方法来遍历所有返回值

      for of 能遍历的有 set map array string 因为这些类型有迭代器对象

      for of 需要搭配 object.keys（）遍历对象