你不知道的浏览器渲染原理

2019 年 4 月 15 日

你不知道的浏览器渲染原理

前言

浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是 JS 引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。这里面大家最耳熟能详的可能就是 Webkit 内核了,Webkit 内核是当下浏览器世界真正的霸主。

本文我们就以 Webkit 为例,对现代浏览器的渲染过程进行一个深度的剖析。

想阅读更多优质文章请猛戳 GitHub 博客

页面加载过程

在介绍浏览器渲染过程之前,我们简明扼要介绍下页面的加载过程,有助于更好理解后续渲染过程。

要点如下:

  • 浏览器根据 DNS 服务器得到域名的 IP 地址;

  • 向这个 IP 的机器发送 HTTP 请求;

  • 服务器收到、处理并返回 HTTP 请求;

  • 浏览器得到返回内容。

例如在浏览器输入https://juejin.im/timeline,然后经过 DNS 解析,juejin.im对应的 IP 是36.248.217.149(不同时间、地点对应的 IP 可能会不同)。然后浏览器向该 IP 发送 HTTP 请求。

服务端接收到 HTTP 请求,然后经过计算(向不同的用户推送不同的内容),返回 HTTP 请求,返回的内容如下:

原文链接:【 https://www.infoq.cn/article/DltDuLToZIk_ZRqfb4jG 】。未经作者许可,禁止转载。

登录后可解锁全站优质内容

免费畅享技术公开课、顶尖技术团队访谈、一线互联网大厂技术实践

文章
视频
电子书
研究报告
立即登录
2019 年 4 月 15 日 13:30 12700

评论 1 条评论

发布
用户头像
可以转载到酷安网吗?我会注明作者和链接。
2019 年 04 月 15 日 14:53
回复
没有更多评论了
发现更多内容

第五周-命题作业

JI

极客大学架构师训练营

架构师0期第五周总结

何伟敏

第五周-总结

JI

极客大学架构师训练营

架构师训练营第五周总结

极客大学架构师训练营

架构师训练营第5周作业

aoeiuvzcs

直接赋值,深拷贝和浅拷贝

Leetao

Python Python基础知识

再谈任务分解

松花皮蛋me

Java 精益开发

创业使人成长系列 (1)- 从失败中学习

石云升

创业 个人成长 成长

功利学习法:我为什么要这么功利?

非著名程序员

学习方法 程序员 程序人生 提升认知

week5 总结

AIK

架构师训练营 week05 作业

GunShotPanda

week05-作业

seki

架构师训练营 0 期第五周

Blink

你真的在做持续集成吗?

Winfield

DevOps 持续集成 CI/CD

Spring Boot 最流行的 16 条实践解读,值得收藏!

Java小咖秀

spring 学习 Spring Boot SpringBoot 2 经验分享

深入理解CAS:以AtomicInteger为例

独钓寒江雪

Atomic CAS AtomicInteger 自旋

架构师0期第五周命题作业

何伟敏

架构师训练营第五周 - 总结

桔子

架构师训练营第5周总结

aoeiuvzcs

小师妹学JVM之:Dirty cards和PLAB

程序那些事

Java JVM 小师妹 性能调优 JIT

Atlassian Team Playbook | OKR 好的不只是逼格

Atlassian速递

开发

架构师第五周

Tulane

架构学习第5周作业

乐天

架构师训练营第五周 - 作业

桔子

[架构师训练营] Week02 - 作业

谭方敏

Homework-我的一致性Hash算法

River Tree

Homework

架构师训练营总结 -5

River Tree

极客大学架构师训练营 个人总结

week05-总结

seki

一致性哈希算法Java实现

dapaul

架构师

架构训练营week05-总结

尔东雨田

第四周课后练习

秤须苑

极客大学架构师训练营

众安黑客马拉松大赛总决赛-InfoQ小编探班

众安黑客马拉松大赛总决赛-InfoQ小编探班

你不知道的浏览器渲染原理-InfoQ