前端基础面试题(后续待补充)

1.http 和 https 的基本概念

http: 是一个客户端和服务器端请求和应答的标准(TCP),用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。
https:是以安全为目标的 HTTP 通道,即 HTTP 下 加入 SSL 层进行加密。其作用是:建立一个信息安全通道,来确保数据的传输,确保网站的真实性。

2.Cookie、sessionStorage、localStorage 的区别

相同点:存储在客户端。

不同点:

  • cookie数据大小不能超过4k;sessionStorage和localStorage的存储比cookie大得多,可以达到5M+
  • cookie设置的过期时间之前一直有效;localStorage永久存储,浏览器关闭后数据不丢失除非主动删除数据;sessionStorage数据在当前浏览器窗口关闭后自动删除
  • cookie的数据会自动的传递到服务器;sessionStorage和localStorage数据保存在本地

3.从输入URL到页面加载的全过程

  1. 首先在浏览器中输入URL
  2. 查找缓存:浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面,如果有则显示页面内容。如果没有则进行下一步。
  3. DNS域名解析:浏览器向DNS服务器发起请求,解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的,因此会用到UDP协议
  4. 建立TCP连接:解析出IP地址后,根据IP地址和默认80端口,和服务器建立TCP连接
  5. 发起HTTP请求:浏览器发起读取文件的HTTP请求,,该请求报文作为TCP三次握手的第三次数据发送给服务器
  6. 服务器响应请求并返回结果:服务器对浏览器请求做出响应,并把对应的html文件发送给浏览器
  7. 关闭TCP连接:通过四次挥手释放TCP连接
  8. 浏览器渲染:客户端(浏览器)解析HTML内容并渲染出来

4.浏览器重绘与重排的区别?

  • 重排/回流(Reflow):当DOM的变化影响了元素的几何信息,浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。表现为重新生成布局,重新排列元素。

  • 重绘(Repaint): 当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。表现为某些元素的外观被改变

单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成重排之后,将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的,它们会破坏用户体验,并且让UI展示非常迟缓,而相比之下重排的性能影响更大,在两者无法避免的情况下,一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』,『重排』必然会出现『重绘』。

5.如何触发重排和重绘

任何改变用来构建渲染树的信息都会导致一次重排或重绘:

  • 添加、删除、更新DOM节点
  • 通过display: none隐藏一个DOM节点-触发重排和重绘
  • 通过visibility: hidden隐藏一个DOM节点-只触发重绘,因为没有几何变化
  • 移动或者给页面中的DOM节点添加动画
  • 添加一个样式表,调整样式属性
  • 用户行为,例如调整窗口大小,改变字号,或者滚动。

6.如何避免重排和重绘

  • 集中改变样式,不要一条一条地修改 DOM 的样式。

  • 不要把 DOM 结点的属性值放在循环里当成循环里的变量。

  • 为动画的 HTML 元件使用 fixedabsoultposition,那么修改他们的 CSS 是不会 reflow 的。

  • 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

  • 尽量只修改position:absolutefixed元素,对其他元素影响不大

  • 动画开始GPU加速,translate使用3D变化

7.HTML5的新特性、语义化

  • 语义化标签:header nav main article section aside footer
  • 语义化优点:
    • 没CSS样式的情况下,页面整体也会呈现很好的结构效果
    • 代码结构清晰,易于阅读,
    • 利于开发和维护 方便其他设备解析(如屏幕阅读器)根据语义渲染网页。
    • 有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同的标签来赋予不同的权重

8.什么是块级格式上下文?BFC(块级格式上下文)

BFC(Block Formatting Context)的英文缩写简称,block可以理解为一个简单的盒模型, Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。

BFC的触发条件:

  • 根元素,也就是html根标签;
  • position:fixed/absoluted;
  • float属性值不是none的;
  • overflow属性值不是visible的;
  • display属性值:inline-display/table-cell/table-caption/flex/inline-flex;

BFC的作用:

  • bfc内部元素的布局不受外部元素影响。
  • bfc区域不会出现margin重叠
  • bfc区域计算高度时候会自动计算浮动元素。
  • bfc区域不会和浮动元素重合。

9.JS中的8种数据类型及区别

基本数据类型:Number、String 、Boolean、Null和Undefined

引用类型数据:Object 、Array 、Function 、Data等

10.JS中数组类型检测方案

1.typeof 2.instanceof 3.Object.prototype.toString.call()

11.作用域和作用域链

定义:简单来说作用域就是变量与函数的可访问范围,由当前环境与上层环境的一系列变量对象组成
1.全局作用域:代码在程序的任何地方都能被访问,window 对象的内置属性都拥有全局作用域。
2.函数作用域:在固定的代码片段才能被访问

作用域链参考链接:一般情况下,变量到 创建该变量 的函数的作用域中取值。但是如果在当前作用域中没有查到,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。

