重学前端
程劭非（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
下载
客户端
返回
顶部