前端面试题集锦二

23.判断javascript的方式

答：23.1  typeof  只可以判断出 string, number,boolean, undefined,symbol,因为null, array,object的结果都为object

23.2  instanceof 构造函数的prototype属性是否出现在对象的原型链中的任何位置

23.3 Object.prototype.toString.call() 判断所有，array => [object Array] object => [object Object]

23.4 Array.isArray() 判断数组

24. 什么是闭包？优缺点？

答：简而言之就是，能够读取其他函数内部变量的函数
优点：24.1 避免全局变量污染 24.2 缓存变量

缺点：24.1 内存泄露 24.2 常驻内存，增加内存使用量，性能降低

25.什么是构造函数？跟es6的class有什么区别？

答：在javascript中，使用new关键字来调用的函数称之为构造函数，一般情况下，创建多个同一类型(属性和方法都相同)的对象，使用字面量构建会出现很多重复的代码，因此可以使用构造函数，构造函数首字母大写，使用new关键字来实例化,简而言之，构造函数是初始化对象，而new是在创建对象, 整个过程描述为new出来的新对象，将新对象的_proto_指向构造函数的prototype，构造函数执行时，通过call将执行上下文(this)切换成new出来的新对象,因此可以共用构造函数的方法及属性，至此，实例化完成

class为构造函数的语法糖，它的本质仍是构造函数，class的继承extends本质为构造函数的原型链的继承

区别在于：es6默认严格模式，不存在变量提升，方法默认是不可枚举的，必须使用new来调用，所有方法没有原型对象prototype,this的生成顺序不同

26.transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式？

答：transform是指变换，是css3的一个属性，而translate是它的一个属性值，元素位移，transition是指过渡效果，实现动画方式有 transition 和 animation，前者一般定义开始结束两个状态，需要有触发条件；而后者引入了关键帧、速度曲线、播放次数等概念，更符合动画的定义，且无需触发条件

27.javascript 的垃圾回收机制是指？

答：javascript在定义变量，创建对象时，会自动为这些变量或者对象分配内存，一旦它们不再被使用时，会自动释放这个部分的内存。

28.常见的内存泄漏有哪些?

全局变量，被遗忘的定时器和回调函数，闭包，没有及时清理的dom元素引用，递归

29.对前端性能优化有什么了解？一般都通过那几个方面去优化的？

答：代码层面：规范代码，少用闭包，减少重绘回流，谨慎使用with,避免使用eval Function函数,减少作用域链查找,js文件引用置于页面底部，删除复复脚本，代码压缩，css代码压缩，使用精灵图
非代码层面：减少http请求数，模块化组织及引用代码，预加载组件，合理设置http缓存，使用内容分发网络cdn，减小cookie传输

30.如何实现一个最大的正方形

答：div{
width: 100%;

padding-bottom: 100%;

background: red;
}

31.一行水平居中，多行居左

答：text-align: center 与 display: inline-block text-align: left;

32.水平垂直居中

答：定位，transform,flex,table

33.两栏布局，左边固定，右边自适应，左右不重叠

答： .left {float: left; width: 200px;margin-right: 20px;}.right {overflow: hidden;} 或者flex

34.如何实现等高布局

答： flex 或者 table布局

35.

.前后端跨域及相关解决方案

答：同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源限制的内容有cookie, localStorage, IndexedDB, ajax,dom

img => src   link => href   script => src是允许跨域的

解决方案：JSONP
function jsonp(url,params, cb) {
return new Promise((resolve, reject) => {
let script = document.createElement(‘script’)

window[callback] = function (data) {
resolve(data)
document.body.removeChild(script)
}
params = {…params, cb}
let arrs = []
for(let key in params) {
arrs.push(`${key}=${params[key]}`)
}

script.src = `${url}?${arrs.join('&')}`
document.body.appendChild(script)
           })
}

jsonp({
url: ‘url’,

params: {},

callback: ‘show’
}).then(data => {console.log(data)})

CORS:服务端设置 Access-Control-Allow-Origin 就可以开启 CORS

PostMessage: 跨文本档、多窗口、跨域消息传递,页面和其打开的新窗口的数据传递,多窗口之间消息传递,页面与嵌套的iframe消息传递

websocket:  HTML5的一个持久化的协议,WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据,socket.io

Node中间件代理(两次跨域)

nginx反向代理

window.name + iframe

location.hash + iframe