重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

浏览器:一个浏览器是如何工作的?(阶段一)

winter 2019-02-09
对于前端开发来说,我们平时与浏览器打交道的时间是最多的。可浏览器对前端同学来说更多像一个神秘黑盒子的存在。我们仅仅知道它能做什么,而不知道它是如何做到的。
在我面试和接触过的前端开发者中,70% 的前端同学对这部分的知识内容只能达到“一知半解”的程度。甚至还有一部分同学会质疑这部分知识是否重要:这与我们的工作相关吗,学多了会不会偏移前端工作的方向?
事实上,我们这里所需要了解的浏览器工作原理只是它的大致过程,这部分浏览器工作原理不但是前端面试的常考知识点,它还会辅助你的实际工作,学习浏览器的内部工作原理和个中缘由,对于我们做性能优化、排查错误都有很大的好处。
在我们的课程中,我也会控制浏览器相关知识的粒度,把它保持在“给前端工程师了解浏览器”的水准,而不是详细到“给浏览器开发工程师实现浏览器”的水准。
那么,我们今天开始,来共同思考一下。一个浏览器到底是如何工作的。
实际上,对浏览器的实现者来说,他们做的事情,就是把一个 URL 变成一个屏幕上显示的网页。
这个过程是这样的:
浏览器首先使用 HTTP 协议或者 HTTPS 协议,向服务端请求页面;
把请求回来的 HTML 代码经过解析,构建成 DOM 树;
计算 DOM 树上的 CSS 属性;
最后根据 CSS 属性对元素逐个进行渲染,得到内存中的位图;
一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度;
合成之后,再绘制到界面上。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(29)

  • CC
    现在工作中暂时只使用到 HTTPS。

    去年,看到一些公司已经开始着手更新 HTTP2,不少敬佩的前端高手做了分享。

    他们利用 HTTP2 服务端推送,以及 TCP 连接复用的特性,把 CSS 和 JS 文件分拆成更小的文件,分批下载。

    更小的文件意味着用户可以更快看到页面,以及性能的改善。与此同时,这种处理方式也对生产环境的工具链带来调整和改变。

    很有意思的变化。
    2019-02-09
    85
  • yy不会笑
    自己可以扩展补充以下
    > DNS查询得到IP

    > tcp/ip的并发限制

    > get和post的区别

    > 五层因特网协议栈

    > 长连接与短连接

    > http2.0与http1.1的显著不同点:


    > 强缓存与协商缓存
    2019-02-09
    45
  • 徐จุ๊บ
    老师真的很喜欢猫呐
    2019-02-09
    12
  • 一步
    HTT2 还有一个很重要的特性:使用二进制代理文本进行传输,极大提高了传输的效率

    作者回复: 嗯 是 这块每太细讲 我觉得大家了解即可 主要是服务端的工作。

    2019-02-23
    9
  • umaru
    老师,浏览器渲染听说有重绘,回流什么的,哪里可以找到这一部分相关资料?
    2019-02-09
    1
    8
  • 新哥
    option请求在线上也会存在吧?非简单请求中的预请求
    2019-02-26
    7
  • oillie
    h2的头部会用哈夫曼编码压缩大小
    2019-02-09
    7
  • hhk
    那么 HTTP2 的 TCP 连接复用, 和 keep-alive 有什么区别呢?

    作者回复: 嗯,这块我没细讲,其实就是HTTP2要加这个头才能复用连接。

    2019-02-17
    6
  • 瞧,这个人
    当5G来临,http小优化都不用找了

    作者回复: 这完全是一种误解,物理层优化没法解决上层协议的问题。

    2019-02-16
    1
    5
  • Shaoyao·琚
    棒!已经开始阅览 HTTP3 的文档了🤣
    2019-02-09
    5
  • 温木
    看了您的流式数据的解释,是不是可以理解当看到页面渲染的时候,DOM是不是有可能都还没构建完成呢?即使是理论上,有这种可能吗?
    在网上看别人写的网页渲染原理,都是说dom构建完成了,再和构建css,都完成了才进行渲染的。
    老师能详细解释下吗?
    2019-04-28
    4
  • Russell
    关于缓存,304这块我整理了一片文章。https://github.com/XiaodongTong/blog/blob/master/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6.md
    2019-04-11
    2
  • 丫丫
    软件有bug,听上一个音频后切换下一个音频时,下一个音频开始播放的时间不是从零开始,是上一个音频的暂停时间点开始
    2019-03-23
    2
  • 维维
    找到了与老师的共同爱好,喜欢猫。
    2019-02-12
    2
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    /* var()函数 */
    :root {
      --bg-color: #cdcdcd;
      --font-color: blue;
    }
    body {
      background-color: var(--bg-color);
    }
    .title {
      color: var(--font-color);
    }
    /* attr()函数 */
    p:before {
      content: attr(data-foo) " ";
    }
    /* max()函数 */
    .test-max {
     height: 30px;
     background-color: #f00;
     width: max(30px, 50px);
    }
    /* toggle()函数 */
    ul {
    list-style-type:disk;
    }
            li > ul {
              list-style-type:toggle(disk, circle, square, box);
            }
    </style>
    </head>
    <body>
    <h1 class="title">标题引人注意</h1>
    <p data-foo="hello">world</p>
    <div class="test-max"></div>
    <ul>
     <li>1
       <ul>
         <li>1-1
           <ul>
             <li>1-1-1
               <ul>
                 <li>1-1-1-1</li>
               </ul>
             </li>
           </ul>
         </li>
       </ul>
     </li>
    </ul>
    </body>
    </html>

    max(),min(),clamp() 浏览器基本都不支持
    2019-03-26
    1
  • yeoman
    那位提问tag是什么的同学应该是问304请求那块提到的tag,温大指的是协商缓存中的etag(entity tag
    2019-03-09
    1
  • 芳玥
    3xx状态码,真的是给我补了一下。从来没踩过这个坑。
    2019-02-23
    1
  • ...
    老师,网站做https升级后,由于TLS加密,第一次连接,速度慢一点是可以理解,但是之后的连接速度也变得挺慢的,这个用户体验不好,这个是不是跟我申请的https证书有很大关系,除此之外,有没有好的建议?

    作者回复: 怀疑是没有复用连接,这个凭你给的信息我没法判断,得具体拿log分析时间都花在哪里了,一般来说跟证书关系不大。

    2019-02-17
    1
  • 请教老师:前端页面发送跨域ajax请求时,能正常发送和接受返回数据,但通过Chrome发现Request Header有警告信息:Provisional headers are shown;请问老师有什么解决的方法呢?
    我的ajax代码如下:
    $.ajax({
                    method : 'POST',
                    xhrFields: {
                        withCredentials: true
                    },
                    crossDomain:true, //允许跨域
                    contentType : 'application/json',
                    dataType : 'json',
                    url : 'http://localhost:8083/add',
                    data:JSON.stringify({
                        custCode:'icbc11',
                        custName:'工商银行11',
                        custAbbrEnglish:'icbc bank11'
                    }),
                    success : function(result){
                        console.log(result);
                    }
                });
    2019-06-30
  • Helen
    为什么对位图的合成是一个可选的过程,浏览器的composite 不是一定会执行的么,我以为这一步是无法不执行的

    作者回复: 可以不合成直接画,效率低而已。
    当然现代浏览器是不可能跳过这一步的。

    2019-06-29
收起评论
29
返回
顶部