星Blog - Peter Qiu 的技术博客

面试题系列均来自鱼皮的知识星球——编程导航 什么是 HTML 语义化？为什么要语义化？HTML语义化是指在编写HTML文档时，使用恰当的标签和属性，以及正确的结构来描述文档的内容、结构和意义。HTML语义化可以让Web开发人员更好地组织和呈现页面内容，使页面更具有可读性和可访问性，同时也有助于提高SEO优化效果。 具体来说，HTML语义化可以带来以下几个好处： 代码可读性：通过语义化的标签和结构，可以更好地描述文档的结构和意义，使代码更加清晰易懂，方便维护和修改。 改善用户体验：语义化的HTML结构可以提高页面的可读性和可访问性，使页面内容更容易被用户理解和使用，从而提高用户体验。 提高SEO优化效果：语义化的HTML结构可以提高搜索引擎对页面的理解和评价，使网站更容易被搜索引擎收录和排名，从而提高SEO优化效果。 更好的跨平台支持：语义化的HTML结构可以使页面更好地适应不同的浏览器和设备，提高页面的跨平台支持性和兼容性。 更好的可维护性：通过语义化的HTML结构，可以更好地区分页面的内容和样式，使CSS和JavaScript的编写更加简单和直观，从而提高代码的可维护性。 因此， ...

