- 博客(177)
- 收藏
- 关注
RSS订阅原创 JS中的异步编程与Promise
这意味着微任务的优先级高于宏任务。requestAnimationFrame 的位置在事件循环中的具体位置是视浏览器的实现而定，但一般来说，它在宏任务执行完，渲染之前，这使得其可以获取到最新的布局和样式信息。而任务队列，就是一个存储待处理任务的队列，当我们使用 setTimeout、setInterval、ajax等API时，实际上是向任务队列中添加了一个任务。事件循环是 JavaScript 内部的一个处理过程，系统会在此处不断地循环等待，检查任务队列中是否有任务，如果有，就处理它。
2023-09-27 10:50:14
3295
13
原创 React项目中如何实现一个简单的锚点目录定位
锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节如何在React中实现锚点定位和平滑滚动目录自动高亮的实现思路处理顶部导航遮挡锚点的解决方案服务端渲染下的实现方案性能优化策略React中实现锚点定位,最简单的方式就是使用这个自定义hook。return (useScrollIntoView接受一个ref对象,当调用这个hook函数时,会自动滚动页面,使得ref对象在可视区域内。
2023-09-26 15:16:32
2179
45
原创 面试官：你了解axios的原理吗？有看过它的源码吗？
axios是一个基于 Promise 的 HTTP 请求客户端，具有强大的拦截器功能，支持请求和响应的拦截处理，同时提供了丰富的配置选项。在实际开发中，可以利用axios来发起 HTTP 请求，处理响应数据，实现前后端的数据交互。通过深入理解axios的原理和源码，可以更好地使用和扩展它，满足复杂的业务需求。
2023-09-25 10:14:08
884
10
原创 在项目中使用Service Worker 与 PWA
Web Worker 是浏览器内置的线程，用于执行非阻塞事件循环的 JavaScript 代码。由于 JavaScript 是单线程语言，一次只能处理一个任务。复杂任务的出现可能导致主线程被阻塞，严重影响用户体验。Web Worker 的作用是允许主线程创建 worker 线程，使它们可以同时运行。Worker 线程主要负责处理复杂的计算任务，然后将结果返回给主线程。简而言之，worker 线程执行复杂计算，同时保持页面（主线程）的流畅性，不会造成阻塞。
2023-09-24 13:37:46
590
3
原创 面试官：为什么说HTTPS比HTTP安全? HTTPS是如何保证安全的？
摘要算法是保证数据完整性的主要手段，也称为散列函数或哈希函数。它将任意长度的数据压缩成固定长度的唯一摘要字符串，类似于为数据生成数字"指纹"。摘要算法确保数字"指纹"与原文是完全等价的。因此，只需在原文后附上其摘要，即可确保数据的完整性。举例来说，若发送一条消息：“转账 1000 元”，并附上SHA-2摘要，网站接收后计算消息的摘要，将两个"指纹"进行对比，如果匹配，表明消息是完整可信的，没有被修改。机密性：通过混合算法实现。完整性：通过摘要算法实现。身份认证：通过数字签名实现。
2023-09-23 12:36:08
680
6
原创 面试官：说说React服务端渲染怎么做？原理是什么？
但是像一些事件处理的方法，是无法在服务端完成，因此需要将组件代码在浏览器中再执行一遍，这种服务器端和客户端共用一套代码的方式就称之为。浏览器开始进行渲染和节点对比，然后执行完成组件内事件绑定和一些交互，浏览器重用了服务端输出的。结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。路径，然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为。文件，用于监听3000端口的请求，当请求根目录时，返回。上面的过程中，已经能够成功将组件渲染到了页面上。
2023-09-20 10:09:16
801
13
原创 我对请求做了个性能小优化，提升了50%的页面性能
函数用于管理批量请求，它可以将多个独立的请求合并成一个批量请求，以减少不必要的网络请求次数。这样就会出现一个问题，后端服务可能扛不住我们这样频繁的请求，所以有什么办法解决呢？为例子，因为列表功能比较常见，详细分析下常见项目存在的一些问题，以及如何优化。那么干脆一点，我们请求完好友接口后，再根据用户Id，在App下偷偷请求。，用于存储待合并的请求项。这是我整理的学习资料，非常系统和完善，欢迎一起学习。的时候，打开会慢，所以这里一般会先做。这种场景，然后点击列表里面的具体。，但是这里也会存在一个问题，
2023-09-17 16:47:19
522
11
原创 requestAnimationFrame：优化动画和渲染的利器
requestAnimationFrame是浏览器提供的一个用于优化动画和渲染的API。它基于浏览器的刷新率，调度回调函数的执行，以确保动画和渲染的流畅性和高性能。使用requestAnimationFrame，开发者可以在每个浏览器刷新帧之前请求执行一个函数。浏览器会在适当的时机调用这个函数，以保证动画和渲染的协调性。通过与浏览器的合作，requestAnimationFrame可以避免不必要的渲染操作，并确保动画的效果更加平滑。
2023-09-16 23:21:27
632
2
原创 前端也能获取电池信息，5分钟带你了解奇奇怪怪的知识点
BatteryManager 对象提供了 level、charging、chargingTime 等属性反映电池状态。通过 Battery Status API,前端可以获取用户设备电池的相关信息,比如电量百分比、充电状态等。监听 chargingchange、levelchange 等事件可以感知状态变化。前端其实也能获取电池信息，以往都是通过客户端提供的JSBridge获取。这是我整理的学习资料，非常系统和完善，欢迎一起学习。
2023-09-15 10:18:35
483
10
原创 JavaScript事件流：深入理解事件处理和传播机制
W3C DOM3级事件进一步扩展了事件的类型和属性，引入了更多的事件类型和特性，以满足不断增长的前端开发需求。DOM3级事件规范定义了新的事件类型，如滚动事件、触摸事件、过渡事件等，以及一些新的事件属性和方法，提供更丰富的事件处理能力。通过在父元素上注册事件处理程序，可以利用事件冒泡机制，统一管理子元素的事件处理。它利用事件冒泡机制，在父元素上注册一个事件处理程序，处理多个子元素的相同事件。事件冒泡阶段是事件流的最后一个阶段，事件从目标元素开始向上冒泡，依次经过每个父元素，直到达到根节点。
2023-09-13 10:09:36
4178
51
原创 面试官：如何实现文件上传？说说你的思路
文件上传在日常开发中应用很广泛，比如在发微博、发微信朋友圈等操作中都会用到图片上传功能。由于浏览器的安全限制，浏览器不能直接操作文件系统，因此需要通过浏览器暴露出来的统一接口来访问文件，然后将文件内容读取到指定的内存中，并执行提交请求操作，将内存中的文件内容上传到服务端，服务端再解析前端传来的数据信息，最终将文件保存到服务器的文件系统中。文件上传需要设置请求头为，其中multipart表示互联网上的混合资源，即资源由多种元素组成，而form-data表示可以使用HTML Forms和POST方法上传文件。
2023-09-12 10:55:52
511
3
原创 没登录网页也能个性化推荐？5分钟带你了解浏览器指纹
浏览器指纹是一种用于识别用户设备的浏览器的唯一标识符。它通过收集设备和浏览器的各种信息，如用户代理、屏幕分辨率、字体、插件列表等，以创建一个唯一的标识符。浏览器指纹可用于多种用途，包括用户身份验证、设备追踪和数据分析。
2023-09-10 17:47:08
432
43
原创 面试官：如何理解CDN？说说实现原理？
CDN的目的是为了改善互联网的服务质量，通俗一点说其实就是提高访问速度。CDN构建了全国、全球级别的专网，让用户就近访问专网里的边缘节点，降低了传输延迟，实现了网站加速。通过CDN的负载均衡系统，智能调度边缘节点提供服务，相当于CDN服务的大脑，而缓存系统相当于CDN的心脏，缓存命中直接返回给用户，否则回源。
2023-09-08 10:18:05
479
15
原创 面试官：说说Node中的EventEmitter? 如何实现一个EventEmitter?
我们可以简单实现一个类，了解其基本原理。在实现过程中，需要维护一个包含所有事件的对象events。if (!if (!return;});if (!return;以上代码实现了onemit方法，分别用于添加事件监听器、触发事件和移除事件监听器。});// Output:// Event 1// Event 2// Output:// Event 1是Node.js中非常重要的一个模块，它实现了事件驱动的基本模式，让Node.js具备了处理异步操作的能力。
2023-09-07 10:14:24
598
49
原创 #面试官：说说对React refs 的理解？应用场景？
Refs在计算机中称为弹性文件系统（英语：Resilient File System，简称ReFS）React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素本质为返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。
2023-09-03 00:32:41
487
10
原创 面试官：说说TypeScript扩展类型定义
在 TypeScript 中，我们可以通过声明文件（.d.ts文件）来为现有的 JavaScript 库提供类型定义，或者为现有的类型添加额外的属性和方法。这个过程通常被称为“类型声明扩展”。在这篇文章中，我们将详细探讨如何通过声明文件扩展类型定义。在 TypeScript 中，声明文件是一种以.d.ts为扩展名的特殊文件，它不包含具体的实现，只包含类型声明。这些文件通常用来为已有的 JavaScript 库提供类型定义，使得我们可以在 TypeScript 代码中更安全、更方便地使用这些库。
2023-09-01 12:10:45
756
23
原创 面试官：说说Javascript数据类型和类型转换
在JavaScript中，当一个对象需要被隐式转换为数字时，会首先尝试调用对象的valueOf()方法，如果该方法返回的不是原始值（例如数字），则会接着尝试调用对象的toString()方法，将返回值转换为数字。遵循类型安全的比较、避免意外的类型转换、选择适当的类型转换技巧，并在性能和可读性之间找到平衡，都是编写优质JavaScript代码的重要因素。需要注意的是，对象的隐式类型转换的行为和结果可能会因对象的类型、实现方式以及具体的上下文而有所不同。在进行类型转换时，要权衡利弊，并确保代码易于理解和维护。
2023-08-30 10:18:33
317
1
原创 面试官：说说类型守卫？
自定义谓词函数类型守卫允许我们定义自己的函数，根据特定条件判断变量的类型，并在代码块内部收窄变量的类型范围。} else {// 输出: 78.53981633974483// 输出: 200在上面的示例中，我们定义了Shape类型，它可以是Circle或Rectangle。通过自定义的谓词函数isCircle，我们判断变量shape的类型是否是Circle，并在条件语句内部收窄变量的类型范围。通过使用自定义谓词函数类型守卫，我们能够根据特定的谓词条件执行相应的代码逻辑。
2023-08-27 19:40:24
296
原创 面试官：说说泛型和类型体操？
泛型和类型体操是 TypeScript 中强大的类型系统的关键组成部分。通过使用泛型，我们可以创建可重用、灵活和类型安全的代码。内置泛型函数提供了一些常用的类型转换工具，如PartialRequired和Pick，可以帮助我们更方便地处理类型操作。通过结合泛型、extends关键字、内置泛型函数和其他高级类型概念，我们能够在 TypeScript 中编写更复杂、类型安全的代码，并利用 TypeScript 的强大类型系统来提高代码的可读性、可维护性和可扩展性。
2023-08-26 10:38:53
308
1
原创 面试官：说说对受控组件和非受控组件的理解？应用场景？
受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据这时候当我们在输入框输入内容的时候，会发现输入的内容并无法显示出来，也就是input标签是一个可读的状态这是因为value被所控制住。当用户输入新的内容时，并不会自动更新，这样的话input内的内容也就不会变了如果想要解除被控制，可以为input标签设置onChange事件，输入的时候触发事件函数，在函数内部实现state的更新，从而导致input框的内容页发现改变因此，受控组件我们一般需要初始状态和一个状态更新事件函数。
2023-08-25 10:34:47
570
5
原创 面试官：为什么说HTTPS比HTTP安全? HTTPS是如何保证安全的？
实现完整性的手段主要是摘要算法，也就是常说的散列函数、哈希函数可以理解成一种特殊的压缩算法，它能够把任意长度的数据“压缩”成固定长度、而且独一无二的“摘要”字符串，就好像是给这段数据生成了一个数字“指纹”
2023-08-24 10:20:19
394
8
原创 从V友的三连事件，谈谈在职场中如何进行有效汇报和工作？
一直有逛v2ex的习惯，大概前2个星期看到下面v友的帖子，然后一直持续追更，颇有感触，借此记录一下，今日就不更技术文章了向上管理其实总结就是一句话为老板分担问题，除了做好自身工作以外,还要考虑价值，如何做好向上管理，那就是少抱怨，多做事，年底等赔偿。
2023-08-22 11:16:07
257
3
原创 分享一次我github被封的经历以及迁移指南
上星期四，我像往常一样起床上班，地铁上收到了微信消息这时候就感觉到不对劲了，到了公司我登录了自己的github，发现被封了毫无征兆，我的gmail也没有收到github邮箱。因为这个github账号我一直用来存放我的网站资料以及blog，所以很多issue都在里面，另外还有部分图床和博客示例,这个被封禁，所有资料都迁移不了。
2023-08-20 17:52:05
6821
69
原创 面试官：说说你对vue的mixin的理解，有什么应用场景？
Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。
2023-08-18 11:44:33
423
7
原创 2023 年了解即将推出的 CSS 功能
CSS 锚点定位是一项强大的新功能，可用于创建各种交互元素，例如工具提示、模式和弹出窗口。下面是一个元素的多个处理程序的示例，其中工具提示通过将其与图表的最大值和最小值相结合来锚定（来源：developers.chrome.com）。CSS 子网格是 CSS 网格布局的一项功能，允许你在单个网格容器中创建嵌套网格，并且还有新功能即将推出！CSS 锚点定位是一项实验性的新 CSS 功能，允许你相对于页面上的另一个元素定位一个元素。子网格嵌套在网格容器内。子网格有自己的网格布局，它独立于网格容器的网格布局。
2023-08-16 10:17:42
419
5
原创 写给前端同学的Nginx配置指南
Nginx的主配置文件(配置块功能描述全局块与Nginx运行相关的全局设置events块与网络连接有关的设置http块代理、缓存、日志、虚拟主机等的配置server块虚拟主机的参数设置（一个http块可包含多个server块）location块定义请求路由及页面处理方式配置文件示例一个比较全的配置文件示例如下。# 全局段配置 # ------------------------------ # 指定运行nginx的用户或用户组，默认为nobody。
2023-08-15 09:53:44
1864
17
原创 基于Axios二次封装请求库,带你重构面试亮点
上述的apis是我实际项目中封装的，当然文章给的大部分是伪代码，但是思路是对的，大家可以按照这个思路封装自己项目中的请求库，然后发布成npm包。
2023-08-14 10:29:46
385
7
原创 五分钟教你SSL证书自动巡检与过期提醒
证书过期了，导致用户访问网站时候出错，后面续上免费的证书，由于我是使用的免费的证书，所以证书的有效期只有一年。为了避免证书过期导致网站无法访问，我决定写一个小程序来自动检查证书的过期时间，并在证书快过期时通知我及时更换证书。整理两本小册，一本是前端面试小册，一本是图解算法，阅读体验都很好,欢迎添加我微信。为了确保我们能够及时地检测到证书的状态，我们需要定期执行上述的检查任务。当我们知道了证书的剩余有效期后，下一步是通知相关人员。的文件，该文件中列出了需要检查的域名和对应的IP地址。库来创建一个定时任务。
2023-08-11 14:19:47
573
11
原创 说lottie谁是lottie?
Lottie是 airbnb 开源的动画库，支持多个平台如 Android、iOS、Web、React Native 和 Windows。其提供从 AE 到各终端的完整工具流程。设计师可以通过 AE 的 Bodymovin 插件将动画导出为json 文件，然后通过Lottie 实现动画效果确保动画的还原度。jcode。
2023-08-09 14:43:28
262
5
原创 面试官：说说地址栏输入 URL 敲下回车后发生了什么?
URL解析和DNS查询，将域名解析为IP地址；建立TCP连接，确保数据传输的可靠性；发送HTTP请求，向服务器请求资源；服务器处理请求并发送HTTP响应；浏览器解析和渲染页面，显示给用户。这些步骤使得用户可以通过浏览器访问互联网上的各种资源，从而实现网页浏览、数据传输等功能。
2023-08-07 21:56:13
578
10
原创 面试官：Node文件查找的优先级与Require方法的文件查找策略
Node.js的模块查找规则和优先级确保了模块可以按照一定的路径顺序被找到并加载。核心模块和已加载的模块会被缓存，避免了重复加载，提高了应用程序的性能。在编写Node.js应用程序时，我们可以根据这些规则来组织和导入模块，实现代码的模块化和复用。##参考文献Node.js 模块加载机制详解Node.js模块机制及require源码解析。
2023-08-06 09:24:10
634
20
原创 全网最全的vue3入门教程『图文并茂』
Vue 3 是一个流行的开源JavaScript框架，用于构建用户界面和单页面应用。它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式 API，以及一些新的内置组件。你可以创建自定义的hooks来复用代码。一个自定义hook就是一个函数，它可以使用其他的响应式数据和组合式API。import {setup() {你可以使用customRef函数来创建一个自定义的响应式引用。这允许你控制和观察当引用的值发生变化时的行为。
2023-08-05 09:08:49
7420
6
转载 大厂前端面试题，看懂90%，把简历给我
用心整理了很多天,pdf阅读非常良好，可以看截图,涵盖,gitHTTPVueReact组件库HTMLJSCSSWebpackNode等领域，超用心。
2023-08-05 09:07:48
511
9
原创 自动化兼容性检查和解决方案：应用不会再白屏了
事实上，这确实是问题的根源。配置，你可以确保你的项目在目标浏览器中都能够正常运行，并在开发阶段自动引入相应的polyfill或进行兼容性警告，从而节省调试时间，提高开发效率，并构建跨浏览器友好的Web应用。eslint-plugin-compat是一个强大的工具，可以帮助我们检查代码中使用的特性在不同浏览器中的兼容性。Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
2023-08-04 15:16:25
1128
9
前端面试小册，包含Vue面试题，React面试题，JS面试题，HTTP面试题，工程化面试题，CSS面试题，算法面试题，大厂面试题
2023-08-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人