前端八股文经验分享：面试拷打经历 与 知识总结（纯个人总结）（三） - 持续更新ing

TZX_
257 阅读10分钟

1. 在长度为10的顺序表中插入一个节点，平均移动次数是（5次 —— n/2）

2. 在长度为13的顺序表中删除一个节点，平均移动次数是 （6次 —— (n-1)/2）

3. n个节点的环形拓扑结构有（n-1）条物理链

4. n个节点的星形拓扑结构有（n-1）条物理链

5. 主机网络地址为240.210.43.56，子网掩码为255.255.248.0，则子网地址是（240.210.40.0）

6. 远程window口令破解的工具是（hydra）

7. 两个div都形成了bfc，前一个div设margin-botton:20px; 后一个div设margin-top:16px; 则二者之间间隔为（20px）

8. OSI参考模型中，自上而下第一个提供端到端服务的层次是（传输层）、

9. Git与SVN冲突解决

  1. rebase时，不论发生什么，我们都处在no-branch中，都没有一个有效分支
  2. 使用git status查看项目，如果发现一个“.ditest ”文件，可以忽略它
  3. 如果想中止合并，使用“ git rebase--abort ”
  4. 手动修复完冲突的文件，还需要使用 “ git add ” 加入被修复的文件
  5. 然后使用 “ git rebse -- continue ” 继续更新
  6. 如果遇见提示 “ did you forget to call ‘ git add’ ？ ” 而实际冲突已经处理，那么可以使用“ git rebase -- abort ” 来跳过它
  7. 重复上面的步骤，直到rebase完成
  8. 在任何时候都可以使用git rebase -- abort 来终止操作

10. 一个页面用原生js和vue框架写有什么区别

js首先要获取到DOM对象，然后对DOM对象进行值的修改等操作

Vue是首先把值和js对象就行绑定，然后修改js对象的值，Vue框架就会自动更新DOM值

11. 为了元素可拖动，需要把（draggable）设为true

12. jquery 用（fadeOut）方法让元素淡出

13. for in 主要用于枚举对象的（*非符号键值

14. CSS媒体查询用（device-width）定义输出设备的屏幕可见宽度

15. 刷新页面用（window.location.reload）

16. （navigator）包含了有关客户端浏览器的信息

17. 用户在Internet上传输加密文件，加密密钥和解密密钥相同的加密模型是（对称加密）

18. （IP）协议运行在网络层

19. 监听dom事件的指令是（v-on）

20. em是根据什么来判断的

如果其元素本身有font-size，就是根据其本身字体大小计数

如果本身没有font-size才会去找父级元素

21. SSL工作在哪一层

以网络为例，SSL工作在传输层和应用层之间，对网络连接加密

22. 有向图各个定点你的出度和入读是？

在有向图中，所有顶点的入度之和是所有顶点出度之和的一倍

23. 递归的调用和返回过程更接近与哪种数据结构？（栈）

24. 哪种存储方式不可以在运行中改变程序位置（动态运行时装入方式）

25. 满二叉树1000个节点从根节点到最深节点的最长路径的节点数是（10）

26. 哪种数据结构最适合用来检查一段html代码中所有开始标签是否都有结束标签 （栈）

27. 不支持冒泡的鼠标事件是 （mouseleave）

28. HTML行内元素和块级元素的区别

  1. 行内元素： 会在一条直线上排列（默认宽度只与内容相关），都是同一行的，水平方向排列
    块级元素： 各占据一行（默认宽度是它本身父容器的100%），和父元素的宽度一致，与内容无关，垂直方向排列，块级元素从新行开始，结束接着一个断行
  2. 块级元素： 可以包含行内元素和块级元素
    行内元素： 不能包含块级元素，只能包含文本或其他行内元素
  3. 行内元素和块级元素属性不同
    主要是在盒模型属性上：行内元素设置
    width无效，height无效，margin无效，padding无效

29. =，==，=== 三者的区别

1）“=”             赋值符

2）“==”           等值符号，在运算之前不管是字符串或是其他类型，都会转化为number类型。只要值一直即可，类型不需要一致

3）“===”        恒等/等同符号，类型数值均相同才可以

30. JS事件捕获和冒泡的区别

一、捕获：从最外层的祖先元素，向目标事件进行捕获，但默认此时不会触发事件

二、冒泡：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

31. position有几种属性值

  • static      默认值
  • relative   相对于原本位置的定位，不脱离文档流，不影响其他元素
  • absolute 如果祖先设置了position，定位对象为祖先元素；如果没有设置祖先元素，则相对于body定位
  • fixed        特殊版的absolute，总是相对于body定位
  • sticky   在屏幕范围内该元素位置不受到定位影响，当将要移出偏移范围时，又会变成fixed

32. vue-router的原理

Vue Router的核心是，通过Vue.use注册插件，在插件的install方法中获取用户配置的router对象，当浏览器地址发生变化的时候，根据router对象匹配相应路由，获取组件，并将组件渲染到试图上

33. Web Worker

web worker 就是在web应用程序中使用的worker，这个worker独立于web主线程的，在后台运行的线程

web worker的优点是可以将工作交给独立的其他线程去做，这样就不会阻塞主线程

34. vue指令的一下缩写

  • v-on        用于监听DOM事件
  • v-bind     绑定属性之类的
  • v-model  数据双向绑定

35. 双向绑定

把Model绑定到View，用JS更新Model时，View会自动更新，用户更新View时，Model的数据也会自动更新

以Vue为例，来看看Vue中的双向数据绑定流程是什么

  1. new Vue() 首先执行初始化，对data执行响应化处理，这个过程发生Observe中
  2. 同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化试图，这个过程发生在Compile中
  3. 同时定义一个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数
  4. 由于data的某个key在一个视图中可能出现多次，所以每个key都需要一个管家Dep来管理多个Watcher
  5. 将来data中数据一旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数

