**如何理解原型链
每个函数都拥有一个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
网友评论