萝卜不带泥

页面渲染机制这部分内容会分成两篇来进行讲解，这两篇里我们准备聊一下页面的渲染的过程，包括页面的加载、DOM 树的构建、CSSOM 树的构建、渲染树的构建和最后的渲染过程等。浏览器的渲染机制和网页的优化息息相关，只有知道了页面是怎么渲染出来的，才能在写代码的时候使用最合理的方式，…

这一篇我们讲解一下复合选择器，复合选择器是通过对基础选择器的组合，让选择器变得功能更强大。在样式开发中，复合选择器是最常见的，这一篇的内容也是选择器这部分知识的重点。到后面实际开发部分，我们就能感受到复合选择器到底有多常见。 这一篇会介绍后代选择器、子元素选择器、兄弟选择器、交…

这一篇我们来介绍一类稍微特殊的两种选择器–伪类选择器和伪元素选择器。在页面中，这两类选择器通常用于标记一些特殊的样式，这些样式是基础选择器和组合选择器解决不了的，有些甚至是 JS 也做不到的。下面我们就分别介绍一下这两种特殊的选择器。 在页面中，有时候同一个元素在不同动作下有不…

CSS 选择器是用来指定该组 CSS 样式会对什么元素生效的，是连接 HTML 结构和 CSS 样式的桥梁。这一篇将给大家介绍一下 CSS 里基础选择器的用法，同时会对使用上给出一些建议。 基础选择器包括 ID 选择器、类选择器、标签选择器、通配符选择器和属性选择器这几种。 I…

大家好！我是萝卜，这篇文章主要是将我自己平时开发中常用的一些插件和大家做一个分享，大家在自己的工作或者项目中如果有类似的需要可以直接通过这篇文章进行查找以及使用。 stylelint-webpack-plugin：StyleLint 的插件。

这里主要是为了提高首屏的速度或者页面加载的速度。 1.CSS 文件或样式在 head 标签中引用，页面的渲染需要 CSS，所以尽量早的让 CSS 文件加载出来。 2.使用压缩后的文件，线上使用的静态文件，尽量都是压缩好的，CSS 使用 .min.css 形式，从而减少下载的时间…

大家好！我是萝卜，webpack作为目前最流行的构建工具，几乎成为前端同学武器库中必备的工具之一，写这个系列文章的用意就是想把自己在平时工作中使用webpack的一些经验和心得和大家分享，也是对自己这些年的前端工作做一个阶段性的总结，希望能给大家带来些许的帮助。 近些年，前端世…

各位好！我是萝卜不带泥，这是我webpack系列文章的第二篇，上一篇介绍了为什么要使用webpack，这一篇主要讲解webpack的环境搭建，包括：npm node webpack 的安装，已经准备好的环境的同学可以略过，直接看我的下一篇文章了。 首先进入nodejs的官网，选…

新建src目录，放置源码。 准备好以上内容后，我们在 webpack 目录下执行 npx webpack 命令，执行后，我们查看webpack目录下会生成一个dist目录，进入dist目录后会看到main.js文件，这个文件就是webpack打包压缩后的文件。 到此我们可以发现…