前端知识总结

1. 自我介绍？

2. 问最近做过哪些项目，项目中遇到哪些问题？怎么解决的？

做过多人博客，有遇到头像上传页面的对图片保存的问题

解决方案

• 解决方案是点击上传头像的button后，使用iframe标签内敛一个avatrform页面，用来添加图片，添加图片后点击提交，进入到cut页面，在这里我使用了一个gm插件，来进行裁剪图片，并将裁剪过后的图片进行保存。

为什么会使用iframe标签？

为了解决post提交引发页面跳转，也可以用ajax异步提交

---

• 上传完图片之后，点击确定进入到cut页面
  使用后段接口打开cut页面，首先在这里会设置一个裁剪框，使用div做的，然后在这里使用了jqueryui插件，可以使裁剪框的大小改变，然后将div大小改变的值通过计算获取到裁剪图片大小的值，再对图片通过计算进行放大和缩小，并且移动，就可以在右边的预览框里看见头像，然后点击提交，进入到后端使用node操作本地的gm对图片进行裁剪，然后将裁剪后的图片保存在文件夹里。

页面是怎么将图片显示在页面上的?

我在数据库里保存的是图片的相对地址，通过ajax请求，请求到图片的相对地址，将图片渲染到页面上去
一开始就写了图片文件夹的静态路由，app.ues(static)

iframe的作用和缺点(参考面经)

优点：

1. 解决加载缓慢的第三方内容的加载问题（广告，图标）
2. 并行加载脚本

缺点

1. 如果iframe里面是空的，也会加载
2. 没有语义
3. iframe 会阻塞主页面的onload 事件

3.你用到了Flex，请问flex怎么设置垂直水平居中？

display：flex
flex-direction column 设置方向
align-itms center 设置主轴

4. css有哪些垂直水平居中方式？

1. margin 0 auto
2. postion absolute,left 50％,marginleft -width/2
3. 对于img

display:table-cell
text-align: center
vertical-align:middle

5. css选择器有哪些？选择器的优先级？

id 类 标签 子代<，后代 通配符 *，属性[]，伪类

6. position的值有哪些？

static 元素框正常生成，作为文档流的一部分
relative 元素框偏移某个位置，但是实际位置会保留
absolute 元素脱离文档流
fiexd: 元素相对浏览器窗口固定（滚动时也不比上年）

---

文档流是什么

文档流也叫标准流，html元素会按照从左到右，从上到下依次排列
块级元素会占一行，行内元素会在一行

7. 只允许使用css，让一个页面原有dom不可见（考察CSS属性以及结构化思维，考官说有多种解决方法）

1. display none
2. visibility hidden
3. 宽高为 0，z-index :-1000; 透明度为0

8. 浏览器高级特性有了解吗？（service worker）

可以运行异步 js 代码，避免阻塞用户界面，处理复杂计算和数据处理（否则这些任务会占用很长时间，严重时会导致用户无法与页面进行交互）

9.浏览器CSS Hack手段有哪些？

IE9 \9 （后边）
IE8 \0（后边）
ie7 + （前边）
IE6 - （前边）

10.为什么浏览器需要同源策略？

同源策略 域名 协议 端口号相同

同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档

为什么浏览器需要同源策略

主要为了安全，如果没有同源策略，会存在浏览器中的数据可以被任意读取，ajax任意请求，不同域下dom 任意操作这些现象，并且存在隐私泄露（浏览恶意网站）

11.浏览器跨域的几种方式？

jsonp

动态创建script 标签，使用标签中的src 属性获取js 脚本（内容是函数调用），该函数调用的参数是服务器返回的数据，为了获得返回的数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据

CORS

思想：允许自定义http 头部，允许浏览器和服务器进行交流（了解对方），从而决定请求或响应是否成功

Access-Control-Allow-Origin:指定授权访问的域
Access-Control-Allow-Methods：授权请求的方法（GET, POST, PUT, DELETE，OPTIONS等)

12.浏览器性能怎么优化？（从多个方向上去答）

1. 代码重用
2. 减少 http 请求（前端用变量保存ajax 的请求结果，每次操作本地变量）
3. js在下，css在上
4. 使用压缩组件
5. 使用浏览器缓存

13.JS基本数据类型有哪些？

基本数据类型有 symbol null undefined string boolean number
引用数据类型 object array regexp date function

14. 怎样判断一个数组是数组？

1. es5 array.isarray
2. instanceof
3. object.prototype.tostring.call

15.怎么用JS实现一个队列？

• 实现队列
  push 和 shift
• 实现栈
  pop push

16.描述出任意一个排序算法？

17. Vue怎么实现双向绑定的？

mvvm
数据劫持结合发布者订阅者模式
‌

18.说出你觉得自己身上最优秀的能力？
‌19.说出你未来的规划？
‌20.你最近有没有什么想要学习的技术？
‌21.你有什么又问我的？（问了面试官的学习方法和学习习惯，）
‌

‌sql注入，xss漏洞 面94
‌js继承，
‌js回收机制
‌事件代理，事件委托，事件冒泡
‌js引用类型和基本类型
‌内存泄露
‌new关键字做了什么
‌call apply bind的区别
‌数组对象的一些操作。数组换位置啊 什么排序啊，数组去重
‌数组字符串的方法
‌深浅拷贝对象
‌hack dtd
‌h5 css3新增属性
‌闭包
‌es6的this，vue的this，this指向问题
‌模块化和组件化的区别
‌父子组件传值
‌生命周期，钩子函数
‌mvvm
‌注册组件，定义组件
‌常用指令，自定义指令
‌vuex了解 必问
‌跨域http
‌浏览器的储存方式
‌拉姆达表达式