面试题系列均来自鱼皮的知识星球——编程导航 JS 如何顺序执行 10 个异步任务？JS 中可以使用 Promise 和 async/await 来顺序执行异步任务。 使用 Promise 可以通过 then() 方法的链式调用来实现顺序执行异步任务，例如： 123456789101112131415161718192021222324function asyncTask1() { return new Promise(resolve => { setTimeout(() => { console.log('Async task 1'); resolve(); }, 1000); });}function asyncTask2() { return new Promise(resolve => { setTimeout(() => { console.log('Async task ...

面试题系列均来自鱼皮的知识星球——编程导航 CSS 中，有哪些方式可以隐藏页面元素？有什么区别?display:none(元素不可见，不占据空间，无法响应点击事件,会触发重排重绘) visibility:hidden(元素不可见，占据页面空间，无法响应点击事件，会触发重绘) opacity:0(元素不可见，占据页面空间，可以响应点击事件,会触发重绘) 设置height、width模型属性为0,有内容还要设置overflow:hidden;(元素不可见，不占据页面空间，无法响应点击事件) position:absolute(脱标定位到页面外,元素不可见，不影响页面布局) clip-path(元素不可见，占据页面空间，无法响应点击事件) 什么是 JS 对象的可枚举性（enumerable）？什么是 JS 对象的可枚举性对象的可枚举型是指： 对象中某些属性是否可以被 for…in 循环或者 Object.keys()函数枚举到，如果一个属性是可枚举的，则会出现在枚举过程中，反之则不会。 每个属性都有一个名字和一个属性描述符，属性描述符里面包括了该属性的许多特性，如可枚举性、可写性、可配置性和 ...

面试题系列均来自鱼皮的知识星球——编程导航 JS 脚本延迟加载的方式有哪些？JS 脚本的延迟加载主要有以下几种方式： async 属性：该属性可以使脚本异步加载，即在页面加载过程中不会阻塞页面的渲染和其他资源的加载。但是，异步执行的脚本不能保证执行顺序。 1<script src="test.js" async></script> defer 属性：该属性也可以使脚本异步加载，但是会在 DOMContentLoaded 事件之前执行，也就是在页面加载完成之后执行，可以保证脚本之间的执行顺序。 1<script src="test.js" defer></script> 动态添加 script 标签：可以在页面加载完成后，通过 JavaScript 动态添加 script 标签，实现延迟加载。 123var script = document.createElement('script');script.src = 'test.js';document.b ...

面试题系列均来自鱼皮的知识星球——编程导航 前端有哪些实现跨页面通信的方法？前端有以下几种实现跨页面通信的方法： Cookie：通过在页面间共享 Cookie 实现简单的跨页面通信，但是 Cookie 大小有限制，不能存储过多的数据。 localStorage 和 sessionStorage：HTML5 提供了本地存储的能力，可以通过 localStorage 或 sessionStorage 实现页面间数据共享，相比 Cookie 更加方便，但是也有大小限制。 BroadcastChannel API：这是一个 HTML5 新增的 API，允许多个页面间通信，可以广播消息或向特定页面发送消息。 SharedWorker：SharedWorker 是一种特殊类型的 Web Worker，可以在多个页面间共享数据，可以通过 postMessage API 实现消息传递。 postMessage API：这是 HTML5 提供的一种消息传递机制，可以在不同窗口或 iframe 间传递消息，可以用来实现跨域通信。 WebSocket：WebSocket 是一种持久化的协议，可以在浏览器和 ...

面试题系列均来自鱼皮的知识星球——编程导航 怎么用 CSS 实现一个宽高自适应的正方形？方法1、CSS3 vw单位 CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width， vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin 是相对当前视口宽高中 较小 的一个的百分比单位，同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。 1234<div class="box"></div><style> .box{width: 100vw;height: 100vw;background: #F2DEDE;}</style> 优点：简洁方便 缺点：浏览器兼容不好 方法2、设置垂直方向的padding撑开容器 在 CSS 盒模型中，margin, padding的百分比数值是相对 父元素的宽度计算的。只需 ...

面试题系列均来自鱼皮的知识星球——编程导航 用 CSS 和 JS 来实现动画分别有哪些优缺点？用 CSS 和 JS 来实现动画各有其优缺点，具体如下： 使用 CSS 实现动画的优缺点： 优点： 硬件加速：CSS 动画会使用浏览器的 GPU 来进行硬件加速，能够更加流畅和高效地运行。 简单易用：CSS 动画通常只需要几行代码就能实现基本的动画效果，不需要使用 JavaScript 来控制动画。 低资源占用：CSS 动画通常比 JavaScript 动画使用更少的 CPU 和内存资源，因此更适合用于简单的动画效果。 缺点： 限制较大：CSS 动画在实现复杂的动画效果时，受到限制较大，不能像 JavaScript 动画那样自由控制动画的速度、方向等。 兼容性问题：由于不同浏览器对 CSS 动画支持程度不同，因此在实现时需要考虑浏览器兼容性问题。 可维护性差：当动画效果较为复杂时，使用 CSS 实现的代码会变得冗长和难以维护，因此需要进行代码优化和结构设计。 使用 JavaScript 实现动画的优缺点： 优点： 自由控制：JavaScript 动画能够更加自由地控制动画的速度、方向 ...

面试题系列均来自鱼皮的知识星球——编程导航 JS 中数组是如何在内存中存储的？在 JavaScript 中，数组是一种特殊的对象，可以用于存储一组有序的数据。数组在内存中的存储方式与其他对象类似，都是存储在堆中。 JavaScript 中的数组是一种动态数组，可以自动扩展和收缩。当一个数组需要扩展时，JavaScript 引擎会为其分配更多的内存空间，同时将原有数据拷贝到新的内存空间中。当一个数组需要收缩时，JavaScript 引擎会将其内存空间释放掉。 在 JavaScript 中，数组的每个元素是通过其索引来访问的。索引是一个整数，用于指定数组中的一个元素。JavaScript 中的数组索引是以 0 开始的，也就是说，第一个元素的索引为 0，第二个元素的索引为 1，以此类推。 由于 JavaScript 中的数组是动态数组，所以它的索引可以随时改变。因此，当你访问一个数组时，需要确保你正在访问的索引是有效的，否则会导致数组越界的错误。 Vue 模板是如何编译的？经历了哪些过程？Vue 模板在运行时会被编译成渲染函数，最终生成 Virtual DOM，进行页面渲染。 Vue 模板编 ...

面试题系列均来自鱼皮的知识星球——编程导航 CSS3 新增了哪些特性？CSS3 是 CSS 的第三个版本，也是最新的 CSS 标准，它包含了 CSS2.1 的所有功能，并且增加了许多丰富的特性： 替代（IE）盒模型 选择器：属性选择器、结构伪类选择器、伪元素选择器 边框与圆角： border-radius、border-image、box-shadow 文本：text-overflow、word-wrap、word-break、text-shadow calc()：cal() 是 CSS3 新增的函数，用于动态计算属性值。 滤镜（filter）：filter 用于定义元素（一般是<img>）的可视效果（如模糊、饱和度）。 背景：background-image 、background-size、background-origin、background-clip 渐变（Gradients）：可以实现元素背景中两种或多种颜色之间的渐进过渡效果。 字体图标：字体图标是一种使用字体文件中的符号来代替图像的技术。与传统的图像图标相比，字体图标具有许多优点，如易于使用、可调整大小、可 ...

面试题系列均来自鱼皮的知识星球——编程导航 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？响应式设计是指通过一些技术手段，使得网站或应用在不同终端设备（如桌面电脑、平板电脑、手机等）上能够自适应地呈现最佳的用户体验。 响应式设计的基本原理是根据屏幕的尺寸和分辨率等信息，动态调整页面的布局和元素的样式，以便使页面在不同的设备上呈现出最佳的效果。实现响应式设计通常需要使用 HTML、CSS 和 JavaScript 技术，其中 CSS 媒体查询是实现响应式设计的核心技术之一。 为了实现响应式设计，开发人员需要为不同屏幕尺寸和分辨率等场景提供不同的布局和样式。一种实现方式是使用流体网格布局和百分比尺寸等技术，以便根据设备屏幕的宽度和高度等信息自适应地调整页面的布局和元素的大小。另一种实现方式是使用 CSS 媒体查询，根据设备的屏幕尺寸和分辨率等信息，加载不同的样式文件或应用不同的样式规则，以便实现不同场景下的最佳效果。 响应式设计的优点包括可以提高用户体验、提高网站访问率和转化率、降低开发成本等。同时，响应式设计也有一些缺点，例如需要在各种设备上进行充分的测试和调试、可能需要加 ...