css提升长列表性能渲染
前言在很多网页开发的时候，都会涉及到长列表，当数据量特别多的时候，渲染会非常慢，有时候甚至会卡死，这严重影响了用户的体验。
因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。而以上的方式无论哪种，都需要写大量的js或者css逻辑去实现。而现在，我们多了一种方式—— content-visibility。只需要一行CSS代码，就可以实现可见网页只加载可见区域内容，使网页的渲染性能得到数倍的提升！
介绍content-visibility 是一个css属性，它控制一个元素是否呈现其内容，能让用户潜在地控制元素的呈现。用户可以使用它跳过元素的呈现(包括布局和绘制)，让页面的初始直到用户需要为止，渲染得到极大的提升。
Value
content-visibility属性有三个可选值:
visible: 默认值。对布局和呈现不会产生什么影响。
hidden: 元素跳过其内容的呈现。用户代理功能（例如，在页面中查找，按Tab键顺序导航等）不可访问已跳过的内容，也不能选择或聚焦。类似于对其内容设置了d ...
webpack学习之路（实践篇）
前言在上篇 《学习 Webpack5 之路（基础篇）》中介绍了 Webpack 是什么，为什么选择 Webpack，Webpack 的基本概念介绍 3 个问题。
本篇将从实践出发，在第一章节《基础配置》中使用 webpack 搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。
本文依赖的 webpack 版本信息如下：
webpack-cli@4.7.2
webpack@5.46.0
一、基础配置接下来一起配置一个基础的 Webpack。
将支持以下功能：
分离开发环境、生产环境配置；模块化开发；sourceMap 定位警告和错误；动态生成引入 bundle.js 的 HTML5 文件；实时编译；封装编译、打包命令。想直接看配置的同学 -> 本文源码地址：webpack Demo0
新建项目新建一个空项目：
123456// 新建 webpack-demo 文件夹mkdir webpack-demo// 进入 webpack-demo 目录cd ./webpack-demo// 初始化项 ...
webpack学习之路（基础篇）
前言看过一句话，记录学习的过程是最好的学习方式，把自己学到的东西尝试表达和并分享，在分享的过程中，找到一个个同行的小伙伴，一起交流、学习，感受到学习技术的简单和纯粹。
一、webpack是什么引入 webpack 官网[3]介绍：
本质上，webpack 是一个现代 JavaScript 应用程序的_静态模块打包器(module bundler)_ 。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)_ ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack 官网[4] 图：
在图中我们可以看到，webpack 将左侧错综复杂的各自不同类型文件的模板依赖关系，包括 .js、.hbs、.cjs、.sass、.jpg、.png 等类型文件，打包成 .js、.css、.jpg、.png 4 种类型的静态资源。
简单来说，webpack 就是一个静态资源打包工具，负责将项目中依赖的各个模块，打包成一个或多个文件。
二、为什么选择webpack
其实现在的打包工具有很多，在此不进行其他 ...
前端判断数据类型
JavaScript数据类型的一些总结
