萝卜不带泥

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

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

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

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

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

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

大家好！我是萝卜，在实际开发实践中，为了方便开发调试和上线，项目中我们一般配置两个 Webpack 配置，一个是开发环境一个是生产环境，开发环境帮助我们快速开发测试联调，生产环境保证上线环境的打包流程是最优化体验，这就是配置文件根据环境进行拆分。 配置文件拆分最重要的收益是我们…

大家好！我是萝卜，今天给大家讲解在项目中使用 Webpack 来给多页应用做打包。 只需要简单配置，执行 webpack 打包之后，发现 log 中显示，在 dist 文件夹中生成一个 index.html 的文件。打开后发现 HTML 的内容如下： 除了我们 HTML 外，我…

大家好！我是萝卜，this关键字是javascript中最复杂的机制之一，this被自动定义在所有函数的作用域中，即使是有多年经验的前端同学，有时也很难说清它到底指向什么，实际上，this机制并没有那么先进，下面就带大家彻底搞懂this。 既然this关键字是javascrip…