夏华

该部分导航(Navigation)旨在阐述：当用户在浏览器地址栏输入一个 URL，到浏览器呈现网页之前，各个进程和线程之间是如何交互的。 chrome 采用多进程架构，最顶层的是浏览器进程，与负责应用其它部分的进程协调。打开 更多工具-》任务管理器： 约定：由于 chrome …

Chrome 自版本67起默认开启了站点隔离。站点隔离是一项安全特性，它确保来自不同站点的页面处于不同的进程中，每个进程运行在沙箱中。这里站点的定义仅包括 schema 和 注册的域名，比如 https://google.co.uk 和 https://maps.google.…

浏览器会在快速运行代码和花费更多时间生成更高效代码之间进行取舍，不同浏览器的具体实现不太一样，有些会添加多个不同 time/efficiency 的优化编译器，以增加复杂性为代价更细粒度地控制这些取舍。 浏览器对对象属性的读取进行了优化，包括 shapes 和 inline c…

一点看法：CSS 语法本身易于学习，这也导致了很多人并没有认真了解 CSS 的一些基本概念。随手复制一段 CSS，样式 OK 就过了，最终导致项目中出现了大量重复的样式定义，!important 乱用等等。了解 CSS 属性的计算过程，可以帮助我们以可预测的方式编写更优雅和可维…

Vue Storefront 中使用的 Vue 性能优化技术，我们的目标是让该系列成为 Vue 应用程序性能优化的完整指南。 本系列的大部分重点都放在如何使 js bundle 更小上，首先我们需要了解 Webpack 是如何打包的。 Webpack 打包时会创建依赖关系图，该…

很常见，很普通，可能会变得乏味... 我们来看一个需求，假设有一个 Header 组件，包含应用的布局和一些信息，这些信息可能与用户相关 - UserInfo 组件，也可能与公司相关 - CompanyInfo 组件，希望根据配置值显示其中一个。 似乎改善了一点，但是，还是需要…

未经优化或压缩的图片是网站初次加载性能不佳的主要原因之一，根据分辨率和质量，图片最终可能占网站总大小70％以上。本文旨在介绍优化Web图片的常用工具和方法。 图片的宽度px值 * 高度px值 * 3bytes (24bits，RGB颜色系统)，可以得到图片的原始大小，再将结果除…