1. CSS 中两个 .class1 .class2 从哪个开始解析

在 CSS 中,选择器 .class1 .class2 表示所有 class 为 class1 的元素中的 class 为 class2 的子元素。浏览器解析这个选择器时,从右向左解析。也就是说,浏览器首先找到所有 class 为 class2 的元素,然后检查这些元素的父级元素是否有 class1,从而应用样式。

.class1 .class2 {
  color: red;
}

2. Flex 布局相关的问题

Flexbox 是一种一维布局模型,可以在一个方向上高效地分配空间并对齐内容。以下是一些常见的 Flex 布局属性:

  • display: flex: 将容器变为 flex 容器。
  • flex-direction: 定义主轴方向。取值有 row(默认)、row-reversecolumncolumn-reverse
  • justify-content: 定义主轴上的对齐方式。取值有 flex-startflex-endcenterspace-betweenspace-aroundspace-evenly
  • align-items: 定义交叉轴上的对齐方式。取值有 stretch(默认)、flex-startflex-endcenterbaseline
  • flex-wrap: 定义是否换行。取值有 nowrap(默认)、wrapwrap-reverse

3. JS 的事件循环

JavaScript 是单线程的,使用事件循环来处理异步操作。事件循环的基本步骤:

  1. 执行栈:同步代码逐行执行,函数调用形成执行栈。
  2. 任务队列:异步操作(如 setTimeoutPromise)完成后,将回调函数放入任务队列。
  3. 事件循环:不断检查执行栈是否为空,如果为空则从任务队列中取出第一个任务并执行。
console.log('start');
setTimeout(() => {
  console.log('timeout');
}, 0);
console.log('end');

// 输出顺序: start -> end -> timeout

4. 写题:解析 URL,history 模式和 hash 模式的混在一起

function parseURL(url) {
  const parser = document.createElement('a');
  parser.href = url;
  return {
    protocol: parser.protocol,
    hostname: parser.hostname,
    port: parser.port,
    pathname: parser.pathname,
    search: parser.search,
    hash: parser.hash,
    host: parser.host
  };
}

const url = 'https://www.example.com:8080/pathname/?search=test#hash';
console.log(parseURL(url));

5. 写题:解析时间

function formatDate(date) {
  const yyyy = date.getFullYear();
  const mm = String(date.getMonth() + 1).padStart(2, '0');
  const dd = String(date.getDate()).padStart(2, '0');
  const hh = String(date.getHours()).padStart(2, '0');
  const min = String(date.getMinutes()).padStart(2, '0');
  const ss = String(date.getSeconds()).padStart(2, '0');
  
  return `${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`;
}

const date = new Date();
console.log(formatDate(date));

6. 缓存相关问题

强缓存协商缓存是 HTTP 缓存机制中的两种缓存策略:

  • 强缓存:不会向服务器发送请求,直接从缓存中读取资源。常见的头部字段有 ExpiresCache-Control
  • 协商缓存:会向服务器发送请求,服务器根据资源的状态决定是否使用缓存。常见的头部字段有 Last-ModifiedETag

一般存储较静态且不频繁更新的数据,如静态资源(CSS、JS、图片等)。

7. asyncdefer 的区别

  • async:异步加载脚本,脚本下载完成后立即执行,不保证顺序。
  • defer:异步加载脚本,脚本下载完成后按顺序执行,保证在文档解析完成后执行。
<script src="script1.js" async></script>
<script src="script2.js" async></script>

<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

8. Vue 的渲染机制

Vue 的渲染机制分为以下几个步骤:

  1. 初始化:解析模板,生成渲染函数。
  2. 响应式数据:数据变更时触发视图更新。
  3. 虚拟 DOM:每次渲染都会生成虚拟 DOM。
  4. diff 算法:比较新旧虚拟 DOM,找出变化。
  5. 更新 DOM:应用 diff 结果,更新真实 DOM。

HTML 的 doctype 有什么用

<!DOCTYPE html> 声明位于 HTML 文档的开头,用于告诉浏览器当前文档使用的是 HTML5 标准。它的主要作用是让浏览器以标准模式(standard mode)来解析和渲染网页,避免进入怪异模式(quirks mode),确保网页在不同浏览器中有一致的表现。

scriptlink 标签的加载顺序

  • <script> 标签:默认情况下,脚本会按顺序同步加载和执行。如果在 <head> 中包含 <script> 标签,页面会在脚本执行完成后才继续加载。可以通过 asyncdefer 属性来改变默认行为:

    • async:脚本异步加载,加载完成后立即执行,不保证顺序。
    • defer:脚本异步加载,加载完成后按顺序执行,保证在文档解析完成后执行。
  • <link> 标签:用于加载外部资源(如 CSS)。默认情况下,CSS 是同步加载和解析的,会阻塞渲染。

iframe 有了解过吗

iframe 元素用于在当前网页中嵌入另一个 HTML 文档。常见用途包括嵌入第三方内容(如广告、视频)、隔离 CSS 和 JavaScript 的作用域。使用 iframe 时需要注意安全问题,如跨站脚本(XSS)攻击,可以通过设置 sandbox 属性来限制 iframe 的行为。

行内元素水平垂直居中

对于一个行内元素或行内块元素,可以使用以下方法来实现水平和垂直居中:

  • 水平居中:使用 text-align: center
  • 垂直居中:如果父元素是一个 flex 容器,可以使用 align-items: centerjustify-content: center

