JS面试篇

1: 基本类型主要为以下7种

Number String Boolean Undefined null symbol bigInt

2: 数组的常用方法有哪些

push() unshift() splice() concat() splice()

3: JavaScript字符串的常用方法有哪些

slice() substr() substring() toLowerCase()、 toUpperCase() padEnd() padStart()

4: 谈谈 JavaScript 中的类型转换机制

显示转换隐式转换(+ - * ➗)

5: == 和 ===区别，分别在什么情况使用

6:深拷贝浅拷贝的区别？如何实现一个深拷贝

浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝

深拷贝：拷贝的是地址 _.cloneDeep() jQuery.extend() JSON.stringify()

~~SON.stringify()：但是这种方式存在弊端，会忽略undefined、symbol和函数~~

7: 说说你对闭包的理解？

一个函数和对其周围状态的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）原则：如果该闭包会一直使用，那么它可以作为全局变量而存在；但如果使用频率不高，而且占用内存又比较大的话，那就尽量让它成为一个局部变量。

8: 说说你对作用域链的理解

全局作用域函数作用域块级作用域

9: javaScript原型，原型链 ? 有什么特点？

概念：每个 class都有显示原型 prototype 每个实例都有隐式原型 _ proto_ 实例的_ proto_指向对应 class 的 prototype。一切对象都是继承自Object对象，Object 对象直接继承根源对象null。Function对象的__proto__会指向自己的原型对象，最终还是继承自Object对象

10: Javascript如何实现继承

原型链继承：两个实例使用的是同一个原型对象，内存空间是共享的 Child1.prototype = new Parent()

构造函数继承：只能继承父类的实例属性和方法，不能继承原型属性或者方法（借助 call）

组合继承(原型链+构造函数)

原型式继承

寄生式继承

寄生组合式继承

11: 谈谈this对象的理解

new绑定优先级 > 显示绑定优先级 > 隐式绑定优先级 > 默认绑定优先级

12: typeof 与 instanceof 区别

typeof 操作符返回一个字符串，表示未经计算的操作数的类型判断基本数据类型。优点：能够快速区分基本数据类型。缺点：不能将Object、Array和Null区分，都返回object

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象。缺点：Number，Boolean，String基本数据类型不能判断。可以使用 Object.prototype.toString.call() toString.call(null) 返回[object Null]

13:说说你对事件循环的理解

微任务：Promise.then MutaionObserver Object.observe（已废弃；Proxy 对象替代） process.nextTick（Node.js）

宏任务：script (可以理解为外层同步代码) setTimeout/setInterval UI rendering/UI事件 postMessage、MessageChannel setImmediate、I/O（Node.js）

14:如何实现一个new

创建一个空的简单Javascript对象（即{}）

链接该对象（即设置该对象的构造函数）到另一个对象

将步骤1新创建的对象作为this的上下文

如果该函数没有返回对象，则返回this

15: 浏览器有哪些缓存：先强缓存在协商缓存

强缓存有两个相关字段：Expires、Cache-Control HTTP1.0版本：使用的是Expires HTTP1.1版本：使用的是Cache-Control Expires:缓存过期时间，用来指定资源到期时间，是服务器端的具体时间点。 Cache-Control的优先级高于Expires。Expires是文本服务器端响应消息字段，在响应http请求时告诉浏览器在过期时间前浏览器可以从浏览器缓存中读取数据，而无需再次请求。强缓存有两个相关字段：Expires、Cache-Control HTTP1.0版本：使用的是Expires HTTP1.1版本：使用的是Cache-Control Expires:缓存过期时间，用来指定资源到期时间，是服务器端的具体时间点。 Cache-Control的优先级高于Expires。Expires是文本服务器端响应消息字段，在响应http请求时告诉浏览器在过期时间前浏览器可以从浏览器缓存中读取数据，而无需再次请求。

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有： HTTP1.0版本：Last-Modified / If-Modified-Since HTTP1.1版本：Etag / If-None-Match，

