浏览器的进程模型
何为进程？
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程
...大约 8 分钟
总结
********<font style="color:rgb(6, 6, 7);">开发环境下: Vite 充当一个开发服务器，直接利用浏览器对 ESM 的支持, 通过动态编译</font><font style="background-color:rgb(243, 245, 250);">动和打包对应的模块</font>
...大约 7 分钟
入口（entry）、输出（output）、加载器（loaders）、插件（plugins）、模式（mode）和依赖图（dependency graph）
总结
读取 webpack.config.js 配置文件从 入口（entry）解析所有依赖 构建 依赖图,
通过 加载器（loaders）和解析器（resolvers）处理各种资源 ;
加载器将不同类型的资源转换成 Webpack 能够处理的模块 ( js,json)
插件（plugins）负责优化打包,热模块替换
Webpack 进行摇树 压缩代码、分割代码（code splitting）、提取公共依赖等
...大约 3 分钟
浏览器是如何渲染页面的？
当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。
在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
...大约 7 分钟
你是否了解 CSS 的属性计算过程呢？
有的同学可能会讲，CSS属性我倒是知道，例如：
p{
color : red;
}...大约 9 分钟
一说到 CSS 盒模型，这是很多小伙伴耳熟能详的知识，甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。
但是一说到 CSS 包含块，有的小伙伴就懵圈了，什么是包含块？好像从来没有听说过这玩意儿。
好吧，如果你对包含块的知识一无所知，那么系好安全带，咱们准备出发了。
...大约 8 分钟
Foreword
Here comes Module!
随着网站逐渐变成「互联网应用程序」，嵌入网页的 JavaScript 代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试……我们不得不使用软件工程的方法，来管理网页的业务逻辑。
于是，JavaScript 的模块化成为迫切需求。在 ES6 Module 来临之前，JavaScript 社区提供了强大支持，尝试在现有的运行环境下，实现模块的效果。
Catalog
...大约 8 分钟
通过 js 判断 moblie 端和 pc 端进而加载不同的 css 或者 js
废话不多说，上代码
<script type="text/javascript">
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
// document.writeln("您的浏览设备为：");
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
// alert("手机浏览！");
} else {
// alert("PC浏览！");
document.write("<script type='text/javascript' size='150' alpha='0.8' zIndex='-10' src='../js/dist/ribbon.js'><\/script>");
document.write("<script type='text/javascript' color='0,188,212' opacity='0.7' zIndex='-2' count='99' src='http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js'><\/script>");
}
}
browserRedirect();
</script>...小于 1 分钟