星哥の面试题Day23
面试题系列均来自鱼皮的知识星球——编程导航
有哪些 CSS 性能优化的操作或技巧？
使用合适的选择器：选择器的复杂度会影响 CSS 渲染性能。尽量使用简单的选择器，避免使用通配符和后代选择器等复杂的选择器。
避免使用 @import：@import 可以在 CSS 文件中导入其他 CSS 文件，但它会阻塞页面的渲染，影响性能。建议使用 link 标签来引入 CSS 文件。
避免使用 !important：!important 会影响 CSS 属性的优先级，而且会增加解析和渲染时间。建议尽量避免使用 !important。
避免使用 inline 样式：inline 样式的优先级最高，但它会增加 HTML 文件的大小，降低页面的加载速度。建议使用外部 CSS 文件和内部样式表。
压缩和合并 CSS 文件：压缩和合并 CSS 文件可以减小文件大小，提高页面加载速度。可以使用工具例如 CSSMin 和 YUI Compressor 等来进行压缩和合并操作。
使用 CSS Sprites：CSS Sprites 可以将多个小图片合并成一张大图片，并使用 CSS 来显示不同的部分，减少 HTTP ...
星哥の面试题Day22
面试题系列均来自鱼皮的知识星球——编程导航
React.memo() 和 useMemo() 的用法是什么，有哪些区别？React.memo() 和 useMemo() 是 React 中用于性能优化的两个钩子函数。
React.memo() 是一个高阶组件，用于优化组件的性能。它会比较组件的新旧 props，如果 props 没有发生改变，则跳过渲染，直接使用上一次渲染的结果。使用 React.memo() 可以避免组件不必要的重新渲染，从而提高应用程序的性能。
用法示例：
1const MemoizedComponent = React.memo(MyComponent);
useMemo() 是一个 Hook，用于缓存函数的计算结果。它可以缓存组件的 props 或其他数据的计算结果，只有当依赖项发生改变时才重新计算。
用法示例：
1const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
区别：
React.memo() 用于优化组件的性能，它会比较组件的新旧 props，如果 ...
星哥の面试题Day21
面试题系列均来自鱼皮的知识星球——编程导航
怎么使用 CSS3 来实现动画？你实现过哪些动画？css3 动画的实现的方案，大概有以下方案：
js 的 animation() 方法实现动画
@keyframes + animation：这是一个实现动画的组合，必须一起使用。
@keyframes——创建动画
（1）在 @keyframes 中用 from 和 to 创建动画
（2）在 @keyframes 中用 “百分比” 创建动画
（3）将 @keyframes 嵌套进要添加动画的元素的样式里
animation 执行动画
transition：表示过渡。transition 可以单独使用
transform：表示变形。使用 transform 实现动画时有两种选择：
transform + transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。
transform + @keyframes + animation：支持循环动画。在 @keyframes 里使用 transform 定义行为，animatio ...
星哥の面试题Day20
面试题系列均来自鱼皮的知识星球——编程导航
use strict 是什么？有什么作用？“use strict” 是 ECMAScript 5 引入的一种严格模式，它用于指示 JavaScript 引擎采用更严格的解析和执行模式。
当在 JavaScript 代码中使用 “use strict” 声明时，代码将会在严格模式下执行。严格模式包含了一些额外的规则和限制，有助于开发者避免一些常见的错误。
使用 “use strict” 的主要作用包括：
消除 JavaScript 中的一些不合理、不安全的语法，减少代码出错的可能性。
防止使用未声明的变量、函数，强制开发者进行声明。
强制函数中的 this 值只能在函数内部使用，避免在全局作用域中误用 this 值。
禁止删除变量、函数等，避免意外删除重要的变量和函数。
提高代码性能，因为 JavaScript 引擎可以更好地进行优化。
使用 “use strict” 的方式有两种：
在 JavaScript 文件开头使用 “use strict”。
在函数体内第一条语句中使用 “use strict”。
例如，在 JavaScript ...
星哥の面试题Day19
面试题系列均来自鱼皮的知识星球——编程导航
为什么 JS 要被设计为单线程？JS 被设计为单线程的主要原因是为了避免多线程编程所带来的复杂性。如果 JS 是多线程的，那么在处理并发问题时，需要考虑锁、同步等一系列复杂的问题，这会增加代码的复杂度和开发难度。
此外，JS 最初是为了解决网页交互的问题而诞生的，而网页交互的需求大部分是基于用户事件的，比如点击按钮、输入文本等。这些操作的响应速度要求很高，如果在响应事件的同时还要处理其他任务，可能会导致网页卡顿、响应变慢等用户体验不佳的问题。
因此，为了避免多线程所带来的复杂性和降低开发难度，并且满足网页交互的高响应速度需求，JS 被设计为单线程。虽然单线程有局限性，但是可以通过异步编程、事件循环机制等技术手段来实现高效的并发处理。
TypeScript 中的 Declare 关键字有什么用？TypeScript 中的 declare 关键字用于声明一个变量、函数、类等的类型信息，但不实现其具体实现。它主要用于在编译时进行静态类型检查，并在编译后移除声明的代码，以减少 JavaScript 文件的大小。
使用 declare 关键字声明的类型 ...
星哥の面试题Day18
面试题系列均来自鱼皮的知识星球——编程导航
Vue Router 的 $route 和 $router 对象有什么区别？在 Vue.js 中，$route 和 $router 都是 Vue Router 提供的对象，但它们的作用不同。
$route 对象代表着当前激活的路由信息，它包含了当前 URL 解析得到的信息，如当前路径、参数、查询参数等。$route 对象是一个只读对象，我们无法通过改变 $route 对象来改变当前路由。
$router 对象则是 Vue Router 的实例对象，它负责管理整个路由的状态，包括当前路径、路由参数、路由切换等。$router 对象可以通过编程的方式来改变当前路由，如通过 $router.push()、$router.replace()、$router.go() 等方法。
总的来说，$route 对象是获取当前路由信息的方式，$router 对象则是控制当前路由状态的方式。
介绍下从 HTTP/1.0、HTTP/1.1 到 HTTP/2 再到 HTTP/3 的演化过程，各个阶段相对前一阶段做了哪些优化HTT ...
星哥の面试题Day17
面试题系列均来自鱼皮的知识星球——编程导航
怎么解决跨域问题？跨域问题（Cross-Origin Resource Sharing，CORS）是由于浏览器的同源策略（Same-Origin Policy）导致的。同源策略指的是，如果两个 URL 的协议、主机名和端口号都相同，那么它们就是同源的，否则就是跨域的。当网页发起跨域请求时，浏览器会根据同源策略限制请求。解决跨域问题的方法有以下几种：
JSONP（JSON with Padding）
SONP 是一种跨域请求数据的方式，它利用了 <script> 标签不受同源策略限制的特性，可以从不同的域名请求数据。实现原理是在服务端生成一个 JavaScript 函数，客户端使用 <script> 标签请求该函数，服务端返回该函数的调用，并将需要传输的数据作为函数参数传入。
CORS（Cross-Origin Resource Sharing）
CORS 是一种通过添加一些 HTTP 头来允许浏览器跨域访问资源的机制，主要是服务端配置。服务端需要在响应头中添加 Access-Control-Allow-Origin ...
星哥の面试题Day16
面试题系列均来自鱼皮的知识星球——编程导航
什么是箭头函数？能使用 new 来创建箭头函数么？箭头函数是 ES6 中新增的一种函数定义方式，可以用来简化函数的定义和书写。箭头函数的特点是：简洁的语法、绑定 this 关键字、不能用作构造函数。
箭头函数使用箭头（=>）来定义，基本语法如下：
1(parameters) => { statements }
其中，parameters 是函数的参数列表，可以是一个或多个参数，多个参数之间用逗号分隔；statements 是函数的执行语句，可以是一个或多个语句，多个语句之间用花括号包裹起来。
在箭头函数中，this 关键字指向的是函数定义时所在的对象，而不是执行时所在的对象。这个特性有助于避免 this 的指向问题，使得代码更加简洁易读。
需要注意的是，箭头函数不能用作构造函数，也就是不能通过 new 关键字来创建实例。因为箭头函数没有自己的 this，而是继承了外层作用域的 this。如果用 new 来创建实例，就会出现意料之外的结果。
什么是 webpack 的热更新？它的实现原理是什么？web ...
星哥の面试题Day15
面试题系列均来自鱼皮的知识星球——编程导航
什么是 HTML 语义化？为什么要语义化？HTML语义化是指在编写HTML文档时，使用恰当的标签和属性，以及正确的结构来描述文档的内容、结构和意义。HTML语义化可以让Web开发人员更好地组织和呈现页面内容，使页面更具有可读性和可访问性，同时也有助于提高SEO优化效果。
具体来说，HTML语义化可以带来以下几个好处：
代码可读性：通过语义化的标签和结构，可以更好地描述文档的结构和意义，使代码更加清晰易懂，方便维护和修改。
改善用户体验：语义化的HTML结构可以提高页面的可读性和可访问性，使页面内容更容易被用户理解和使用，从而提高用户体验。
提高SEO优化效果：语义化的HTML结构可以提高搜索引擎对页面的理解和评价，使网站更容易被搜索引擎收录和排名，从而提高SEO优化效果。
更好的跨平台支持：语义化的HTML结构可以使页面更好地适应不同的浏览器和设备，提高页面的跨平台支持性和兼容性。
更好的可维护性：通过语义化的HTML结构，可以更好地区分页面的内容和样式，使CSS和JavaScript的编写更加简单和直观，从而提高代码的可维护性。
因此， ...
星哥の面试题Day14
面试题系列均来自鱼皮的知识星球——编程导航
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 ...