星哥の面试题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 ...