阅读 73

2021.6.3前端面试题

一、call和apply的区别是什么,哪个性能更好一点?

  • call和apply都是原型上的方法, 每一个方法作为function的实例,都可以调这两个方法,这两个方法执行目的都是为了改变函数中的this指向,唯一的区别就是call传参传的参数是一个个传递,而apply是把所有需要传递的参数以数组的形式传给函数,跟call、apply一样可以改变this指向的还有一个bind,只不过bind并没有立即把函数执行,只是预先把函数中的this进行处理
  • call的性能要比apply好那么一些(尤其是在传给函数的参数超过3个的时候)
  • console.time( ); 可以测试出一段程序执行的时间
  • console.profile( ); 在火狐浏览器中安装FireBug,可以更精准的获取到程序每一个步骤所消耗的时间

二、箭头函数和普通函数的区别是什么。构造函数可以使用new生成实例,箭头函数可以吗?为什么?

  • 箭头函数语法上比普通函数更加简洁
  • 箭头函数没有自己的this,它里面的this是继承函数所处上下文中的this(使用call、apply都无法改变this的指向)
  • 箭头函数没有arguments(类数组),只能基于...arg获取传递的参数集合(数组)
  • 箭头函数不能被new执行(因为:箭头函数没有this也没有prototype)

三、编写代码实现图片的懒加载

  • 前端性能优化的重要方案
  • 通过图片或者数据的延迟加载,我们可以加快页面渲染的速度,让第一次打开页面的速度变快
  • 只有滑动到某个区域,我们才加载真实的图片,这样也可以节省加载的流量

处理方案

  • 把所有需要延迟加载的图片用一个盒子包起来,设置宽高和默认展位图
  • 开始让所有img的src为空,把真实图片的地址放在img的自定义属性上,让img隐藏
  • 等待所有其他资源都加载完之后,我们再开始加载图片
  • 对于很多图片需要当页面滚动的时候,当前图片区域完全显示出来后再加载真实图片

四、数据类型检测方案

typeof:直接在计算机底层基于数据类型的值(二进制)进行检测

  • typeof  null :'object'  对象存储在计算机中,都是以000开始的二进制存储,null也是,所以检测出来是对象
  • typeof  普通对象/数组对象/正则对象/日期对象 都是'object'

instanceof 检测当前实例是否属于这个类

  • 底层机制:只要当前类出现在实例的原型链上,结果都是true
  • 由于我们可以肆意的修改原型的指向,所以检测出来的结果是不准的
  • 不能检测基本数据类型

let arr = [];
arr instanceof Array; //true
arr instanceof RegExp; //false
arr instanceof Object; //true
1 instanceof Number;//false,不能检测基本数据类型

constructor

  • 用起来看似比instanceof好用一些(基本数据类型支持的)
  • constructor可以随便改,所以也不准确

let arr = [];
arr.constructor === Array ; //true
arr.constructor === RegExp ; //false
arr.constructor === Object ; //false

Object.prototype.toString.call( [value] )

  •  标准检测数据类型的方法:Object.prototype.toString不是转换为字符串,是返回当前实例所属类的信息

  • 标准检测的方法返回:"[object  Number / String / Boolean / Null / Undefined / Symbol / Object / Array]"

五、js中this的五种情况

  • 元素的事件绑定,事件触发,方法执行,方法中的this一般都是当前元素
  • 函数执行,看前面是否有“点”,有“点”,“点”前面是谁this就是谁,没有的话this是window,严格模式下this是undefined
  • 构造函数中的this是当前类的实例
  • 匿名函数或者回掉函数中的this,window居多
  • 箭头函数中没有自己的this,this都是上下文中的
  • 基于call / apply / bind 暴力式改变this的指向