16:Map 和Object 的区别

一个Object 的键只能是字符串或者Symbols，但一个Map 的键可以是任意值。

Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。 Map 的键值对个数可以从size 属性获取，而 Object 的键值对个数只能手动计算。

17:Module 和 Common JS 区别？

ES6 module是编译时导出接口，CommonJS是运行时导出对象。

ES6 module输出的值的引用，CommonJS输出的是一个值的拷贝。

ES6 module导入模块的是只读的引用，CommonJS导入的是可变的，是一个普通的变量。

ES6 module语法是静态的，CommonJS语法是动态的。

ES6 module支持异步，CommonJS不支持异步

18:简单请求和复杂请求

简单请求:简单请求不会触发CORS预检请求。

复杂请求: CORS请求会在正式通信之前进行一次HTTP查询请求，称为预检请求。

19:排序算法：

直接排序 O(n^2) 空间复杂度是1 稳定的

冒泡排序 o(n^2) 稳定的

快速排序平均时间复杂度 nlog2^n 最坏 o(n^2) 不稳定排序

选择排序 o(n^2) 不稳定的

堆排序 nlog2^n

二路归并排序 nlog2^n

20:垃圾回收：

垃圾回收的方式：

1）标记清除 
  当变量进入执行环境时，就标记这个变量“进入环境”，被标记为“进入环境”的变量是不能被回收的，因为他们正在被使用。当变量离开环境时，就会被标记为“离开环境”，
  被标记为“离开环境”的变量会被内存释放。
2）引用计数： 引用计数就是跟踪记录每个值被引用的次数
  当声明了一个变量并且将一个引用类型赋值给该变量的时候这个值的引用次数就为 1
  如果同一个值又被赋给另一个变量，那么引用数加 1
  如果该变量的值被其他的值覆盖了，则引用次数减 1
  当这个值的引用次数变为 0 的时候，说明没有变量在使用，这个值没法被访问了，回收空间，垃圾回收器会在运行的时候清理掉引用次数为 0 的值占用的内存

V8 垃圾回收机制：

  新生代的对象为存活时间较短的对象，简单来说就是新产生的对象，通常只支持 1～8M 的容量，而老生代的对象为存活事件较长或常驻内存的对象，
  简单来说就是经历过新生代垃圾回收后还存活下来的对象，容量通常比较大
  新生代垃圾回收：
    新加入的对象都会存放到使用区，当使用区快被写满时，就需要执行一次垃圾清理操作
    当开始进行垃圾回收时，新生代垃圾回收器会对使用区中的活动对象做标记，标记完成之后将使用区的活动对象复制进空闲区并进行排序，随后进入垃圾清理阶段，即将非活动对象占用的空间清理掉。最后进行角色互换，把原来的使用区变成空闲区，把原来的空闲区变成使用区
    当一个对象经过多次复制后依然存活，它将会被认为是生命周期较长的对象，随后会被移动到老生代中，采用老生代的垃圾回收策略进行管理
    另外还有一种情况，如果复制一个对象到空闲区时，空闲区空间占用超过了 25%，那么这个对象会被直接晋升到老生代空间中，设置为 25% 的比例的原因是，当完成 Scavenge 回收后，空闲区将翻转成使用区，继续进行对象内存的分配，若占比过大，将会影响后续内存分配
  老生代垃圾回收：
    相比于新生代，老生代的垃圾回收就比较容易理解了，上面我们说过，对于大多数占用空间大、存活时间长的对象会被分配到老生代里，因为老生代中的对象通常比较大，
    如果再如新生代一般分区然后复制来复制去就会非常耗时，从而导致回收执行效率不高，所以老生代垃圾回收器来管理其垃圾回收执行，
    它的整个流程就采用的就是上文所说的标记清除算法了
    首先是标记阶段，从一组根元素开始，递归遍历这组根元素，遍历过程中能到达的元素称为活动对象，没有到达的元素就可以判断为非活动对象
    清除阶段老生代垃圾回收器会直接将非活动对象，也就是数据清理掉

