Open qinyakang opened 4 years ago
1. jsonp 跨域原理是什么jsonp的跨域原理是，因为浏览器存在同源策略，会阻拦跨域请求。利用src属性不会受同源策略影响的特征，动态生成一个script，所以可以实现跨域。
JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
2. flex 如何未知高度的水平垂直居中display: flex; justify-content: center; align-items: center
3. promise 按串行请求 A、B、C、D、E 5 个请求如何实现，如何优化
4. redux 的适用场景是什么以及如何使用redux是一个实现全局状态管理的工具。类比于vuex，主要的作用是用来给组件通讯的时候使用。使用场景就是当多个组件需要互通数据，而普通的兄弟组件父子组件通讯传值很麻烦，或者是多个组件需要同一数据但要载入时发多次的同一请求时，为了避免麻烦和提高用户体验，可以使用redux。
1. 什么是闭包，有什么用，工作中有没有使用过。 闭包就是让我们间接访问函数内部的变量 2. 什么是原型，使用它有什么好处。 每个函数都有一个prototype属性,这个属性指向一个原型对象。 constructor指向构造函数。 如果是一些公共方法就可以直接定义在原型上，这样缩减代码量，提高开发效率。 3. js的作用域规则，var和let的区别 var 会坐变量提升，let没有变量提升 4. 知道哪些模块化规范，你使用过哪些 cmd，amd ，ES Module cmd：node使用的CommonJS amd： seajs 很少用了 ES Module ： es6的模块化 5. 使用过哪些构建工具，说说你在项目中的应用 gulp grunt webpack
6. Promise解决的问题。 1.解决了异步的回调地狱 2.promise 可以实现在多个请求发送完成后 再得到或者处理某个结果 (promise.all方法) 7. 有没有使用过async，await函数，它给你带来了哪些便利 async 和 await 可以说是现阶段异步终极解决方案，相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码。简单来说就是异步代码同步写。 8. 浏览器的事件机制，包含了哪些阶段 事件的三个阶段（捕获，目标源，冒泡）
1. 浏览器中的事件轮回模型(Event Loop)，什么是微任务，什么是宏任务 微任务和宏任务是任务源的两种类型，分别包含： 微任务包括 process.nextTick ，promise ，MutationObserver。 宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。 Event Loop 执行顺序如下所示： 1.首先执行同步代码，这属于宏任务 2.当执行完所有同步代码后，执行栈为空，查询是否有异步代码需要执行 3.执行所有微任务 4.当执行完所有微任务后，如有必要会渲染页面 5.然后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数 2. 浏览器有哪些缓存机制 1.缓存位置 Service Worker Memory Cache（内存中的缓存） Disk Cache（硬盘中的缓存） 2.缓存策略 强缓存（通过设置两种 HTTP Header 实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code 为 200） 协商缓存（缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag ）
3. 浏览器渲染一个网页的过程 1.浏览器接收到 HTML 文件并转换为 DOM 树 2.将 CSS 文件转换为 CSSOM 树 3.生成渲染树 注意点： 碰到script标签会阻塞渲染，所以一般会把script放到页脚。如果想要避免script阻塞页面渲染，可以给script标签加 async或defer 属性 4. 什么是重绘和回流，有哪些措施可以避免（能回答1-2个就ok了） 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘 回流是布局或者几何属性需要改变就称为回流。 避免： 使用 transform 替代 top 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局） 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame CSS 选择符从右往左匹配查找，避免节点层级过多 5. 知道哪些前端的安全防范措施（说出1-2个就ok） XSS：XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中。 CSP：CSP 本质上就是建立白名单 CSRF：击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求 点击劫持：点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。 6. 最常用的框架是什么，它的实现原理是怎样的 vue （Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到 set 和 get 的事件） react （vnode，diff） 7. 如何进行前端错误监控 window.onerror方法可以很好做前端错误监控
前端面试题 - 中高级
阿里P7前端提出的四个经典问题：
1. jsonp 跨域原理是什么
jsonp的跨域原理是，因为浏览器存在同源策略，会阻拦跨域请求。利用src属性不会受同源策略影响的特征，动态生成一个script，所以可以实现跨域。
JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
2. flex 如何未知高度的水平垂直居中
display: flex;
justify-content: center;
align-items: center
3. promise 按串行请求 A、B、C、D、E 5 个请求如何实现，如何优化
4. redux 的适用场景是什么以及如何使用
redux是一个实现全局状态管理的工具。类比于vuex，主要的作用是用来给组件通讯的时候使用。使用场景就是当多个组件需要互通数据，而普通的兄弟组件父子组件通讯传值很麻烦，或者是多个组件需要同一数据但要载入时发多次的同一请求时，为了避免麻烦和提高用户体验，可以使用redux。
中级前端经典八问
JavaScript
1. 什么是闭包，有什么用，工作中有没有使用过。
闭包就是让我们间接访问函数内部的变量
2. 什么是原型，使用它有什么好处。
每个函数都有一个prototype属性,这个属性指向一个原型对象。 constructor指向构造函数。
如果是一些公共方法就可以直接定义在原型上，这样缩减代码量，提高开发效率。
3. js的作用域规则，var和let的区别
var 会坐变量提升，let没有变量提升
4. 知道哪些模块化规范，你使用过哪些
cmd，amd ，ES Module
cmd：node使用的CommonJS
amd： seajs 很少用了
ES Module ： es6的模块化
5. 使用过哪些构建工具，说说你在项目中的应用
gulp grunt webpack
6. Promise解决的问题。
1.解决了异步的回调地狱
2.promise 可以实现在多个请求发送完成后 再得到或者处理某个结果 (promise.all方法)
7. 有没有使用过async，await函数，它给你带来了哪些便利
async 和 await 可以说是现阶段异步终极解决方案，相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码。简单来说就是异步代码同步写。
8. 浏览器的事件机制，包含了哪些阶段
事件的三个阶段（捕获，目标源，冒泡）
高级前端经典八问
JavaScript
1. 浏览器中的事件轮回模型(Event Loop)，什么是微任务，什么是宏任务
微任务和宏任务是任务源的两种类型，分别包含：
微任务包括 process.nextTick ，promise ，MutationObserver。
宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。
Event Loop 执行顺序如下所示：
1.首先执行同步代码，这属于宏任务
2.当执行完所有同步代码后，执行栈为空，查询是否有异步代码需要执行
3.执行所有微任务
4.当执行完所有微任务后，如有必要会渲染页面
5.然后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数
2. 浏览器有哪些缓存机制
1.缓存位置
Service Worker
Memory Cache（内存中的缓存）
Disk Cache（硬盘中的缓存）
2.缓存策略
强缓存（通过设置两种 HTTP Header 实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code 为 200）
协商缓存（缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag ）
3. 浏览器渲染一个网页的过程
1.浏览器接收到 HTML 文件并转换为 DOM 树
2.将 CSS 文件转换为 CSSOM 树
3.生成渲染树
注意点： 碰到script标签会阻塞渲染，所以一般会把script放到页脚。如果想要避免script阻塞页面渲染，可以给script标签加 async或defer 属性
4. 什么是重绘和回流，有哪些措施可以避免（能回答1-2个就ok了）
重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
回流是布局或者几何属性需要改变就称为回流。
避免：
使用 transform 替代 top
使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
CSS 选择符从右往左匹配查找，避免节点层级过多
5. 知道哪些前端的安全防范措施（说出1-2个就ok）
XSS：XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中。
CSP：CSP 本质上就是建立白名单
CSRF：击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求
点击劫持：点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。
6. 最常用的框架是什么，它的实现原理是怎样的
vue （Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到 set 和 get 的事件）
react （vnode，diff）
7. 如何进行前端错误监控
window.onerror方法可以很好做前端错误监控