前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）
探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小，以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。
分类： HTML/CSS
PWA 实践/应用（Google Workbox）
桌面端 PWA 应用：
"PWA 实践/应用（Google Workbox）"继续阅读
Resource Hints - What is Preload, Prefetch, and Preconnect?[转]
介绍了 `preload`、`prefetch` 和 `preconnect` 三种资源提示及其应用场景。`preload` 优化当前导航资源加载，`prefetch` 在空闲时预取未来可能需要的资源，`preconnect` 提前建立服务器连接以减少延迟。通过合理使用这些技术，可显著提升网页加载速度并优化用户体验。
CSS 预处理脚本 Sass/Scss 进阶
介绍了 Sass 的进阶语法，包括混合器的定义与使用、参数化与默认值、继承与占位符选择器以及数字和颜色运算。通过这些特性，可以减少样式重复，提高代码复用性和维护性，同时支持灵活的样式动态调整和优化。
CSS 预处理脚本 Sass/Scss 入门
介绍了 Sass 的基础知识与安装方法，包括变量、嵌套规则、文件导入和注释的使用。详细讲解了 Scss 语法的优势及其与 CSS 的兼容性，并展示了如何通过命令行工具编译 Scss 文件为 CSS。通过模块化和灵活的语法，Sass 提供了更高效的样式开发体验。
IPHONE/H5/IOS 14 版本滚条 / 滑动失效问题
分析了在 IOS 14 系统中绝对定位布局的滑动问题，提出了三种解决方案：完善父元素 CSS 属性，预设更大子元素；调整子模块布局，避免绝对定位；通过定时器重排重绘规避问题。最终总结问题根源在于 IOS 渲染机制，重新设置父元素 overflow 属性可恢复滚动。
CSS 实现内容高度不够的时候底部（footer）自动贴底
介绍了两种实现页面底部 (footer) 吸底的 CSS 方案。方案 1 使用 Flex-Box 和 calc 动态调整布局，兼容现代浏览器；方案 2 通过设置内容区最小高度和底部负 margin 实现吸底效果。两种方法均能解决内容不足时底部上浮的问题，各有优缺点，需根据需求选择合适方案。
如何用 Sass/Less 实现单位转换（px to rem/em/vw）
介绍了在移动端开发中使用 Sass 和 Less 转换像素单位以适配设计稿。Sass 通过自定义函数 pxToEm 实现 px 转 em，Less 使用混合 (Mixins) pxToVW 将 px 转换为 vw，适用于不同场景的网页适配需求，提高开发效率。
什么是 BFC？看这一篇就够了[转]
介绍了 BFC (Block Formatting Context) 的定义、布局规则及创建方法，强调其在避免 margin 重叠、自适应布局和清除浮动中的作用。BFC 是一个独立的布局环境，内部元素与外部互不影响，高度计算包含浮动元素，有助于实现复杂的 CSS 布局需求。
使用 max-height 实现动画效果的“展开收起”
介绍了利用 CSS 设置 max-height 属性在 0 与目标高度之间切换，实现“展开收起”动画效果的方法。通过设置 transition 属性实现平滑过渡，避免使用 JavaScript。需注意 max-height 值不宜过大，以免导致视觉延迟影响动画效果。