补充:

websocket：使用心跳机制：为了保证连接的可持续性和稳定性和节约流量问题.使用心跳机制原因：客户端可以检查到错误服务端检测不到

setTimeout 和 setInterval 区别
setTimeout 最小执行时间是4ms
setInterval 最小执行时间是 10ms

封装一个可复用的组件，需要满足什么条件：

1: 低耦合， 组件之间的依赖越小越好
2: 最好 从父级传入信息，不要在公共组件中请求数据
3: 传入的数据要进行校验
4: 处理事件的方法写在父组件中

script 标签 async和 defer区别

async：指外部js文件和当前html页面同时加载（异步加载），在当前js文件加载完成后，执行js代码
      但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞
defer：指外部js文件和当前html页面同时加载（异步加载），但只在当前页面解析完成之后执行js代码
    这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞

100w数据如何渲染：

    1: 下拉式加载
    2: 分批渲染
    3: 可是窗口化
    4: 懒加载

CSS面试篇

1:说说你对盒子模型的理解?

标准盒子模型，是浏览器默认的盒子模型一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

IE 怪异盒子模型: 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

2:谈谈你对BFC的理解

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

3:怎么理解回流跟重绘？什么场景下会触发？

回流：

   概念：当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流/重排。
    触发条件：
    页面的首次渲染
    浏览器的窗口大小发生变化
    元素的内容发生变化
    元素的尺寸或者位置发生变化
    元素的字体大小发生变化
    激活CSS伪类
    查询某些属性或者调用某些方法
    添加或者删除可见的DOM元素

重绘

    概念：当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。
    触发条件：
    color、background 相关属性：background-color、background-image 等
    outline 相关属性：outline-color、outline-width 、text-decoration
    border-radius、visibility、box-shadow当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制 颜色 文本方向 阴影（外观发生改变）
    概念：当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。
    触发条件：
    color、background 相关属性：background-color、background-image 等
    outline 相关属性：outline-color、outline-width 、text-decoration
    border-radius、visibility、box-shadow
避免：
避免设置多层内联样式。
如果需要设置动画效果，最好使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素。

4:让Chrome支持小于12px 的文字方式有哪些？

zoom

-webkit-transform:scale()

5:请简述CSS的权重规则

一个行内样式+1000，一个id+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选择器+1。

6:CSS3和H5新特性

CSS3新特性：

  1.颜色：新增RGBA，HSLA模式 
  2. 文字阴影（text-shadow） 
  3. 边框： 圆角（border-radius）边框阴影： box-shadow 
  4. 盒子模型：box-sizing 
  5. 背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局 
  6. 渐变：linear-gradient、radial-gradient 
  7. 过渡：transition，可实现动画 
  8. 自定义动画 
  9. 在CSS3中唯一引入的伪元素 ：selection. 
  10. 媒体查询，多栏布局 
  11. border-image 
  12. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y) 
  13. 3D转换 
  14.新增选择器：属性选择器、伪类选择器、伪元素选择器。

h5 新特性；

  1. 拖拽释放(Drag and drop) API 
  2. 语义化更好的内容标签（header,nav,footer,aside,article,section） 
  3. 音频、视频API(audio,video) 
  4. 画布(Canvas) API 
  5. 地理(Geolocation) API 
  6. 数据存储 localStorage、sessionStorage  
  7. 表单控件，calendar、date、time、email、url、search

7:display:none 与 visibility:hidden 的区别

Display:none 会让元素完全从渲染树中消失，渲染时不会占据任何空间；

visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见

性能相关：修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

8:link和@import的区别

link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。

link 支持使用 Javascript 控制 DOM 去改变样式；而@import不支持。

2024前端面试总结(JS和CSS系列

JS面试篇

CSS面试篇