2018秋季前端面试问题总结

记录一下最近面试遇到的问题

2018-08-18

• 上传图片压缩

使用canvas.drawImage()方法将图片进行压缩，再使用canvas.toDataURL()方法将canvas画布转为base64格式信息的图片，或把canvas转换成Blob文件，通常用在文件上传中，因为是二进制的，对后端更加友好。

• 高并发时前端的优化

见上一篇文章。

• 如何使用v-router管理权限

权限控制的主体思路，前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role
，动态根据用户的 role
算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。
不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许按钮级别的权限控制)，后端则会验证每一个涉及请求的操作，验证其是否有该操作的权限，每一个后台的请求不管是
get 还是 post 都会让前端在请求 header里面携带用户的 token，后端会根据该 token
来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的操作。 具体实现：
1. 创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
2. 当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。
3. 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
4. 使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。

具体看https://blog.csdn.net/s8460049/article/details/61190709/

2018-08-20

• 闭包是是么？

所谓闭包就是说，一个函数能够访问其函数外部作用域中的变量。闭包的三大特点为：

1. 函数嵌套函数

2. 内部函数可以访问外部函数的变量

3. 参数和变量不会被回收。 闭包的作用在于，可以通过闭包，设计私有变量及方法。

总结：
1. 闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
2. 不必纠结到底怎样才算闭包，其实你写的每一个函数都算作闭包，即使是全局函数，你访问函数外部的全局变量时，就是闭包 的体现。

• 原型链是什么？

简单理解就是原型组成的链，对象的proto它的是原型，而原型也是一个对象，也有proto属性，原型的proto又是原型的原型，就这样可以一直通过proto想上找，这就是原型链，当向上找找到Object的原型的时候，这条原型链就算到头了。

• 原型对象和实例之间有什么作用呢？

通过一个构造函数创建出来的多个实例，如果都要添加一个方法，给每个实例去添加并不是一个明智的选择。这时就该用上原型了。
在实例的原型上添加一个方法，这个原型的所有实例便都有了这个方法。

• computed和methods的不同之处？

computed计算的结果如果不发生改变就不会触发result这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。
computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

• webpack的原理

webpack的核心原理：
1. 一切皆模块 正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。
2. 按需加载 传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

• 跨域方法？

1. proxyTable：vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件。
2. CORS：CORS即跨源资源共享，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。这个方式解决的跨越问题支持开发和生产环境。但是有一定的安全性问题。需要后端配合。
3. Nginx：这个方法支持开发环境和生产环境。需要后端配合。

• 触发bfc条件：

bfc是 块级元素格式化上下文，它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

块级元素：父级（是一个块元素） 内容：子元素（是一个块元素） 其他元素：与内容同级别的兄弟元素
相互作用：BFC里的元素与外面的元素不会发生影响 触发条件：1） float的值不为none；
2）overflow的值不为visible；3）display的值为table-cell、tabble-caption和inline-block之一；4）position的值不为static或releative中的任何一个。
满足以上任意一个都能触发。

• 前端安全问题

只展开说两个，不全面，简单的说一下：
1. XSS(Cross Site Scripting)跨站脚本攻击。所谓的跨站脚本攻击指得是:攻击者往Web页面里注入恶意Script代码，用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取cookie信息、会话劫持等各种攻击。
解决方案:1）对用户对输入进行过滤，如判断是否符合格式。2）Web应用程序在设置cookie时，将其属性设为HttpOnly，这是预防XSS攻击窃取用户cookie最有效的防御手段。
2. 跨站请求伪造(CSRF攻击)。 CSRF攻击的原理:CSRF攻击过程：受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到B网站,然后B网站携带着的用户cookie信息去访问A网站.让A网站造成是用户自己访问的假相,从而来进行一些列的操作,常见的就是转账。
解决方案：1）输入验证码。2）HTTP
Referer是header的一部分，当浏览器向web服务器发送请求时，一般会带上Referer信息告诉服务器是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。

2018-08-21

• 移动端边框1px细线解决方案

1. viewport + rem 实现 在devicePixelRatio = 2 时，输出viewport：meta name=”viewport” content=”initial-scale=0.5, maximum-scale=0.5,
   minimum-scale=0.5, user-scalable=no”； 在devicePixelRatio = 3
   时，输出viewport：meta name=”viewport”
   content=”initial-scale=0.3333333333333333,
   maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333,
   user-scalable=no”；
2. 伪类 + transform 实现 原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

• vue和jq的区别？vue和jq比，优势在哪？

  区别：

  1. jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作
  2. Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
  3. 可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作
  4. 这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的值的变化而变化就叫做双向数据绑定。

  vue的优势：数据变化时，重新渲染模板替换 HTML 片段。这时候虽然不用手动操作 DOM，但整体替换 HTML 会有性能损耗。比如：只修改了列表中的一项，也会全部替换。当然可以手动去优化，但显然不可能针对每个 case 都去优化。
  如果引入虚拟 DOM 做 Diff，相当于做了一层普适的优化，只更新变化的部分，整体性能会优于直接替换。所以虚拟 DOM 的优势是：在无需关心 DOM 的基础上，依然提供可靠的性能。

• 页面渲染的流程：

1. 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉_开头的样式。
3. DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，render tree能识别样式，render tree中每个NODE都有自己的style，而且 render
   tree不包含隐藏的节点
   (比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render
   tree中。注意 visibility:hidden隐藏的元素还是会包含到 render
   tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间。根据CSS2的标准，render
   tree中的每个节点都称为Box (Box dimensions)，理解页面元素为一个具有填充、边距、边框和位置的盒子。
4. 一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了。

• v-if和v-show的区别：

1. 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
2. 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3. 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
   v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4. 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
5. 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

2018-08-22

• ES6中箭头函数与普通函数this的区别

普通函数中的this：
1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj；
2. 在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window；
3. 使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象；
4. 匿名函数,定时器中的函数,由于没有默认的宿主对象,所以默认this指向window

箭头函数中的this：
1. 默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window（即继承父级的this，就是父级的this指的哪里，就是哪里）;

• 遇到过哪些浏览器兼容问题？

1. 清除浮动时，兼容ie需要加zoom：1；
   待续

• pwa

pwa的特点： 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现 体验 - 快速响应，并且有平滑的动画响应用户的操作 粘性 -
像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面
- 具体看这里 -

• 有用过什么webpack插件吗？

1. Uglify 可以对代码进行压缩合并并去除注释。
2. autoprefixer 自动补全css3前缀，动检测兼容性给各个浏览器加个内核前缀的插件。

• 如何解决网站js，css更新后，浏览器还是显示缓存内容？

1. 更改文件后修改文件的名称；
2. 给js css文件加上版本号。

• ajax步骤

1. 创建xhr对象；
2. 使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器；
3. 使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应；
4. 当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

• 一个页面从URL到加载显示完成，都发生了什么?

1. 通过DNS将该地址解析成IP地址;
2. 发起网络连接，进行http协议会话：客户端发送报头(请求报头)，服务端回馈报头(响应报头)；
3. 返回一个页面；
4. 接收文件完毕，对加载到的资源进行语法解析，以及相应的内部数据结构（也就是进行渲染）。

2018-08-23

已拿到offer。这次面试的是两年经验薪资范围8k-14k的前端，发现面试官主要考察的还是js基础，少量es6内容，对webpack的使用经验也有一定的要求。