例如:

<div style="display: flex; justify-content: center; align-items: center; height: 200px;">
  <span>Centered</span>
</div>

innerHTMLinnerText 区别

  • innerHTML:返回或设置元素的 HTML 内容,包括 HTML 标签。
  • innerText:返回或设置元素的文本内容,不包含 HTML 标签,受 CSS 样式影响(如 display: none 的元素不会包含在内)。

修改 DOM 耗时?为什么

修改 DOM 可能是耗时的,因为每次对 DOM 的修改都会触发浏览器的重绘(repaint)或回流(reflow),尤其是回流会涉及布局计算、重新渲染等一系列操作。频繁操作 DOM 会导致性能下降,建议使用批量操作或虚拟 DOM 来优化性能。

重绘(Repaint)和回流(Reflow)

  • 重绘:元素的外观发生改变(如颜色、背景)但没有影响布局时,浏览器会重新绘制元素。
  • 回流:元素的布局或几何属性发生改变(如大小、位置),会触发浏览器重新计算布局和渲染树,代价比重绘高。

Promise 的意义(回调地狱)

Promise 用于处理异步操作,以更直观和可读的方式管理异步任务,避免回调地狱。回调地狱是指回调函数嵌套过深,代码难以维护和调试。Promise 通过链式调用 .then() 方法解决这一问题:

fetchData()
  .then(response => process(response))
  .then(result => display(result))
  .catch(error => handleError(error));

回调和闭包

  • 回调:将一个函数作为参数传递给另一个函数,并在特定事件发生时调用该函数。常用于处理异步操作。
  • 闭包:函数和其外部环境的引用组合形成闭包。闭包允许函数访问外部函数作用域中的变量,即使在外部函数执行完毕之后。闭包常用于创建私有变量和函数。
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

这个示例中,返回的匿名函数形成闭包,持有对 count 变量的引用,因此可以在每次调用时增加 count 的值。

6. Webpack为什么打包、进行压缩之后,性能就会提高呢

Webpack 打包和压缩提高性能的原因
  1. 文件合并

    • 减少 HTTP 请求:Webpack 将多个模块和依赖合并成一个或多个文件,减少了浏览器发起的 HTTP 请求次数。现代浏览器对并行请求的数量有限制,减少请求数可以降低延迟和开销。
  2. 代码压缩

    • 文件大小减少:Webpack 使用工具(如 UglifyJS、Terser)压缩代码,去掉空格、注释和冗余代码,极大地减少了文件大小。文件越小,传输时间越短。
  3. 代码分割

    • 按需加载:Webpack 可以根据应用的需要进行代码分割(Code Splitting),只加载当前页面所需的代码。这样可以避免一次性加载所有代码,提升页面初始加载性能。
  4. 树摇(Tree Shaking)

    • 去除无用代码:Webpack 通过静态分析模块的依赖关系,去除没有实际使用的代码(Dead Code),从而减少打包后的文件体积。
  5. 模块热替换(HMR)

    • 开发效率:Webpack 提供模块热替换功能,在开发过程中只更新变化的部分,而不是整个页面,提升开发效率和体验。

示例配置:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    splitChunks: {
      chunks: 'all',
    },
  },
};

7. 为什么使用 Webpack

使用 Webpack 的理由
  1. 模块化支持

    • 多种模块格式:支持 ES6 模块、CommonJS、AMD 等模块格式,使开发者可以使用最新的 JavaScript 语法和标准。
  2. 强大的插件系统

    • 功能扩展:Webpack 提供丰富的插件(Plugins),如压缩、分包、代码分割等,方便扩展打包功能。
  3. 代码分割和懒加载

    • 优化性能:通过代码分割(Code Splitting)和懒加载(Lazy Loading),提升应用性能,减少初始加载时间。
  4. 开发工具集成

    • 热模块替换(HMR):实时更新代码,提高开发效率和体验。
    • 开发服务器:内置开发服务器(Webpack Dev Server),支持快速开发和调试。
  5. 配置灵活

    • 高可定制性:可以根据项目需求灵活配置,适应各种复杂场景。
  6. 生态系统

    • 社区和插件:强大的社区支持和丰富的插件库,方便解决各种问题。

8. 手写:数组实现 reducemap

手写 reduce 实现

reduce 方法接收一个回调函数和一个可选的初始值,通过回调函数累计处理数组的每个元素,最终返回累计结果。

Array.prototype.myReduce = function(callback, initialValue) {
  let accumulator = initialValue === undefined ? this[0] : initialValue;
  let startIndex = initialValue === undefined ? 1 : 0;
  
  for (let i = startIndex; i < this.length; i++) {
    accumulator = callback(accumulator, this[i], i, this);
  }
  
  return accumulator;
};

// 使用示例
const arr = [1, 2, 3, 4];
const sum = arr.myReduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
手写 map 实现

map 方法接收一个回调函数,返回一个新数组,每个元素为回调函数处理后的结果。

Array.prototype.myMap = function(callback) {
  const result = [];
  
  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }
  
  return result;
};

// 使用示例
const arr = [1, 2, 3, 4];
const doubled = arr.myMap(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

这些实现展示了如何用原生 JavaScript 来实现常用的数组方法,了解其内部工作原理。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部