前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）
探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小，以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。
分类： HTML/CSS
PWA 实践/应用（Google Workbox）
桌面端 PWA 应用：
"PWA 实践/应用（Google Workbox）"继续阅读
Resource Hints - What is Preload, Prefetch, and Preconnect?[转]
Today we are going to explore current resource hints and directives which can be another great way to boost the performance on your website or web application. You might have heard of preload, prefetch, and preconnect, but we want to dive deeper into the differences between them how you can benefit from them. Some of the advantages of these is that they allow web developers to optimize delivery of resources, reduce round trips, and fetch resources to deliver content faster while a user is browsing a page.
"Resource Hints - What is Preload, Prefetch, and Preconnect?[转]"继续阅读
CSS 预处理脚本 Sass/Scss 进阶
进阶语法
1 混合器
开发者在编写整个网站的时候常常遇到类似或者一样的样式块，例如 Bootstrap 中的栅格样式。当然如果重复的次数少又简单，当然没有什么影响，可当项目变得越来越复杂，产品需求越来越多，复制粘贴就很难应付了。此时便可以使用 Sass 的混合器来实现大段样式的重用。混合器使用标识符 @mixin 定义，在 @mixin 后面跟一个自定义的名字，然后用花括号内填写需要重用的样式。定义完以后便可以在样式中使用 @include 引用这个混合器。
"CSS 预处理脚本 Sass/Scss 进阶"继续阅读
CSS 预处理脚本 Sass/Scss 入门
一、背景
使用前端 UI 框架（例如：Bootstrap、Mustard UI）的时候，虽然我们可以直接修改源码里面的 CSS 样式，但是修改起来非常麻烦低效；好在大多数框架是基于当下流行的 CSS 预处理脚本 Less 和 Sass 编译开发的，通过修改官方给出的 Sass 源码，我们可以很方便的定制它们。
"CSS 预处理脚本 Sass/Scss 入门"继续阅读
IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题
需求场景是在一个使用绝对定位布局的页面中，动态渲染一个可以滑动的子模块。
开发的时候在电脑 Chrome 上面调试没问题，安卓手机和常规 IOS 版本测试了也没问题，但是由于苹果最近更新了新的系统版本（14），在新版本上出现了滚动滑动不了的问题。
"IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题"继续阅读
CSS 实现内容高度不够的时候底部（footer）自动贴底
在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话，底部下面变会多出很多空白，非常影响美观。
方案 1：Flex-Box
头部使用 position: sticky; 吸顶，再使用盒子（main）来包住内容（container > content）和底部（footer），这个盒子设置最小高度为除头部外的剩余屏幕高度：min-height: calc(100vh - 50px);，盒子里面使用弹性布局（flex: 1 1 auto;）让内容区域自动撑开，而底部保持不变（flex: 0 0 auto;），这样就有了内容不够时底部自动吸底，内容足够时底部自动下移的效果。
"CSS 实现内容高度不够的时候底部（footer）自动贴底"继续阅读
如何用 Sass/Less 实现单位转换（px to rem/em/vw）
什么是BFC？看这一篇就够了[转]
BFC 定义
BFC（Block formatting context）直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
在解释什么是BFC之前，我们需要先知道 Box、Formatting Context 的概念。
"什么是BFC？看这一篇就够了[转]"继续阅读
使用 max-height 实现动画效果的“展开收起”
当页面中有大量非重要信息时通常使用“展开收起”来处理，常见的作法是在 display: none; 和其它属性之间切换。如果想加上些动画效果通常使用 JavaScript 来实现，若想用 CSS 来实现只需设置 max-height 的值在 0 和一个比目标元素高度大的值之间切换即可。
"使用 max-height 实现动画效果的“展开收起”"继续阅读