六、请列举出你所知道的ES6新语法规范(不少于5个)

  • 新增声明命令let和const
    在es6中通常用 let 和 const 来声明,let 表示变量、const 表示常量。

  • 模板字符串(Template String)
    用一对反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,也可以在字符串中嵌入变 量,js表达式或函数,变量、js表达式或函数需要写在${ }中。

  • 函数的默认参数
    ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。

  • 箭头函数
    简洁的函数写法,我们称作“箭头函数”

  • Object.keys()方法:获取对象的所有属性名或方法名(不包括原形的内容),返回一个数组。

  • Object.assign (),assign方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数,第一个参数是目标对象,后面的都是源对象。

  • for...of 循环

  • 解构赋值
    按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

七、JS中出现undefined与null几种常见情况

undefined

  • 在变量提升(预解析)阶段,只声明未定义,默认值就是undefined。
  • 在JS的严格模式下(”use strict”),没有明确的主体,this指的就是undefined。
  • 函数定义没有返回值(return或者return后面什么也不带),默认的返回值就是undefined。
  • 函数定义形参不传值,默认就是undefined。
  • 对象没有这个属性名,属性值默认就是undefined。
  • 在数组的find方法中,没有找到的情况下是undefined。

null

  • 手动设置变量的值或者对象某一个属性值为null(此时不赋值,会在后面的代码中进行赋值,相当于初始化。)
  • 在JS的DOM元素获取中,如果没有获取到指定的元素对象,结果一般是null。
  • Object.prototype._proto_的值也是null。
  • 在正则捕获的时候,如果没有捕获到结果,默认也是null。

八、JS中的数据类型都有哪些?它们之间有什么区别?该如何检测?

1. 基本数据类型

  • Number
  • String
  • Boolean
  • null
  • undefined
  • Symbol 唯一值
  • BigInt 最大整数

2. 引用数据类型

对象

  • 普通对象Object
  • 数组Array
  • 正则RegExp
  • 日期Date 实例
  • 数学Math
  • 实例
  • prototype原型

3. 函数

  • function
  • Class

区别:基本值存储的是值,引用值存储的址

九、数组中常用的迭代方法有哪些?都是什么意思?

  • foreach
  • map 返回值是一个新数组,数组里的每一项就是回调函数每一次的return值
  • every() : 对数组中的每一项执行函数,如果每一项都返回 true ,则该方法返回 true。如果有一项没有返回true,那就立即停止遍历,然后返回false
  • some(): 对数组中的每一项执行函数,只要有一项返回了 true ,则该方法返回 true。如果都不满足,那就返回false
  • filter(): 对数组中的每一项执行函数,把里面返回 true 的项,组成一个数组返回。

十、闭包

1. 闭包概念

函数执行形成的私有栈内存,会把内存中所有的私有变量保护起来,和外面没有任何的关系,函数执行的这种保护机制就是“闭包”

2. 闭包的两个作用

  • 保护  保护私有变量跟外界没有感染
  • 保存  私有作用域里面的东西被外界占用了,形成一个不销毁的私有作用域,把里面的私有变量保存下来
  • 在真实项目中,因为闭包会形成不销毁的栈内存,所以要尽可能减少对它的使用,但是有的情况下,闭包的应用还是比较重要的

3. 闭包应用

  • 之前在做循环事件绑定的时候,在没有let的情况下,都是基于闭包存储循环的索引值
  • 之前也看过高程3其中有一章关于闭包的应用里面有个柯理化函数编程思想,这个挺重要的,尤其是function原型上有一个叫bind的方法,它预先处理this的机制,其实就是用柯理化函数去做的,我也去看过他的源码
  • 在项目中有防抖和节流,也是利用闭包、柯理化函数的思想来写的debounce和 throttle

十一、用户输入一个url浏览器做了什么事情

  • 发送URL请求(URL地址解析)
  • DNS域名解析
  • 和服务器建立TCP连接(打通一个通道)
  • 把客户端的信息传递给服务器(HTTP请求)
  • 服务接收到你的请求然后并处理你的请求(包括把数据返回到客户端)
  • 客户端接收到数据并且把数据渲染到页面)
  • 和服务器断开TCP连接(关闭通道)

image.png

十二、前端的性能优化

