星Blog

面试题系列均来自鱼皮的知识星球——编程导航 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 媒体查询，根据设备的屏幕尺寸和分辨率等信息，加载不同的样式文件或应用不同的样式规则，以便实现不同场景下的最佳效果。 响应式设计的优点包括可以提高用户体验、提高网站访问率和转化率、降低开发成本等。同时，响应式设计也有一些缺点，例如需要在各种设备上进行充分的测试和调试、可能需要加 ...

面试题系列均来自鱼皮的知识星球——编程导航 哪些 CSS 属性可以继承？在 CSS 中，并不是所有的属性都可以继承。下面是一些常见的可继承属性： font-family font-size font-weight font-style color letter-spacing word-spacing line-height text-align text-indent text-transform visibility 这些属性在父元素中设置后，子元素可以继承相同的属性值。但需要注意的是，这些属性只能继承，而不能被子元素覆盖。此外，并不是所有的 HTML 元素都可以继承这些属性，具体需要查看相关属性的文档。 什么是 BOM 和 DOM？分别列举一些它们的函数BOM和DOM都是JavaScript中的概念，但它们具有不同的作用。 BOM（Browser Object Model）是浏览器对象模型，它提供了一些浏览器窗口和框架的对象，并提供了一些操作这些对象的方法。BOM不是W3C标准，而是由浏览器厂商制定的。 下面是一些常见的BOM函数： alert()：在浏览器中显示一个警告框 ...

面试题系列均来自鱼皮的知识星球——编程导航 什么是 CSS 盒子模型？CSS 盒子模型（CSS box model）指的是用于布局和设计网页的 CSS 样式规范。CSS 盒子模型将每个 HTML 元素表示为一个矩形的盒子，这个盒子包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。 具体来说，盒子模型中各个部分的含义如下： 内容（content）：元素的实际内容，由 width 和 height 属性决定。 内边距（padding）：内容和边框之间的空间，由 padding 属性决定。 边框（border）：内容和外边距之间的边框，由 border 属性决定。 外边距（margin）：盒子边缘和其它元素之间的空间，由 margin 属性决定。 CSS 盒子模型中，盒子的总大小由这四个部分加起来决定，即 width + padding + border + margin。需要注意的是，CSS 盒子模型有两种，分别是标准盒子模型和怪异盒子模型。 标准盒子模型中，盒子的大小 = width + padding + bor ...