文章分类 - 极客时间
摘要：你好，我是李兵 上节我们介绍了如何使用Performance，而且我们还提到了性能指标面板中的Main指标，它详细地记录了渲染主线程上的任务执行记录，通过分析Main指标，我们就能够定位到页面中所存在的性能问题，本节，我们就来介绍如何分析Main指标。 任务 vs 过程 不过在开始之前，我们要讲清楚
阅读全文
摘要：你好，我是李兵。 在分析页面性能时，如果说Audits是道开胃菜，那么Performance才是正餐，之所这样说，主要是因为Performance可以记录站点在运行过程中的性能数据，有了这些性能数据，我们就可以回放整个页面的执行过程，这样就方便我们来定位和诊断每个时间段内页面的运行情况，从而有效帮助
阅读全文
摘要：你好，我是李兵。 作为一名前端工程师，除了需要编写功能性的代码以外，我们还需要关注Web应用的性能问题，我们应该有能力让我们的Web应用占用最小的资源，并以最高性能运行，这也是前端工程师进阶的必要能力。既然性能这么重要，那么我们今天要来聊聊Web性能问题。 到底什么是Web性能? 我们看下wiki对
阅读全文
摘要：你好，我是李兵。 我们都知道，要想利用JavaScript实现高性能的动画，那就得使用requestAnimationFrame这个API，我们简称rAF，那么为什么都推荐使用rAF而不是setTimeOut呢？ 要解释清楚这个问题，就要从渲染进程的任务调度系统讲起，理解了渲染进程任务调度系统，你自
阅读全文
摘要：你好，我是李兵。 在留言区，经常有朋友问到如何计算Chrome中渲染进程个数的问题，那么今天我就来完整地解答这个问题。 在前面“04 | 导航流程”这一讲中我们介绍过了，在默认情况下，如果打开一个标签页，那么浏览器会默认为其创建一个渲染进程。不过我们在“04 | 导航流程”中还介绍了同一站点的概念，
阅读全文
摘要：你好，我是李兵。不知不觉中专栏已经更新完了，总的来说， 我写本专栏的过程是痛并快乐着。 觉得痛苦是因为写作期间每一天都能感受到多方的压力，完全没有放松的机会。在这过程中，阅读Chromium和V8的源代码占用了我大量的时间，因为有时候要验证文章的一些观点，或者找出一些知识点的实现逻辑，都需要通过阅读
阅读全文
摘要：浏览器安全主要划分为三大块内容：页面安全、系统安全和网络安全。前面我们用四篇文章介绍了页面安全和系统安全，也聊了浏览器和Web开发者是如何应对各种类型的攻击，本文是我们专栏的最后一篇，我们就接着来聊聊网络安全协议HTTPS。 我们先从HTTP的明文传输的特性讲起，在上一个模块的三篇文章中我们分析过，
阅读全文
摘要：前面三篇文章我们主要围绕同源策略介绍了Web页面安全的相关内容，那今天我们把视野向外延伸，来聊聊页面安全和操作系统安全之间的关系。 在《01 | Chrome架构：仅仅打开了1个页面，为什么有4个进程？》那篇文章中，我们分析了浏览器架构的发展史，在最开始的阶段，浏览器是单进程的，这意味着渲染过程、J
阅读全文
摘要：在上一篇文章中我们讲到了XSS攻击，XSS 的攻击方式是黑客往用户的页面中注入恶意脚本，然后再通过恶意脚本将用户页面的数据上传到黑客的服务器上，最后黑客再利用这些数据进行一些恶意操作。XSS攻击能够带来很大的破坏性，不过另外一种类型的攻击也不容忽视，它就是我们今天要聊的CSRF攻击。 相信你经常能听
阅读全文
摘要：通过上篇文章的介绍，我们知道了同源策略可以隔离各个站点之间的DOM交互、页面数据和网络通信，虽然严格的同源策略会带来更多的安全，但是也束缚了Web。这就需要在安全和自由之间找到一个平衡点，所以我们默认页面中可以引用任意第三方资源，然后又引入CSP策略来加以限制；默认XMLHttpRequest和Fe
阅读全文
摘要：通过前面6个模块的介绍，我们已经大致知道浏览器是怎么工作的了，也了解这种工作方式对前端产生了什么样的影响。在这个过程中，我们还穿插介绍了一些浏览器安全相关的内容，不过都比较散，所以最后的5篇文章，我们就来系统地介绍下浏览器安全相关的内容。 浏览器安全可以分为三大块——Web页面安全、浏览器网络安全和
阅读全文
摘要：前面两篇文章我们分析了HTTP/1和HTTP/2，在HTTP/2出现之前，开发者需要采取很多变通的方式来解决HTTP/1所存在的问题，不过HTTP/2在2018年就开始得到了大规模的应用，HTTP/1中存在的一大堆缺陷都得到了解决。 HTTP/2的一个核心特性是使用了多路复用技术，因此它可以通过一个
阅读全文
摘要：上一篇文章我们聊了HTTP/1.1的发展史，虽然HTTP/1.1已经做了大量的优化，但是依然存在很多性能瓶颈，依然不能满足我们日益变化的新需求，所以就有了我们今天要聊的HTTP/2。 本文我们依然从需求的层面来谈，先分析HTTP/1.1存在哪些问题，然后再来分析HTTP/2是如何解决这些问题的。 我
阅读全文
摘要：谈及浏览器中的网络，就避不开HTTP。我们知道HTTP是浏览器中最重要且使用最多的协议，是浏览器和服务器之间的通信语言，也是互联网的基石。而随着浏览器的发展，HTTP为了能适应新的形式也在持续进化，我认为学习HTTP的最佳途径就是了解其发展史，所以在接下来的三篇文章中，我会从浏览器发展的视角来和你聊
阅读全文
摘要：在上一篇文章中我们从技术演变的角度介绍了PWA，这是一套集合了多种技术的理念，让浏览器渐进式适应设备端。今天我们要站在开发者和项目角度来聊聊WebComponent，同样它也是一套技术的组合，能提供给开发者组件化开发的能力。 那什么是组件化呢？ 其实组件化并没有一个明确的定义，不过这里我们可以使用1
阅读全文
摘要：在专栏开篇词中，我们提到过浏览器的三大进化路线： 第一个是应用程序Web化； 第二个是Web应用移动化； 第三个是Web操作系统化； 其中，第二个Web应用移动化是Google梦寐以求而又一直在发力的一件事，不过对于移动设备来说，前有本地App，后有移动小程序，想要浏览器切入到移动端是相当困难的一件
阅读全文
摘要：虚拟DOM是最近非常火的技术，两大著名前端框架React和Vue都使用了虚拟DOM，所以我觉得非常有必要结合浏览器的工作机制对虚拟DOM进行一次分析。当然了，React和Vue框架本身所蕴含的知识点非常多，而且也不是我们专栏的重点，所以在这里我们还是把重心聚焦在虚拟DOM上。 在本文我们会先聊聊DO
阅读全文
摘要：在前面几篇文章中，我们分析了页面加载和DOM生成，讨论了JavaScript和CSS是如何影响到DOM生成的，还结合渲染流水线来讲解了分层和合成机制，同时在这些文章里面，我们还穿插说明了很多优化页面性能的最佳实践策略。通过这些知识点的学习，相信你已经知道渲染引擎是怎么绘制出帧的，不过之前我们介绍的内
阅读全文
摘要：在上一篇文章中我们分析了CSS和JavaScript是如何影响到DOM树生成的，今天我们继续沿着渲染流水线向下分析，来聊聊DOM树之后所发生的事情。 在前面《05 | 渲染流程（上）：HTML、CSS和JavaScript文件，是如何变成页面的？》文章中，我们介绍过DOM树生成之后，还要经历布局、分
阅读全文
摘要：在上一篇文章中我们详细介绍了DOM的生成过程，并结合具体例子分析了JavaScript是如何阻塞DOM生成的。那本文我们就继续深入聊聊渲染流水线中的CSS。因为CSS是页面中非常重要的资源，它决定了页面最终显示出来的效果，并影响着用户对整个网站的第一体验。所以，搞清楚浏览器中的CSS是怎么工作的很有
阅读全文
浙公网安备 33010602011771号