基础信息
- 姓名：
- 性质：深圳外包、成都外包、项目外包人力
- 面试时长：分钟
- 面试结论：一面面试x通过
- 可预约面试时间段：
面试评价
说明：面试通过才写面试结论。
基础面试题
说明：只保留问及或新增问题，并在后面评分。内勤一面综合基础问题数>=12个，且面试时间>=40分钟；外包一面综合基础问题数>=10个，且面试时间>=30分钟；
一、其他基础
- 简述登录原理
- 简述浏览器同源策略，跨域实现 ？？ 5
同源是指同协议、同域名、同端口。
jsonp
https://www.jianshu.com/p/1d0ee9bac639
- viewport是什么，如何设置移动网页viewport meta标签 ？？ 0
layout viewport：
layout viewport 是网页的所有内容，他可以全部或者部分展示给用户。
visual viewport
visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。
width 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
- 浏览器本地存储有哪些?如何验证支持的大小？ 10
localstorage
生命周期永久，除非用户清除浏览器中的localStorage信息，否则永远存在；
存放数据大小一般为5MB；
仅在浏览器中保存，不参与服务器通信；
sessionStorage
仅在当前会话下有效，关闭页面或者浏览器后被清除；
存放数据大小一般为5MB；
仅在浏览器中保存，不参与服务器通信；
可以接受源生接口，亦可以再次封装来对Object和Array有更好的支持；
cookie
生命周期为在cookie设置的过期时间之前一直有效，即使窗口或者浏览器关闭；
存放数据大小为4K；
有存储个数限制（各浏览器不同），一般不超过20个；
与服务器端通信，每次都会携带在HTTP头中，cookie存储数据过多会带来性能问题；
- 请说出三种减低页面加载时间的方法
压缩css、js文件，合并js、css文件，减少http请求
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作
二、CSS基础
- css有哪些类型的选择器，以及各选择器优先级是怎样的？
元素选择器
类选择器
ID选择器
属性选择器
内联 > ID选择器 > 类选择器 > 标签选择器
- 如何用css实现一个旋转的三角形？ 0
- CSS3 动画属性有哪些？
1、2D属性
位移translate(x,y)
旋转rotate()
缩放scale()
倾斜skew()
2、3D属性
- CSS 怎么实现水平和垂直居中？ ？ 10
水平居中：
text-align: center
margin: 0 auto; 垂直居中：(行高和高度设为一样) line-height: 40px; height 40px 水平垂直居中 定位 position: absolute; letf 50% right 50% transform: translate(-50%, -50%) flex布局（弹性布局）
- 预编译语言相比于CSS的优势
- Css3新特性有哪些
三、JS基础
- 关于new操作符
- 改变原数组的api：push/pop/unshift/shift/sort/splice/reverse?
- 常用ES6的方法：Array、Object ？？
- JS的命名规则
- This 理解，如何改变this 指向：apply/call/bind/箭头函数 ?
- 原型链继承方式有哪一些，ES6的继承实现
- 事件委托、冒泡
- Promise 基本用法
- 函数节流、防抖
- 事件委托是什么？意义
- A: 通过事件冒泡，将事件传递到父元素，再捕获；
- A: 意义：减少事件绑定，降低内存消耗；更加灵活，新增元素时不需要反复去绑定事件；
三、框架
- 组件间通信方式有哪些
- 阐述 vuex/vue-router 工作机制
- vuex的理解和用法
- 理解：状态管理器
- 用法：
- state
- mutation
- action
- getter
- vue-router的理解和用法
- Vue路由守卫有哪些，怎么设置，使用场景等 ？
- Vue 生命周期
- Vue 如何实现按需加载
- Computed、watch、method区别及应用
四、移动端开发
- 移动端调试方式：测试环境调试/生产代码debug
- 代理使用：fiddler/charles、node server 代理
- Input 框键盘问题，如何解决 ？
- 移动端响应式布局：rem、flex布局、media 查询 ？
- wkwebview 和 UIwebview区别
五、网络
- 从浏览器输入URL 到渲染的过程
- A: DNS -> 寻址 -> TCP 三次握手 -> 静态/动态资源 -> 资源加载 -> 浏览器渲染
- http 状态码、协议内容
- 浏览器缓存机制 ？
- 同源策略，跨域处理
- http请求方式有哪些，他们区别是什么
- Http中状态码的含义
- 本地缓存方式及区别：cookie & localStorage & sessionStorage && indexDB
- DNS 解析过程
- CDN 原理
六、安全
- 常见XSS ，及防御机制
- 讲述 CSRF 攻击过程，及如何防御
七、性能优化？
- web常用的性能优化方案有哪些
- 项目中使用过哪些技术优化手段
- 前端开发中，如何优化图像？
- 不用图片，尽量用css3代替
- 使用矢量图SVG替代位图
- 使用恰当的图片格式
- 按照HTTP协议设置合理的缓存。
- 使用字体图标webfont、CSS Sprites等。
- 用CSS或JavaScript实现预加载。
- WebP图片格式能给前端带来的优化
八、工程化
- Webpack 打包流程介绍 ？
- webpack3和webpack4区别
- Loader 和plugin 区别 ？
- 如何实现多页面打包 ？？
- 如何写一个webpack 插件