12.谈谈对闭包的理解

在js中变量的作用域属于函数作用域, 在函数执行完后,作用域就会被清理,内存也会随之被回收,但是由于闭包函数是建立在函数内部的子函数, 由于其可访问上级作用域,即使上级函数执行完, 作用域也不会随之销毁, 这时的子函数(也就是闭包),便拥有了访问上级作用域中变量的权限,即使上级函数执行完后作用域内的值也不会被销毁。

13.原型和原型链

原型关系:

  • 每个 class都有显示原型 prototype
  • 每个实例都有隐式原型 _ proto_
  • 实例的_ proto_指向对应 class 的 prototype

原型: 在 JS 中,每当定义一个对象(函数也是对象)时,对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性,这个属性指向函数的原型对象

**原型链 **:函数的原型链对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针是指向上一层的原型对象,而上一层的原型对象的结构依然类似。因此可以利用__proto__一直指向Object的原型对象上,而Object原型对象用Object.prototype.__ proto__ = null表示原型链顶端。如此形成了js的原型链继承。同时所有的js对象都有Object的基本防范

14.说说你对promise对象的理解:

  • promise是异步编程的一种解决方法,从语法上说promise是一个对象,从它可以获取异步操作的消息
  • promise主要作用是:可以把异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,promise对象提供了统一的接口,使得控制异步操作更简单
  • promise对象的特点:对象状态不受外界影响(公3种pending(进行中),resolved(已完成),reject(已失败))。 只有异步操作的结果可以决定是当前哪一种状态,任何其他操作都无法改变 一旦状态改变就不会再变,任何时候都可以得到这个结果。 promise对象改变只有两种可能:从pending到resolved,从pending到reject
  • promise对象的缺点:无法取消promise,一旦创建就立即执行,无法中途取消 如果不设置回调函数,promise内部抛出错误,不会反映到外部 当处于pending状态时,无法得知目前进展到那个阶段(刚刚开始还是即将完成)

15.js实现数据的绑定

知识点:object.defineProperty()

三个参数:

  • 第一个:要定义属性的对象
  • 第二个:要定义或者修改的属性的名称
  • 第三个:将被定义或者修改的属性的描述

16.ES6的新特性

新增了箭头函数、let、const、class类、模板字符串、解构赋值、…展开运算符、for of遍历、Map、Proxies等

17.js高阶函数

  • map:map()方法定义在JavaScript的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
  • filter:filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
  • sort排序算法:因为Array的sort()方法默认把所有元素先转换为String再排序,结果’10’排在了’2’的前面,因为字符’1’比字符’2’的ASCII码小。如果不知道sort()方法的默认排序规则,直接对数字排序,绝对栽进坑里!

18.link和@import的区别是什么

1.从属关系区别
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等

2.加载顺序区别
加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

5.权重区别(该项有争议,下文将详解)
link引入的样式权重大于@import引入的样式。

结论

就结论而言,强烈建议使用link标签,慎用@import方式。
这样可以避免考虑@import的语法规则和注意事项,避免产生资源文件下载顺序混乱和http请求过多的烦恼。

19.火狐浏览器和谷歌浏览器渲染页面的区别

1.chrome不管html读取完毕没有,总是有一个预加载的、img图片或者其他元素都是预加载上来了的,而firefox没有这个预加载的过程,中规中矩的等待整个html文件读取完毕,再加载各元素

共同的:

  1. js脚本执行阻塞了页面的渲染
  2. 样式的渲染都是css文件加载完毕后才开始的

20.forEach()和map()的区别

  1. forEach()方法没有返回值,而map()方法有返回值
  2. forEach()遍历通常都是直接引入当前遍历数组的内存地址,生成的数组的值发生变化,当前遍历的数组对应的值也发生变化。
  3. map()遍历后的数组通常都是生成一个新的数组,新的数组的值发生变化,当前遍历的数组值不会变化

21.介绍节流防抖原理、区别以及应用

节流:事件触发后,规定时间内,事件处理函数不能再次被调用。也就是说在规定的时间内,函数只能被调用一次,且是最先被触发调用的那次。

防抖:多次触发事件,事件处理函数只能执行一次,并且是在触发操作结束时执行。也就是说,当一个事件被触发准备执行事件函数前,会等待一定的时间(这时间是码农自己去定义的,比如 1 秒),如果没有再次被触发,那么就执行,如果被触发了,那就本次作废,重新从新触发的时间开始计算,并再次等待 1 秒,直到能最终执行!

使用场景
节流:滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
防抖:搜索框搜索输入,并在输入完以后自动搜索、手机号,邮箱验证输入检测、窗口大小 resize 变化后,再重新渲染。

你可能感兴趣的:(前端面试题,javascript,前端,css,es6)