腾讯前端必会面试题

VIP文章 yyds2026

已于 2022-09-26 13:34:25 修改

阅读量589

点赞数

文章标签：前端框架 javascript

于 2022-09-13 10:11:14 首次发布

本文链接：https://blog.csdn.net/yyds2026/article/details/126828008

版权

CDN的使用场景

**使用第三方的CDN服务：**如果想要开源一些项目，可以使用第三方的CDN服务
**使用CDN进行静态资源的缓存：**将自己网站的静态资源放在CDN上，比如js、css、图片等。可以将整个项目放在CDN上，完成一键部署。
**直播传送：**直播本质上是使用流媒体进行传送，CDN也是支持流媒体传送的，所以直播完全可以使用CDN来提高访问速度。CDN在处理流媒体的时候与处理普通静态文件有所不同，普通文件如果在边缘节点没有找到的话，就会去上一层接着寻找，但是流媒体本身数据量就非常大，如果使用回源的方式，必然会带来性能问题，所以流媒体一般采用的都是主动推送的方式来进行。

前端进阶面试题详细解答

为什么 0.1 + 0.2 != 0.3，请详述理由

因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。

我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为

// (0011) 表示循环
0.1 = 2^-4 * 1.10011(0011)

那么如何得到这个二进制的呢，我们可以来演算下

小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且得到的第一位为最高位。所以我们得出 0.1 = 2^-4 * 1.10011(0011)，那么 0.2 的演算也基本如上所示，只需要去掉第一步乘法，所以得出 0.2 = 2^-3 * 1.10011(0011)。

回来继续说 IEEE 754 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 0.1 和 0.2 都是无限循环的二进制了，所以在小数位末尾处需要判断是否进位（就和十进制的四舍五入一样）。

所以 2^-4 * 1.10011...001 进位后就变成了 2^-4 * 1.10011(0011 * 12次)010 。那么把这两个二进制加起来会得出 2^-2 * 1.0011(0011 * 11次)0100 , 这个值算成十进制就是 0.30000000000000004

下面说一下原生解决办法，如下代码所示

parseFloat((0.1 + 0.2).toFixed(10))

请实现 DOM2JSON 一个函数，可以把一个 DOM 节点输出 JSON 的格式

题目描述:

<div>
  <span>
    <a></a>
  </span>
  <span>
    <a></a>
    <a></a>
  </span>
</div>

把上诉dom结构转成下面的JSON格式

{
   
  tag: 'DIV',
  children: [
    {
   
      tag: 'SPAN',
      children: [
        {
    tag: 'A', children: [] }
      ]
    },
    {
   
      tag: 'SPAN',
      children: [
        {
    tag: 'A', children: [] },
        {
    tag: 'A', children: [] }
      ]
    }
  ]
}

实现代码如下:

function dom2Json(domtree) {
   
  let obj = {
   };
  obj.name = domtree.tagName;
  obj.children = [];
  domtree.childNodes.forEach((child) => obj.children.push(dom2Json(child)));
  return obj;
}

扩展思考:如果给定的不是一个 Dom 树结构而是一段 html 字符串该如何解析?

那么这个问题就类似 Vue 的模板编译原理我们可以利用正则匹配 html 字符串遇到开始标签结束标签和文本解析完毕之后生成对应的 ast 并建立相应的父子关联不断的 advance 截取剩余的字符串直到 html 全部解析完毕

分片思想解决大数据量渲染问题

题目描述:渲染百万条结构简单的大数据时怎么使用分片思想优化渲染

实现代码如下:

let ul = document.getElementById("container");
// 插入十万条数据
let total = 100000;
// 一次插入 20 条
let once = 20;
//总页数
let page = total / once;
//每条记录的索引
let index = 0;
//循环加载数据
function loop(curTotal, curIndex) {
   
  if (curTotal <= 0) {
   
    return false;
  }
  //每页多少条
  let pageCount = Math.min(curTotal, once);
  window.requestAnimationFrame(function () {
   
    for (let i = 0; i < pageCount; i++) {
   
      let li = document.createElement("li");
      li.innerText = curIndex + i + " : " + ~~(Math.random() * total);
      ul.appendChild(li);
    }
    loop