![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Chrome渲染教程
讲解Chrome渲染流水线,页面优化等知识。
「已注销」
这个作者很懒,什么都没留下…
展开
-
JavaScript中的变量提升机制
我们都知道JavaScript是一门比较 “神奇” 的语言,为什么这么说呢?因为它的一些原理是我们所不能直接理解的,今天就讲下一个关于JavaScript的一个 “神奇” 原理——变量提升。首先,我们看下面的一段代码:showName()console.log(myname)var myname = '这是个神奇的语言'function showName () { console.lo...原创 2020-03-18 22:05:51 · 263 阅读 · 0 评论 -
服务器端页面被送达到浏览器用的协议-TCP协议
在衡量Web页面性能的时候有个重要的指标叫"FP(First Paint)",是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率,更快的页面响应意味着更多的PV、更高的参与度,以及更高的转化率。那什么影响FP指标呢?其中一个重要的因素是网络加载速度。我们知道,网页在传输过程中使用的是TCP/IP协议,HTTP、WebSocket都是基于这个协议的。在网络中,一个文件通常会被拆分为...原创 2020-03-02 20:37:44 · 780 阅读 · 0 评论 -
详细的HTTP请求流程
浏览器端发起HTTP请求流程如果你在浏览器地址栏中输入百度网站的地址:https://www.baidu.com,那么接下来,浏览器会完成哪些动作呢?我们就一步一步详细"追踪"下。1.构建请求首先,浏览器构建请求行信息(如下所示),构建好后,浏览器准备发起网络请求。GET /index.html HTTP1.12.查找缓存在真正发起网络请求之前,浏览器会先在浏览器缓存中查询是否有要请求...原创 2020-03-03 20:52:10 · 601 阅读 · 0 评论 -
导航流程简介:从输入URL到页面展示
今天我来说下整个导航流程,首先,我问个问题,看大家是否能详细回答——在浏览器中,从输入URL到页面展示,这中间发生了什么?如果你能详细的回答,那么这篇文章对你来说,是小巫见大巫了。首先,我们从图说起,看下图:如果你看过我之前的文章《浅析Chrome浏览器的多进程架构》,那你肯定知道打开Chrome会有一个浏览器进程、一个网络进程和至少一个渲染进程存在。而在整个导航流程中,这些进程是相互配合...原创 2020-03-04 21:24:40 · 757 阅读 · 0 评论 -
浅析Chrome的渲染流程(下)
在浅析Chrome的渲染流程(上)中我们介绍了渲染流水线中的 DOM生成、样式计算 和 布局 三个阶段。今天我们来讲下渲染流水线后面的阶段。分层经过生成布局之后生成的布局树,将每个元素的具体位置信息都计算出来了,那么接下来是不是开始着手绘制页面了?答案依然是否定的。因为页面中有很多复杂的效果,比如一些复杂的3D变换、页面滚动,或者使用z-indexing做z轴排序等。为了更加方便地实现这些...原创 2020-03-15 21:58:35 · 731 阅读 · 0 评论 -
浅析Chrome的渲染流程(上)
通常,我们编好了HTML、CSS、JavaScript等文件,经过浏览器就会显示出漂亮的页面,但是浏览器是怎么将它们转化成页面的呢?有兴趣的朋友请往下看。HTML、CSS、JavaScript是什么首先我们看下面的图:从图中可以看出,HTML的内容是由标记和文本组成。标记也称为标签,每个标签都有它自己的语义(div、span除外),浏览器会根据标签的语义来正确展示HTML内容。比如上面的&...原创 2020-03-06 21:10:08 · 695 阅读 · 0 评论 -
浅析Chrome浏览器的多进程架构
无论你是设计高性能的Web应用,还是从事Electron开发,或是从事Node.js扩展C++开发,了解Chrome的多进程架构以及网络流程、页面渲染过程、JavaScript执行流程等知识,是很有必要的。这一章,我在这里为大家浅析一下Chrome的多进程架构原理。Chrome进程在任务管理器中的样子下面这幅图就是打开Chrome浏览器初始页面时,在任务管理器中看到的chrome多进程的样子。...原创 2020-03-01 18:00:39 · 1340 阅读 · 1 评论