流程图如下：

1693209528876.png

36. 内存泄漏如何查看

  1. windows的任务管理器，运行程序，然后在任务管理器里面查看“内存使用”和“虚拟内存大小”两项，当程序请求了它所需要的内存之后，如果虚拟内存持续增长的话，就说明这个程序有内存泄漏的问题，如果内存泄漏的数目非常小，需要比较长的时间才能看出来
  2. 最简单的方法是使用CompuWare的BoundChecker之类的工具检测，但是价格比较贵

37. 如何定位内存泄露

一、使用Chrome DevTools     

        Performance

        打开准备分析的页面和DevTools的Performance面板，勾选Memory并开始录制，在模拟用户操作一段时间后停止录制，DevTools会将这段时间内的页面行为活动进行记录和分析

        观察内存时间线，如果内存占用成阶梯状一直上升，则可能存在内存泄漏，按需选取时间线中的区域片段，检查对应时间段内的活动类型和时间占用，作为排查和定位的辅助办法

        Memory

        打开准备分析的页面和DevTools面板，按需生成快照，多次生成进行对比，排查泄漏对象，根据路径检查代码

二、Nodejs中的内存泄漏定位

        启动Nodejs时带上 -- inspect 参数，以便利用Chrome DevTools 工具生成Memory数据

38. React 生命周期

1693213912871.png

  1. 在React16新的生命周期弃用了componentWillMount，componentWillReceiveProps，componentWillUpdate

 2. 新增了getDerivedStateFromProps，getSnopshotBeforeUpdate来替代弃用的三个钩子函数

39. 长链接，短链接

1693214330531(1).png

传输层常用的协议为TCP和UDP
TCP协议用于一般的请求响应
UDP用于即时通讯，如视频，音频，通话信号的传输

40. setTimeout / setInterval 定时不准确的原因及解决办法

原因：

  • 浏览器中所有的JS都在单线程上执行，所以异步事件仅在线程空闲时才会被调度运行
  • 为了控制要执行的代码，JS配置了一个任务队列，这些异步事件任务会按照将它们添加到队列的顺序执行
  • setTimeout() 的第二个参数（延时时间），只告诉JS再过多长时间把当前任务添加到队列中，如果队列为空，则立即执行；如果不为空，就要等前面的代码执行完毕以后再执行

解决办法：

  • 动态计算时差（仅针对循环定时，只起修正作用）
  • 使用Web Worker

41. 反转链表

leetcode 206

var reverseList = function (head) {
    let prev = null
    while (head) {
        let next = head.next
        head.next = prev
        prev = head
        head = next
    }
    return prev
};

42. this指向问题

//testFunc为普通函数
var testFunc = function () {
    console.log(this)
}
//testFunc为箭头函数
var testFunc = () => {
    console.log(this)
}

var objA = { testFunc: testFunc }
var objB = {}
var testFuncBind = testFunc.bind(objA)
var ttfun = objA.testFunc

//testFunc为箭头函数和普通函数的清情况下，以下代码分别输出什么？
testFunc()
objA.testFunc()
testFuncBind()
testFunc.apply(objA)
testFuncBind.apply(objB)
ttFun()
//简要解释一下你的答案

箭头函数：window        window        window        window        window        window

普通函数：window        testFunc        testFunc        testFunc        testFunc        window

43. 以下代码得输出结果是什么？请作出简要解释

setTimeout(function () {
    const p = new Promise(function (r, j) {
        console.log(1)
        r()
    })
    p.then(() => {
        console.log(2)
    })
    console.log(3)
}, 1000)
const np = new Promise((r, j) => {
    console.log(5)
    r()
}).then(() => {
    setTimeout(function () {
        console.log(6)
    }, 0)
    return 7
}).then(n => {
    console.log(n)
})
console.log(4)

5        4        7        6        1        3        2

44. gird 和 flex 得区别

1）flex布局是一维布局，适合做局部布局，比如导航栏组件

2）grid是二维布局系统，通常用于整个页面的规划

45. 防抖和节流的区别，及各自的应用场景

一、防抖

        防抖策略：当事件被触发后，延迟n秒后再执行回调函数，如果在n秒内事件再次触发，则重新计时

        应用场景：用户在输入框连续输入一串字符时，可以通过防抖策略，只有在输入完成后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源

二、节流

        节流策略：可以减少一段事件内事件的触发频率

        应用场景：1. 鼠标不断触发某事件时，如点击，只在单位时间内触发一次

                          2. 懒加载时要监听计算滚动条的位置，但不必要每次滑动都触发，可以降低计算频率，而不必要浪费CPU资源

46. 页面下滑到底部触发加载更多时防抖还是节流？（防抖）

47. 在输入框输入内容，失焦后请求接口对比是否输入正确，用防抖还是节流？（防抖）

48. 为什么要使用事件委托

每绑定一个事件处理器都是有代价的：

  • 要么增加页面负担（更多的JS代码）
  • 要么增加了运行期的执行时间（因为JS代码多）
  • 绑定事件时候访问或修改dom越多，越耗时
  • 浏览器跟踪每个事件处理器也需要耗更多内存

因此，可以使用事件委托，事件委托基于，事件会逐层冒泡至其父元素实现的，只需要给外层元素绑定一个事件，就可以让其子元素上的所有事件触发

49. Promise 的状态

  • 初始状态        Pending
  • 成功状态        Resolved / Fulfilled
  • 失败状态        Rejected

50. 看代码说输出顺序

new Promise((resolve, reject) => {
    console.log(1)
    resolve(3)
    console.log(2)
}).then(res => {
    console.log(res)
})
console.log(4)

1        2         4        3

avatar
文章
阅读
粉丝