2018web前端面试题总结 (5)

九、深拷贝和浅拷贝 https://juejin.im/post/5b00e85af265da0b7d0ba63f 从堆和栈都是内存中划分出来用来存储的区域开始讲起
基本类型:undefined,null,Boolean,String,Number,Symbol 在内存中占据固定大小,保存在栈内存中
引用类型:Object,Array,Date,Function,RegExp等 引用类型的值是对象 保存在堆内存中,栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址。
基本类型的复制: 其实就是创建了一个新的副本给将这个值赋值给新变量, 改变值旧对象不会改变
引用类型的复制: 其实就是复制了指针,这个最终都将指向同一个对象,改变其值新对象也会改变
基本类型的比较 == 会进行类型转换

浅拷贝:仅仅就是复制了引用,彼此操作不影响,slice() concat() object.assign
深拷贝:在堆中重新分配内存,不同的地址,相同的值,互不影响的 JSON.parse()将一个js对象序列化为一个json字符串 JSON.stringify()将json字符串反序列化为一个js对象 es6的展开 {...}
深拷贝和浅拷贝的主要区别是:在内存中的存储类型不同
浅拷贝:重新在堆栈中创建内存,拷贝前后对象的基本类型互不影响。只拷贝一层,不能对对象进行子对象进行拷贝
深拷贝:对对象中的子对象进行递归拷贝,拷贝前后两个对象互不影响

十、跨域
同源策略(协议+端口号+域名要相同)
1、jsonp跨域(只能解决get)
原理:动态创建一个script标签。利用script标签的src属性不受同源策略限制,因为所有的src属性和href属性都不受同源策略的限制,可以请求第三方服务器资源内容
步骤:1.去创建一个script标签
2.script的src属性设置接口地址
3.接口参数,必须要带一个自定义函数名,要不然后台无法返回数据
4.通过定义函数名去接受返回的数据

2、document.domain 基础域名相同 子域名不同
3、window.name 利用在一个浏览器窗口内,载入所有的域名都是共享一个window.name
4、服务器设置对CORS的支持
原理:服务器设置Access-Control-Allow-Origin HTTP响应头之后,浏览器将会允许跨域请求
5、利用h5新特性window.postMessage()

iframe元素创建包含另外一个文档的内联框架(行内框架)(setTimeout进行异步加载)
解释:浏览器中的浏览器!用于设置文本或者图形的浮动图文框或容器
它和跨域
1、document.domain 实现主域名相同,子域名不同的网页通信
都设置为超域:document.domain = 'demo.com'
2、window.postMessageht(data, url),h5的API,启动跨域通信


十一、图片的懒加载和预加载
预加载:提前加载图片,当用户需要查看是可以直接从本地缓存中渲染
为什么要使用预加载:在网页加载之前,对一些主要内容进行加载,以提供用户更好的体验,减少等待时间。
否则,如果一个页面的内容过于庞大,会出现留白。
解决页面留白的方案:1.预加载 2.使用svg站位图片,将一些结构快速搭建起来,等待请求的数据来了之后,替换当前的占位符
实现预加载的方法:
1.使用html标签
2.使用Image对象
3.使用XMLHTTPRequest对像,但会精细控制预加载过程

 

懒加载(lazyload):客户端优化,减少请求数和延迟请求数
提升用户体验,
减少无效资源的加载
防止并发加载的资源过多会阻塞js的加载,影响网站的正常使用
原理:首先将页面上的图片的src属性设置为空字符串,而图片的真是路经则设置带data-original属性中,
当页面滚动的时候需要去监听scroll事件,在scroll事件的回调中,判断我们的懒加载的图片是否进入到可视区域
,如果图片在可视区域将图片的src属性设置为data-original的值,这样就可以实现延迟加载。

十二、函数节流防抖
什么是防抖:短时间内多次触发同一个事件,只执行最后一次,或者在开始时执行,中间不执行。比如公交车上车,要等待最后一个乘客上车
什么是节流:节流是连续触发事件的过程中以一定时间间隔执行函数。节流会稀释你的执行频率,比如每间隔1秒钟,只会执行一次函数,无论这1秒钟内触发了多少次事件
都为解决高频事件而来, scroll mousewhell mousemover touchmove onresize

十三、将arguments类数组转化为数组的方法
Array.apply(null, arguments)
Array.prototype.slice.apply(arguments)
Array.from(arguments)

十四、高阶函数
一、函数作为参数传递 抽离出一部分容易变化的业务逻辑,把这部分业务逻辑放在函数参数中。这样一来可以分离业务代码中变化与不变的部分
回调函数
二、函数作为返回值传递

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyjfsg.html