记2018前端面试之旅

持续更新直到找到合适工作为止！-_-!

面试一

日期：20180420

前端性能优化？

前端性能优化这个问题可以回答的比较多，我自己的答案：
前端性能优化可以从：

减少HTTP请求的数量
减少HTTP请求的大小
缓存
内容分发网络
脚本放置在底部，样式表放置在顶部
...

减少HTTP请求的数量：

将公用的js、css文件合并
CSS雪碧图
图片地图
内联图片

不详细赘述了

标题文字

图片预加载方式？

图片预加载的主要思路： 图片预加载的主要思路就是把稍后需要用到的图片悄悄的提前加载到本地，因为浏览器有缓存的原因，如果稍后用到这个url的图片了，浏览器会优先从本地缓存找该url对应的图片，如果图片没过期的话，就使用这个图片。

图片预加载实现的方法：

适用js的image对象也有onload和onerror事件，分别是加载完后和加载失败时执行。

Image对象是专门用于处理图片加载的，就相当于内存中的img标签。

css实现图片预加载：写一个CSS样式设置一批背景图片，然后将其隐藏，这样你就看不到那些图片了。那些背景图片就是你想预载的图片
使用Ajax实现预加载：该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。
使用jQuery图片预加载(延迟加载)插件Lazy Load：Lazy Load也叫惰性加载，延迟加载，顾名思义，就是在图片未到达可视区域时，不加载图片

参考：图片预加载的方法

手写http请求？（XMLHttpRequest）

使用XMLHttpRequest对象：创建XHR对象、配置header、发送请求！通过设置回调来接受服务器响应！

谈谈promise?

Promise的优点：

最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了
串行执行异步任务，不用Promise需要写一层一层的嵌套代码，任何任务失败则不再继续并执行错误处理函数
Promise还可以并行执行异步任务

如果我们组合使用Promise，就可以把很多异步任务以并行和串行的方式组合起来执行。

ES5作用域和ES6作用域？

ES5: 函数作用域（局部）和全局作用域
ES6: 多出了一个块级作用域，也就是{}花括号里声明的单独的作用域

ES5怎么实现类？

使用原型继承的方式实现类！

对象的深拷贝？ES6、ES5

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

深拷贝对象（不讨论数组的情况）：

循环遍历对象的属性赋值
ES6的Object.assign: (用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），并返回合并后的target)
ES6扩展运算符:扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
JSON.parse(JSON.stringify(obj)): 上面三种方法不能拷贝所有层级，该方法可以拷贝对象所有层级
手动些递归（-_-!）

参考：https://www.cnblogs.com/pengh...

字符串的截取两个方法（subString subStr）的区别？

stringObject.substr(start,length):在字符串中抽取从 start 下标开始的指定数目的字符
stringObject.substring(start,stop): 用于提取字符串中介于两个指定下标之间的字符

使用过less、sass么？

没用过，从预编译语言的优点回答的
使用的优点：

方便CSS的维护，成本和编写成本
为 CSS 加入程序式语言的特性

缺点：

提高了门槛

跨域？

同源指的是：URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
同源策略：浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性（但是允许当前源执行其他源的脚本）

前端跨域实现方式：

JSONP：