前端GoGoGo

在移动端，如果标签和输入框在一行中显示，显示的有点窄。如果标签和输入框各占一行显示，又浪费空间。有没有两全其美的方案呢？Material Design 提供了一个两全其美的方案。

用 Vue 时，常出现相关业务逻辑代码散在 data， methods， watch， computed 和 mounted 等地方。这样的代码可维护性差。查找或更改这块逻辑时，都要找多个地方。 Vue 3 新出的 Composition API 可以优雅的聚集零散业务代码。 …

在 React 的 Class 组件中，常出现相关业务逻辑代码散在 componentDidMount, componentWillUpdate, componentWillUnmount 等生命周期函数中的情况。这样的代码可维护性差。查找或更改这块逻辑时，都要找多个地方。 H…

提到提高页面渲染速度，我们第一想到的是优化 JavaScript。其实通过优化 CSS 也能提高页面渲染速度。 1. 延时渲染屏幕外的内容 - content-visibility: auto 很长的页面会有大量的内容在屏幕外。如果只渲染屏幕内的内容，屏幕外的内容在出现时才渲染…

sticky 定位的元素，有两个状态：相对定位和固定定位。开发时，有给处于固定定位(Pined)状态 sticky 定位的元素加额外样式的需求。如加个阴影效果。 目前，没法通过 CSS 知道 sticky 是否处于固定定位的状态。 对于这个场景，可以用 JS 实现。 判断元素是…

减少组件的渲染次数，能提升 Vue App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。 1. 缓存动态组件 开发中，我们会碰到用动态组件的情况。如多标签的页面，每个标签的内容是个动态组件: 标签来回切换，同一个组件会被重复渲染。用 keep-alive 包裹动…

减少组件的渲染次数，能提升 React App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。 1. 组件 Render 时，避免 state， props 没变的子组件 Render 组件 Render 会导致的其子组件 Render，即使子组件的 state，…

现代前端项目往往依赖很多第三方包。如果能大幅提升装包速度和减少包占的空间，是极好的。 pnpm 是类似 npm / Yarn 的包管理器。特点: 装包速度快。比 npm / Yarn 快 2 到 3 倍。 省磁盘空间。同一个包的同一个版本，全局只会装一次。一个包的不同版本，pn…

在 Vue 中，Mixins 可以包含任意组件的选项。这使得用 Mixins 能很方便的抽象多个组件间的公共部分，但也会带来一些问题: 命名冲突导致的运行结果的不确定性。组件 和 引入的 Mixins，引入的多个 Mixins 之间，都会出现数据名，方法名的命名冲突。出现命名冲…