减少HTTP请求次数额传输报文的大小

  • CSS SPRITE(雪碧图、图片精灵)          
  • 使用字体图标(iconFont)或者使用SVG的矢量图

特点:    

  • 减少请求的次数或者请求的速度(质量小)              
  • 渲染时按照代码渲染的,要更快,而位图(png/jpg/gif)是需要先把图片编码在进行渲染        

图片的懒加载

  •   第一次加载的时候不去请求真正的图片,提高第一次加载的速度              
  • 当页面加载完,把出现在用户视野里的图片做真实加载,没有出现的先不加载,(节约流量,也能减少对服务器的压力)          
  • 音视频取消预加载(perload = 'none'),这样可以增加第一次渲染页面的速度,当需要播放的时候去加载              
  • 把页面中的css文件和js文件行合并压缩(webpack来实现)          
  • 有钱就做CDN(地狱分布式服务器)、加服务器          
  • 做图片base64的处理(把图片转成base64码,这样可以减少图片的请求,提高页面渲染的速度,但是base64 会导致代码变得过多,不利于开发和维护,但是以后我们使用webpack来进行base64的批量设置就好了)  

二、设置各种缓存、预处理和长连接机制

  • 把不经常更改的静态资源做缓存处理(一般都是304或者eTag协商缓存)          
  • DNS的缓存和预处理,减少DNS的查找          
  • 设置本地的离线存储(manifest)或者把一些不经常更改的数据做本地存储(webstorage)          
  • 建立Connection:keep-alive TCP长连接          
  • 建立 Cache-Control 和 Expires HTTP强缓存          
  • 使用HTTP2版本协议(现在使用的是HTTP1.xxx)        

三、代码方面的优化

  • 减少对闭包的使用(因为过多使用闭包会产生不销毁的作用域,处理不好的话,会导致内存溢出)          
  • 对于动画来说,能用css解决的不用js(能用transform处理的不用别的样式【硬件加速】),能用requestAnimationFrame解决的不用定时器              
  • requestAnimationFrame还有一个优势就是当页面处于休眠状态的时候,动画会自己暂停,直到恢复访问状态为止      
  • 避免使用iframe(因为ifarme会嵌入其他页面,这样父页面渲染的时候,还要把子页面渲染了)    
  • 减少直接对DOM的操作回流和重绘          
  • 低耦合高内聚(减少页面中冗余的代码:封装:插件、组件、框架、类库、方法)          
  • 尽可能使用事件委托          
  • 避免出现死循环和嵌套循环          
  • 在项目中尽可能使用异步编程来模拟出多线程的效果,避免主线程的阻塞(promise)          
  • 函数的防抖和节流          
  • 尽可能减少安泽穷的层级(选择是从右向左进行解析) .box a{}  a{}          
  • 堆栈内存的手动释放(赋值为null)          
  • 对于数据我们尽可能分批加载(不要一次请求过多的数据,例如分页)    

十三、cookie和local之间的区别

  • 大小限制:一般浏览器允许的大小是8kb,但是local是5mb      
  • 兼容性:local是H5新增的所以兼容性差,但是cookie早就有,所以兼容好      
  • 稳定性:cookie不太稳定,各种清除缓存都会把cookie清除,local比较稳定(清除缓存对他不起作用) cookie可以自动的穿梭于客户端和服务端之间,local不会

十四、DOM diff 原理

  • 把树形结构按照层级分解,只比较同级元素。
  • 给列表结构的每个单元添加唯一的 key 属性,方便比较。
  • React 只会匹配相同 class 的 component(这里面的class指的是组件的名字)
  • 合并操作,调用 component 的 setState 方法的时候, React将其标记为 dirty.到每一个事件循环结束
  • 查 React 检查所有标记 dirty 的 component 重新绘制.
  • 选择性子树渲染。开发人员可以重写 shouldComponentUpdate提高 diff 的性能。

十五、http 和 https 区别

blog.csdn.net/xiaoming100…

文章分类
前端
文章标签