孟余的博客 | My Blog

webpack 优化

使用webpack可以进行哪些简单的优化？

前言对于前端性能优化，大致可以分为「浏览器部分」和「代码部分」。其中代码部分又可以分为「构建优化」和「代码优化」。「代码优化」理解起来就是代码的规范了，比如减少无用的注释，减少代码的复杂度，使用更高效的算法，删除无用的文件和代码等等。「构建优化」则是指 webpack 的配置优化，比如减少 bundle 大小，提升构建速度，使用更好的压缩算法等等。本文将介绍 webpack 优化的一...

Posted by My on July 18, 2022

Cross-domain

What is cross-domain and how to solve it?

前言「跨域」是个基础又严重的问题，但是在现代前端开发中，并没有多少人真正意识到它的存在。比如 Vue 项目，脚手架搭建起来后，配置了几个参数，就可以正常使用了。至于为什么能正常使用，里面有没有跨域问题，就没有深入的去了解过，甚至什么是跨域，都很难说清楚。 1 2 3 4 5 <script> fetch('https://pvp.qq.com/web201605...

Posted by My on July 15, 2022

MVVM && MVC

What are mvvm and mvc, and what are their differences?

MVVM（Model-View-ViewModel）和 MVC（Model-View-Controller）是两种常见的设计模式，它们都用于分离应用程序的逻辑、视图和数据， MVVM 「MVVM」（Model-View-ViewModel）是一种软件架构模式，用于分离应用程序的 UI「view」、业务逻辑「model」和界面逻辑「viewmodel」。它在设计模式中被广泛用于构建响应...

Posted by My on July 9, 2022

Array Types

How to determine whether a variable is an array ?

在做一些数组相关的操作时，我们经常会遇到判断一个变量是否为数组的问题。下面简单记录几种常见的判断数组的方法。对象原型上的方法 Object.prototype.toString.call() 方法可以用来判断变量的类型。判断数组 1 Object.prototype.toString.call([]); // [object Array] ...

Posted by My on June 30, 2022

Reflect ？

How to use Reflect ?

在 JavaScript 中，Reflect 对象提供了与 Proxy 对象相同的 API，但其目的在于提供对对象操作的「静态方法」。什么是对象操作？比如说读取对象的某个属性， 1 2 const obj = { name: "Alice" }; const name = obj.name; // 读取属性上面的读取方式，是一种语法糖，实际上是通过 get 方法来实现的。 ...

Posted by My on June 18, 2022

vue3 性能提升

vue3 在性能上做了哪些优化？

对于 Vue3 的性能提升，涉及到比较多的方面，包括渲染、更新、编译、内存管理等。那就结合官方的介绍与实践，来看看 Vue3 在性能方面的优化。总体优化响应式系统 Vue 3 使用 Proxy 替代 Vue 2 中的 Object.defineProperty，这使得响应式系统更高效，能更好地追踪依赖。进行惰性的计算，只有在需要时才会访问响应式属性，减少不...

Posted by My on June 7, 2022

Event loop

怎么去理解 js 的事件循环机制？

这个问题想回答得很好，很难。我就简单记录一下我自己的理解。「事件循环」是浏览器渲染主线程的工作方式。同时，事件循环机制是 js 异步编程的核心，目的是协调 JavaScript 的执行和异步操作的回调，确保它们在适当的顺序中被处理。JavaScript 是单线程的，这意味着它在任何时刻只能执行一个任务。事件循环通过管理「执行栈」和「任务队列」来处理这一限制。在 W3C 中，给出了 J...

Posted by My on June 5, 2022

Why do we need virtual dom?

What is the role of virtual dom?

为什么我们需要虚拟 DOM？也许之前我们会回答，虚拟 DOM 是为了提高性能，减少 DOM 操作，提升用户体验。但是，svelte 并没有使用虚拟 DOM，而是直接操作真实的 DOM，并且效率还更高了。确实我们减少了真实 DOM 的操作，但如「vue」和「react」，最后还是得去操作真实的 DOM。所以看来，使用虚拟 Dom 好像并不是为了提高性能。那我们从其他层面来分析下这个问题。...

Posted by My on May 30, 2022

Prototype and prototype chain ?

原型与原型链之间错杂的关系

原型和原型链看起来错综复杂，但是如果把其中的关系分开理清楚，还是很好理解的，但也不是一句话就能够说清楚，还是需要从几个点依次去分析的。对象所有对象都是 new 一个函数出来的。{}只是语法糖。通过老师的讲解，可以先理解他们之间的关系下面我们开始对他们的关系进行梳理，看这张图，理解 new。比如说我们有一个普通函数 obj，我们将通过 new 这个函数，创造一...

Posted by My on May 22, 2022

What is a Promise ?

What is the concept of promise and how to use promise ?

引言什么是「Promise」? 对于后面入门的同学来说，能回答的应该就是「异步」、「回调」等相关了，当然这也与我们的学习路程有关。有的同学是本专业，但是涉及不深，也不知道。有的同学是一般培训机构的，了解完「html」和框架，就开始写业务。有的同学是自学的，阅读层次没有达到那么深。回归正传，「Promise」意为承诺，那到底如何去理解呢？ Promise 在谈论到「Promise」的时...

Posted by My on May 14, 2022

My Blog