同源策略：为什么XMLHttpRequst不能跨域请求资源
通过前面 6 个模块的介绍，我们已经大致知道浏览器是怎么工作的了，也了解这种工作方式对前端产生了什么样的影响。在这个过程中，我们还穿插介绍了一些浏览器安全相关的内容，不过都比较散，所以最后的 5 篇文章，我们就来系统地介绍下浏览器安全相关的内容。 浏览器安全可以分为三大块——Web 页面安全、浏览器网络安全和浏览…
Read articleThe archive
The Journal
Notes on frontend development, engineering, and everyday ideas. Find a subject and start reading.
虚拟DOM：虚拟DOM和实际DOM有何不同
虚拟 DOM 是最近非常火的技术，两大著名前端框架 React 和 Vue 都使用了虚拟 DOM，所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了，React 和 Vue 框架本身所蕴含的知识点非常多，而且也不是我们专栏的重点，所以在这里我们还是把重心聚焦在虚拟 DOM 上。 在本文我…
Read article渲染流水线：CSS如何影响首次加载时的白屏时间？
在上一篇文章中我们详细介绍了 DOM 的生成过程，并结合具体例子分析了 JavaScript 是如何阻塞 DOM 生成的。那本文我们就继续深入聊聊渲染流水线中的 CSS。因为 CSS 是页面中非常重要的资源，它决定了页面最终显示出来的效果，并影响着用户对整个网站的第一体验。所以，搞清楚浏览器中的 CSS 是怎么工…
Read article页面性能：如何系统优化页面
在前面几篇文章中，我们分析了页面加载和 DOM 生成，讨论了 JavaScript 和 CSS 是如何影响到 DOM 生成的，还结合渲染流水线来讲解了分层和合成机制，同时在这些文章里面，我们还穿插说明了很多优化页面性能的最佳实践策略。通过这些知识点的学习，相信你已经知道渲染引擎是怎么绘制出帧的，不过之前我们介绍的…
Read article页面性能分析：利用Chrome做web性能分析
“浏览器中的页面循环系统”模块我们已经介绍完了，循环系统是页面的基础，理解了循环系统能让我们从本质上更好地理解页面的工作方式，加深我们对一些前端概念的理解。 接下来我们就要进入新的模块了，也就是“浏览器中的页面”模块，正如专栏简介中所言，页面是浏览器的核心，浏览器中的所有功能点都是服务于页面的，而 Chrome …
Read articleasync await使用同步方式写异步代码
在上篇文章中，我们介绍了怎么使用 Promise 来实现回调操作，使用 Promise 能很好地解决回调地狱的问题，但是这种方式充满了 Promise 的 then() 方法，如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程。 比如下面这样一个实际的使用场景：我先…
Read articleCORB 应对策略
我如何确保 CORB 保护我网站上的资源？ 为确保您网站上的敏感资源（例如包含用户特定信息的页面或 JSON 文件，或包含 CSRF 令牌的页面）不会泄漏到其他 Web 源，请采取以下步骤将它们与允许的资源区分开来由任何站点嵌入（例如，图像、JavaScript 库）。 对于 HTML、JSON 和 XML 资源…
Read articleCross-Origin Read Blocking (CORB) 跨域读阻塞
跨源读取阻止 (CORB)，这是一种算法，通过该算法可以识别可疑的跨源资源加载，并在它们到达网页之前被 Web 浏览器阻止。CORB 通过使敏感数据远离跨源网页来降低泄露敏感数据的风险。在大多数浏览器中，它将此类数据排除在不受信任的脚本执行上下文之外。在具有Site Isolation的浏览器中，它可以将此类数据…
Read articleCross-Origin Read Blocking (CORB) 网络兼容性和对其他资源的影响问题
CORB 对图像的影响 CORB 对标签应该没有明显的影响 ，除非图像资源 1) 被错误地标记为不正确的、非图像的、受 CORB 保护的 Content-Type 和 2) 与响应标头一起提供X-Content-Type-Options: nosniff。 例子： 正确标记的 HTML 文档 标签中使用的资源 ：…
Read articleCSRF攻击：陌生链接不要随便点
中我们讲到了 XSS 攻击，XSS 的攻击方式是黑客往用户的页面中注入恶意脚本，然后再通过恶意脚本将用户页面的数据上传到黑客的服务器上，最后黑客再利用这些数据进行一些恶意操作。XSS 攻击能够带来很大的破坏性，不过另外一种类型的攻击也不容忽视，它就是我们今天要聊的 CSRF 攻击。 相信你经常能听到的一句话：“别…
Read articleDOM树：JavaScript是如何影响DOM树构建的
在上一篇文章中，我们通过开发者工具中的网络面板，介绍了网络请求过程的几种性能指标以及对页面加载的影响。 而在渲染流水线中，后面的步骤都直接或者间接地依赖于 DOM 结构，所以本文我们就继续沿着网络数据流路径来介绍 DOM 树是怎么生成的。然后再基于 DOM 树的解析流程介绍两块内容：第一个是在解析过程中遇到 Ja…
Read articleHTTP1：HTTP性能优化
谈及浏览器中的网络，就避不开 HTTP。我们知道 HTTP 是浏览器中最重要且使用最多的协议，是浏览器和服务器之间的通信语言，也是互联网的基石。而随着浏览器的发展，HTTP 为了能适应新的形式也在持续进化，我认为学习 HTTP 的最佳途径就是了解其发展史，所以在接下来的三篇文章中，我会从浏览器发展的视角来和你聊聊…
Read articleNo matching articles
Try another keyword or reset your filters.