前端面试题攻关

**如何理解原型链

每个函数都拥有一个prototype属性，每个函数实例对象都拥有一个proto属性，而这个属性指向了函数的prototype，当我们访问实例对象的属性或者方法时，会先从自身构造函数中查找，如果没有就通过proto去原型中查找，这个查找的过程我们称之为原型链。（跟作用域链有点像）

// 定义动物 - 父类
function Animal(){
    this.age = 10;
    this.say = function(){
        return 'hello tom';
    }
}
// 定义猫 - 子类
function Cat(){
    this.name = 'tom';
}
// 通过原型继承动物类
Cat.prototype = new Animal()
// 实例化一个cat对象
var cat = new Cat();
// 打印返回true
cat.__proto__ === Cat.prototype
// 打印age，会先查找cat，再查找Animal
console.log(cat.age)

微信图片_20200514191843.jpg

通过截图，我们可以看到cat实例对象proto指向了Animal，当cat没有age的时候，会通过proto到原型上查找，如果原型上依然没有，会继续向Object上查找。

**什么是闭包

简单理解就是函数中嵌套函数。我们都知道局部变量我们是无法访问的，但是通过闭包可以做到。

// 正常访问
var lan = 'zh';
function hello(){
  var name = '前端未来';
}
console.log(name)//很明显'undefined'

// 换成闭包
function hello(){
    var name = '前端未来';
    function demo(){
      console.log(name)//打印：前端未来
    }
}

**什么是深/浅拷贝，有哪些实现方式

JS数据类型分别基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。

浅拷贝方法
直接对象复制
Object.assign
深拷贝
JSON.stringify转为字符串再JSON.parse
深度递归遍历

**如何准确判断一个对象是数组

面试官希望的答案：

Object.prototype.toString.call([]) 返回 "[object Array]"
扩展答案
[].slice (能力判断 )
[] instanceof Array(类型判断)
[].proto === Array.prototype
Array.isArray([]) 存在兼容问题
数组也是引用类型，通过typeof依然返回object

**数组有哪些常用方法

这个非常多，说起来也很快，我主要考察你会多少，另外也为了引出下一个问题,slice和splice区别

push 末尾添加
pop 末尾删除
shift 首部删除
unshift 首部添加
concat 数组合并
join 数组元素通过连接符连接
reverse 数组反转
sort 数组排序
map/forEach/filter/indexOf/includes/slice/splice
slice表示截取，slice(start,end)不改变原数组，返回新数组。
splice表示删除，splice(start,length,item)，会改变原数组，从某个位置开始删除多个元素，并可以插入新的元素。

**CSS实现三列布局（左右固定宽度，中间自适应）

CSS浮动
第一个float:left，第二个float:right，第三个设置margin-left和margin-right
绝对定位法
第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right
flex布局

**H5自适应方案

H5自适应方案大家在网速能找到很多，我个人推荐一种我非常喜欢的方式，就是rem. rem是一种相对单位，它基于html的font-size值来进行调整。
通常我们以750为基准，我们会在header中嵌套一段js脚本，获取手机网页分辨率尺寸除以375，为了方便计算，我们假设750像素下1rem = 100px；所以我们除以375后需要乘以50.

**call/apply/bind作用和区别

他们都可以改变函数的作用域。

call/apply可以直接执行该函数，而bind不会立刻执行
call/apply作用类似，都可以改变指针和执行函数，区别在于传参不同，call需要单个传参，apply通过数组传参

浏览器解析渲染页面过程

image

解析HTML，生成DOM树
解析CSS，生成CSSOM树
将DOM树和CSSOM树关联，生成渲染树(Render Tree)
布局render树（Layout/reflow），负责各元素尺寸、位置的计算
绘制render树（paint），绘制页面像素信息
将像素发送给GPU，展示在页面上。(Display)

**谈一下防抖和节流

防抖和节流都是希望在同一时间内，不要重复触发请求。一般场景用在搜索和网页滚动事件中。
区别：

防抖主要是在规定时间内只触发一次，如果再次调用，时间从新计算。
节流主要是在固定时间内只触发一次。比如每间隔1秒触发一次。

**数组如何去重

ES6 Set去重
利用Object key去重
两层循环逐一对比，生成新数组
indexOf去重
sort排序，再单层循环前后对比

**前端有哪些跨域方案

JSONP跨域（本质是JS调用）
CORS（后台设置）
Nginx反向代理（运维配置）
跨域是浏览器做出的安全限制，必须同协议、同域名、同端口否则会被浏览器block
不常用跨域方案，我不进行列出

**前端网站常规优化方案

优化策略：减少请求次数、减小资源大小、提高响应和加载速度、优化资源加载时机、优化加载方式
合并、压缩、混淆html/css/js文件（webpack实现，减小资源大小）
Nginx开启Gzip，进一步压缩资源（减小资源大小）
图片资源使用CDN加速（提高加载速度）
符合条件的图标做base64处理（减小资源大小）
样式表放首部，JS放尾部（JS单线程，会阻塞页面；资源加载方式）
设置缓存（强缓存和协商缓存，提高加载速度）
link或者src添加rel属性，设置prefetch或preload可预加载资源。（加载时机）
如果使用了UI组件库，采用按需加载（减小资源大小）
SPA项目，通过import或者require做路由按需（减小资源大小）
服务端渲染SSR，加快首屏渲染，利于SEO
页面使用骨架屏，提高首页加载速度（提高加载速度）
使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显
使用图片懒加载-lazyload