字节前端一面凉经

重构需要从哪些方面考虑？
重构的目的是什么？
前端上提高性能的方法？
为什么要减少HTTP请求？（这里应该是要回答请求的过程和性能之间的关系）
怎么减少重排和重绘？
如果不把DOM属性不放在循环里面，具体应该怎么做
从敲下URL到服务端渲染的页面最终能够去进行连接交互之间，发生了哪些步骤？
服务端渲染页面和客户端渲染页面有哪些区别？
JS中有哪些数据类型？
如果判断一个变量是否是一个数组？
题目：用async/await实现1秒后打印
题目：判断是否是“回文”字符串

作者：爱编程的小鱼
链接：www.nowcoder.com/discuss/519…
来源：牛客网

字节跳动前端一面

自我介绍

聊项目
聊优化

图片懒加载实现？

图片懒加载是一种优化网页性能的技术，它延迟加载页面中的图片，直到它们出现在用户视野中或即将出现在用户视野中。这可以减少页面加载时间，提高用户体验。以下是实现图片懒加载的一般步骤：

将图片的 src 属性替换为占位符：在 HTML 中，将图片标签（<img>）的 src 属性替换为一个占位符，例如一张小尺寸、高度和宽度都为0的透明图片（或者一个 loading 动画）。这样可以避免在页面加载时立即请求所有图片。

<img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Lazy-loaded Image">

监听滚动事件：使用 JavaScript 监听页面的滚动事件，当用户滚动页面时，检查每个图片是否出现在视窗内。
判断图片位置：对于可见的图片，将其 data-src 属性的值赋给 src 属性，以触发图片的加载。
实现代码示例：

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = document.querySelectorAll("img[data-src]");
  
    const lazyLoad = function() {
        lazyImages.forEach(function(img) {
            if (img.getBoundingClientRect().top < window.innerHeight) {
                img.src = img.dataset.src;
                img.removeAttribute("data-src");
            }
        });
    };
  
    lazyLoad(); // 初始化页面加载时，加载可视区域内的图片
  
    // 滚动事件监听
    window.addEventListener("scroll", lazyLoad);
});

这段代码会在页面加载完成后，初始化加载可见区域内的图片，并监听滚动事件，在用户滚动页面时动态加载可见区域内的图片。

git相关
CSS 定位有哪些？

CSS 中常用的定位方式包括：

静态定位（static）：元素的默认定位方式，按照文档流正常排列。无法通过 top、bottom、left、right 属性进行定位。
相对定位（relative）：相对于元素原本在文档流中的位置进行定位。可以通过 top、bottom、left、right 属性进行微调，但仍然占据文档流中的位置。
绝对定位（absolute）：相对于最近的已定位（父级元素有定位属性）祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（一般是 <html> 元素）进行定位。脱离文档流，不占据文档流中的位置。
固定定位（fixed）：相对于浏览器窗口进行定位，即使页面滚动，元素也会固定在窗口的相同位置。脱离文档流。
粘性定位（sticky）：结合了相对定位和固定定位的特性，当元素在屏幕中可见时，表现为相对定位，当元素超出屏幕后，表现为固定定位。

CSS3如何指定盒子模型种类？

在 CSS3 中，可以使用 box-sizing 属性来指定盒子模型的种类。常见的两种盒子模型种类有：

content-box：默认值。在该模型下，元素的宽度和高度仅包括内容区域，不包括内边距（padding）、边框（border）和外边距（margin）。
border-box：在该模型下，元素的宽度和高度包括内容区域、内边距和边框，但不包括外边距。这意味着设置元素的宽度和高度时，其内容区域的大小将受到内边距和边框的影响，但不会影响元素的外部尺寸。

示例：

/* 使用 content-box 盒子模型 */
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 1px solid black;
}

/* 使用 border-box 盒子模型 */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 1px solid black;
}

在实际开发中，通常使用 border-box 盒子模型，因为它更符合开发者的预期，并且可以更方便地控制元素的尺寸。

JS基本数据类型？

Object是基本数据类型吗？

不是，Object 不是基本数据类型，而是一种复合数据类型。在 JavaScript 中，基本数据类型包括 Undefined、Null、Boolean、Number 和 String，而 Object 是一种复合数据类型，用于存储多个键值对（属性和值）的集合。对象可以包含任意数量的属性，每个属性都有一个对应的键（字符串）和值（任意类型的数据）。因此，Object 是一种用于表示复杂数据结构的数据类型。代码题：
千分位转换，合并升序数组

千分位转换

千分位转换是指将数字中的千位、百位等每三位一组的位置添加逗号，以提高数字的可读性。下面是一个简单的 JavaScript 函数来实现千分位转换：

function formatNumber(number) {
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// 示例
console.log(formatNumber(1234567)); // 输出: "1,234,567"

合并升序数组

合并升序数组是指将多个升序数组合并成一个升序数组。可以使用双指针法来实现这一目标。下面是一个 JavaScript 函数来实现合并升序数组：

function mergeSortedArrays(arr1, arr2) {
    let mergedArray = [];
    let i = 0;
    let j = 0;
    
    while (i < arr1.length && j < arr2.length) {
        if (arr1[i] < arr2[j]) {
            mergedArray.push(arr1[i]);
            i++;
        } else {
            mergedArray.push(arr2[j]);
            j++;
        }
    }
    
    while (i < arr1.length) {
        mergedArray.push(arr1[i]);
        i++;
    }
    
    while (j < arr2.length) {
        mergedArray.push(arr2[j]);
        j++;
    }
    
    return mergedArray;
}

// 示例
const arr1 = [1, 3, 5, 7];
const arr2 = [2, 4, 6, 8];
console.log(mergeSortedArrays(arr1, arr2)); // 输出: [1, 2, 3, 4, 5, 6, 7, 8]

这个函数接受两个已排序的数组作为输入，并返回一个合并后的升序数组。

目前记得问过上述问题，其他的我想起来再补充

后来反问和面试官也聊了好多，真的挺好的

作者：hellocpq
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

前端面试题详解整理47|定位方式，盒子模型，图片懒加载，Object类型，合并升序数组，千分位转换，