- 博客(39)
- 收藏
- 关注
RSS订阅原创 微信小程序不同在系统的运行环境
渲染层运行环境使用Chromium WebView，即NWJS或者Chrome的内核，负责解析wxml和wxss文件，并进行页面的渲染。渲染层运行环境使用WKWebView，是iOS上的现代Web渲染引擎，负责解析wxml和wxss文件，并将页面渲染到屏幕上。在Android系统上，小程序的逻辑层运行环境是V8引擎，即Chrome V8引擎，负责执行JavaScript代码和处理业务逻辑。渲染层运行环境使用XWeb，是微信自研的基于Mobile Chromium内核的引擎，负责页面的渲染和绘制。
2023-08-04 11:38:44
1480
原创 【esbuild与竞品的对比】
Esbuild 是以极快的构建速度而闻名的，它采用并行构建和增量构建策略，使得构建时间大大减少。○ Rollup：专注于构建 JavaScript 库和组件，生成精简、高效的输出，适用于构建库和组件的场景。○ Vite：专注于开发环境的快速构建和开发体验，采用原生 ES 模块支持，提供快速的热模块替换。○ Webpack：强调功能丰富和灵活性，提供了丰富的插件和配置选项，适用于各种复杂的项目需求。Webpack 拥有庞大的插件生态系统和广泛的社区支持，而其他竞品在插件和社区方面可能较为有限。
2023-08-04 10:59:22
176
原创 图解单点登录核心知识点【原创】【图解】
SSO（Single Sign-On）单点登录是一种身份验证机制，允许用户在多个应用程序或系统之间进行无缝的身份验证和访问控制。它的原理是通过在多个应用程序之间共享身份验证信息，用户只需登录一次，即可访问所有受信任的应用程序，无需再次提供凭据。
2023-05-29 19:27:31
162
原创 nodeconnect-history-api-fallback的原理是什么？
`connect-history-api-fallback`是一个用于处理前端路由的中间件，它的原理是在服务器接收到请求时，检查请求的路径是否匹配到静态文件（如HTML、CSS、JS等），如果不匹配，则将请求重定向到前端的入口文件，通常是 `index.html`
2023-05-24 17:36:55
621
原创 Javascript中的代理和反射
JavaScript中的代理和反射是ES6引入的两个新概念，用于操作对象和属性。代理使得我们可以拦截对象的操作并进行自定义处理，而反射则提供了一组操作对象和属性的方法，以便于我们更方便地操作对象。
2023-05-24 10:59:20
352
原创 vue框架是如何实现依赖收集的？
Vue 使用依赖收集器来管理和存储组件与响应式数据之间的依赖关系。：通过依赖收集器和观察者模式，Vue 能够自动追踪依赖关系，并在依赖发生变化时自动更新相关的组件。当响应式数据的属性被访问时，观察者会收集这个属性的依赖关系，并将其与当前的组件实例关联起来。Vue 中的观察者（Watcher）负责建立组件与响应式数据之间的依赖关系，并在依赖发生变化时触发相应的更新。综上所述，Vue 的依赖收集精髓在于通过响应式数据、依赖收集器和观察者模式，实现了组件与响应式数据之间的自动关联和更新。
2023-05-24 10:50:06
837
原创 nextTick 使用场景和原理 ？
nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法。nextTick是 Vue 提供的一个异步方法，用于在下次 DOM 更新循环结束之后执行回调函数。
2023-05-24 10:48:08
281
原创 什么是vue3 的hooks？
钩子编程（hooking) 是计算机程序设计术语, 通过拦截软件模块间的函数调用、消息传递、事件传递来修改或扩展操作系统、应用程序或其他软件组件的行为的各种技术。处理被拦截的函数调用、事件、消息的代码，被称为钩子（hook）。
2023-05-24 10:46:24
100
原创 实现任务调度器
在上面的代码中，我们定义了一个TaskScheduler类，它包含了添加任务、启动任务调度器和执行任务的方法。在创建TaskScheduler实例之后，我们通过addTask方法添加了三个任务，分别在5秒、10秒和15秒后执行。最后，调用start方法启动任务调度器，它将每秒执行一次任务列表中的任务。当任务执行时间到达时，它们将被从任务列表中删除。任务调度器是一个程序，它可以自动执行预定的任务，例如定期备份数据、定时发送邮件、清理临时文件等。任务调度器可以帮助我们提高工作效率，减少手动操作的时间和错误。
2023-05-18 10:08:26
605
原创 强制缓存和协商缓存
当浏览器请求一个资源时，该资源可以缓存到客户端（浏览器）中，以便以后重复使用。浏览器缓存是一种可以显著提高Web应用程序性能的技术，但它可能会导致某些问题，例如在更新资源时无法及时获取最新版本。在这种情况下，我们可以使用浏览器缓存策略来强制或协商缓存资源。
2023-05-18 10:08:16
622
原创 为什么小程序里拿不到dom相关的api？
然而，在小程序中，页面的结构和样式是使用 WXML 和 WXSS 来定义的，这两种语言是小程序专门为了描述页面结构和样式而设计的。而小程序提供了一套自己的 API，包括操作页面元素、调用后端服务、获取用户信息等等，这些 API 与 WXML 和 WXSS 配合使用可以实现类似于 DOM API 的功能。总之，小程序是一种不同于 Web 应用程序的应用类型，因此它有自己的设计理念和架构，不能简单地将 Web 应用程序中的概念和 API 直接应用到小程序中。
2023-05-18 10:06:19
476
原创 实现 (5).add(3).minus(2) 功能
这里给 Number.prototype 添加了 add 和 minus 两个方法，这两个方法都接受一个数字参数，分别表示加法和减法操作。在方法体内部，使用 this 关键字来访问调用该方法的数字，然后进行加法或减法操作，并将结果返回。注意，在调用 add 和 minus 方法时，需要使用括号将数字括起来，以避免出现语法错误。同时，在链式调用中，每个方法都需要返回调用该方法的数字，以便后续继续调用其他方法。
2023-05-18 10:05:29
169
原创 Vue响应式原理中 Object.defineProperty 有什么缺陷？
在 Vue 的响应式原理中，使用 Object.defineProperty 来实现数据劫持，从而监听数据的变化。
2023-05-18 10:04:46
1863
原创 opacity: 0、visibility: hidden、display: none 有啥区别
这三种方式的使用场景分别是：● opacity: 0：隐藏元素，但是需要占据原来的空间；需要注意的是，opacity 属性不仅影响元素的可见性，还影响其交互行为（例如点击事件的响应）● visibility: hidden：隐藏元素，但是需要占据原来的空间，并且保持元素布局不变；● display: none：隐藏元素，并且不需要占据原来的空间，也不影响其他元素的布局。
2023-05-18 10:02:27
1516
原创 给定两个数组计算它们的交集
这个方法的时间复杂度为 O(n)，其中 n 是两个数组中较小的那个的长度。由于 Set 对象可以自动去重，因此这种方法可以处理重复元素的情况。
2023-05-18 10:00:06
248
原创 时间复杂度计算方法
这个算法中，最耗时的语句是 for 循环，其执行次数与输入数组的长度 n 成正比，因此算法的时间复杂度为 O(n)。通常情况下，我们会关注算法在最坏情况下的时间复杂度，即算法在处理最坏情况下的输入时所需的最长时间。计算算法的时间复杂度可以帮助我们估算算法在不同规模数据下的执行效率。时间复杂度表示算法的运行时间与问题规模 n 的增长率之间的关系。● 对数复杂度：O(log n)● 平方复杂度：O(n^2)● 立方复杂度：O(n^3)● 指数复杂度：O(2^n)● 常数复杂度：O(1)● 线性复杂度：O(n)
2023-05-18 09:58:18
1122
原创 前端如何实现即时通讯
Websocket是一个全新的、独立的协议，基于TCP协议，与http协议兼容、却不会融入http协议，仅仅作为html5的一部分，其作用就是在服务器和客户端之间建立实时的双向通信。● 缺点：基于文本传输效率没有websocket高，不是严格的双向通信，客户端向服务端发送请求无法复用之前的连接，需要重新发出独立的请求。● 缺点：独立与http的协议，因此需要额外的项目改造，使用复杂度高，必须引入成熟的库，无法兼容低版本浏览器。● 优点：真正意义上的实时双向通信，性能好，低延迟。
2023-05-18 09:56:00
766
原创 浏览器缓存中 Memory Cache 和 Disk Cache
浏览器在加载页面时，会先检查内存缓存中是否存在该页面的缓存，如果存在且未过期，则直接从内存中读取并加载页面。如果内存缓存中不存在或者已过期，则会检查磁盘缓存中是否存在该页面的缓存，如果存在则从磁盘中读取并加载页面。需要注意的是，缓存机制可以提高页面的加载速度和用户体验，但也可能会导致一些问题，例如更新后的资源无法立即生效、缓存占用过多空间等。Memory Cache 是浏览器内存缓存，资源会被缓存在内存中，由于内存读取速度快，所以 Memory Cache 的读取速度也较快。
2023-05-17 10:49:21
3217
原创 ES6 代码转成 ES5 代码的实现思路是什么？
ES6 代码转成 ES5 代码的实现思路主要是通过使用 Babel 这样的工具来实现。Babel 是一个广泛使用的 JavaScript 编译器，可以将 ES6 代码转换成向后兼容的 ES5 代码，从而在现有的浏览器和环境中运行。
2023-05-17 10:47:27
486
原创 如何监听元素的显示和消失？IntersectionObserver
要监听元素的显示和消失，可以使用Intersection Observer API。Intersection Observer API 是一个异步的 API，可以用于监听元素与视口的交叉状态。
2023-05-17 10:46:47
862
原创 如何实现一个new
创建一个新对象。将新对象的原型指向构造函数的 prototype 属性。执行构造函数，将 this 绑定到新对象上，传递参数。如果构造函数返回一个对象，则返回该对象；否则返回新创建的对象。
2023-05-17 10:45:43
202
原创 详细描述事件循环【原创图解】
在事件循环开始时，先执行当前执行上下文中的同步代码，执行完同步代码后，检查微任务队列是否为空，如果不为空，则依次执行微任务队列中的任务，直到微任务队列为空；接着，从宏任务队列中取出一个任务，执行完毕后，再次执行微任务队列中的任务，如此往复，直到所有队列为空。在每个事件循环中，先执行所有的微任务，然后再执行一个宏任务，执行完宏任务后再次执行所有微任务，如此往复循环，直至所有任务执行完毕。事件循环是 JavaScript 的执行机制，负责协调调度各种任务的执行顺序，包括宏任务和微任务。
2023-05-17 10:43:13
123
原创 什么是tree-shaking？
Tree shaking是一种优化技术，用于在打包过程中删除未使用的代码，以减少最终生成的包的大小。它是通过静态分析代码中的模块依赖关系来确定哪些代码可以安全地删除的。
2023-05-17 10:38:42
293
原创 前端有哪些模块化规范
特点：所有代码都运行在模块作用域，不会污染全局作用域。模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。引入：require(xxx),如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径。特点：ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。① CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。② CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
2023-05-16 17:49:08
28
原创 什么是事件机制
在事件机制中，程序的不同部分被设计为相互独立的，当一个部分发生某个事件时，它将通知其他部分，这些部分可以采取适当的行动。又比如，在Node.js中，可以监听文件系统的变化事件，当文件被修改、删除、重命名等操作时，就会触发相应的事件，从而让程序能够及时做出相应的响应，比如重新读取文件内容、备份文件等。比如，在前端开发中，可以监听按钮的点击事件，当按钮被点击时，就会触发对应的事件处理函数，从而执行相应的操作，比如打开一个模态框、发送网络请求等等。
2023-05-16 17:48:21
483
原创 详细解释addEventListner的第三个参数
事件捕获和事件冒泡是 DOM 事件传播的两个阶段。事件捕获从最外层的元素开始，逐级向内，直到到达事件的目标元素。事件冒泡则是从事件的目标元素开始，逐级向外，直到到达最外层的元素。addEventListener 方法的第三个参数是一个布尔值，通常被称为 options。它表示该事件是在捕获阶段还是在冒泡阶段被触发。默认情况下，该参数的值是 false，表示在冒泡阶段触发事件。如果该参数的值为 true，表示在捕获阶段触发事件。
2023-05-16 17:47:39
584
原创 async与promise的区别
async/await 是 ES7 引入的一种异步编程的解决方案，它是 Promise 的语法糖，可以更方便地处理异步操作。async/await 能够让我们以同步的方式编写异步代码，使代码更加易于理解和维护。在使用上，Promise 是通过 .then() 和 .catch() 方法来处理异步操作的结果，而 async/await 则是通过在 async 函数中使用 await 来等待异步操作完成并返回结果。Promise 是 ES6 引入的一种异步编程的解决方案，它提供了一种处理异步操作的标准方式。
2023-05-16 17:47:06
268
1
原创 寻找第k大元素，时间复杂度是多少？
快速选择算法的基本思想是选择一个基准元素，然后将数组划分为比基准元素小和比基准元素大的两个子数组。如果第k大元素在比基准元素大的子数组中，那么在这个子数组中递归寻找第k大元素；否则，在比基准元素小的子数组中递归寻找第k大元素。除了快速选择算法，还有一些其他算法可以用来寻找第k大元素，例如堆排序、归并排序等，它们的时间复杂度在平均情况下也是O(nlogn)。寻找第k大元素可以通过多种算法实现，其中时间复杂度最优的是基于快速排序的算法，称为快速选择（QuickSelect）算法。
2023-05-16 17:46:25
720
原创 细说MVC和MVP和MVVP的区别
MVC、MVP 和 MVVM 都是基于分层思想的设计模式，用于帮助我们更好地管理代码、提高代码可维护性、降低代码复杂度等。
2023-05-16 17:44:18
539
原创 网页meta标签有哪些常用的属性？
除了以上常用的属性，还可以根据需要设置一些自定义的属性，例如：content=“my-custom-value”。以上是元素中常用的属性，还有其他一些属性，如author、robots等，具体使用要根据需要而定。content 是 meta 标签中的一个属性，常用于设置一些额外的信息或指令。
2023-05-16 17:42:31
965
原创 【有哪些标签属性可以预加载资源？如何使用】
表示图片的加载方式，可以选择 lazy、eager 和 auto 三种。其中 lazy 表示图片懒加载，只有当用户滚动到该图片时才加载；auto 表示由浏览器自行决定加载方式。可以指定需要预加载的文件类型，并使用as属性指定文件类型，以便浏览器优化预加载资源的方式。表示该资源可能在将来的某个时间点会被使用，但并不是必须的，可以通过异步方式获取。defer属性指示浏览器立即下载脚本，但延迟脚本的执行，直到文档被解析完成。async属性指示浏览器下载并异步执行脚本，而不阻塞文档的解析和渲染过程。
2023-05-16 17:33:41
163
原创 Webpack中compiler.hooks
请注意，这只是一些常见的钩子，并且具体的触发顺序可能会因配置和插件的不同而有所变化。对于某些特定的钩子，可能还会有更多的细分阶段。了解每个钩子的触发时机对于开发自定义插件和对Webpack构建过程的深入理解非常有帮助。在Webpack中，以下是。
2023-05-16 17:21:15
817
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人