WebKit 技术内幕之浏览器与WebKit内核

简介: 此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。

前言


此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。


而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。


第一章 浏览器和浏览器内核


WebKit 内核是苹果2005年先开发并提出开源的,后面 Google 也以此为基础,并独立开发出 Chromium 的,2008年 Google 为 WebKit 为内核创建了一个新项目 chormium ,后来 Google 的 chrom 占领了浏览器的大部分市场。


微信图片_20220512172037.png


图 1-6 显示的是该项目的大模块。图中“WebKit 嵌入式接口”就是批的狭义 WebKit,它批的是在 WebCore(包含上面提到的 HTML 解释器、CSS 解释器和布局等模块)和 JavaScript 引擎之上的一层绑定和嵌入式编程接口,可以被浏览器调用。


微信图片_20220512172057.png


Chromium 内核 Blink


2013年4月 gogle宣布从 WebKit中复制一份出来然后独立,并运作为Blink项目。


第二章 HTML网页与结构


1. 基本组成 html 、css、js。


2. html5新特性 video、canvas、2d、3d等,2012年就推出。


3. 框结构: iframe、frame、frameset,用于嵌入html文档。


微信图片_20220512172126.png


微信图片_20220512172137.png


上面的图说的是 iframe 的应用


4. 层次结构


理解层次结构非常重要,因为它可以帮忙你理解 WebKit 如何构建它来渲染,这有助于写高效的 HTML 代码。


网页的层次结构是指网页中的元素可能分布在不周的层次中,也就是说某些元素可以不同于它的父元素所在的层次,因为某些原因, WebKit 需要为该元素和它的子女建立一个新层。


微信图片_20220512172157.png


图中各层的前后关系。“ 根层 ” 在最后面,“ 层 3 ”和 “层 4 ” 在最前面。规律是需要复杂变换和处理的元素,它们需要新层,所以 WebKit 为它们构建新层其实是为了渲染引擎在处理上的方便和高效。对于不同的基于 WebKit 的浏览器,分层策略也有可能不一样,通常是有一些基本原则的,比如 video 、2d、3d 转换、canvas 等。


5. WebKit网页内核的渲染过程


微信图片_20220512172224.png


微信图片_20220512172242.png


微信图片_20220512172254.png


微信图片_20220512172306.png


微信图片_20220512172357.png


微信图片_20220512172412.png



6. 编写高效代码注意点


微信图片_20220512172432.png


相关文章
|
11月前
|
存储 监控 安全
360 企业安全浏览器基于阿里云数据库 SelectDB 版内核 Apache Doris 的数据架构升级实践
为了提供更好的日志数据服务,360 企业安全浏览器设计了统一运维管理平台,并引入 Apache Doris 替代了 Elasticsearch,实现日志检索与报表分析架构的统一,同时依赖 Doris 优异性能,聚合分析效率呈数量级提升、存储成本下降 60%....为日志数据的可视化和价值发挥提供了坚实的基础。
360 企业安全浏览器基于阿里云数据库 SelectDB 版内核 Apache Doris 的数据架构升级实践
|
11月前
|
Web App开发 小程序 前端开发
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
199 10
|
11月前
|
Rust JavaScript 前端开发
WebAssembly 技术:解锁浏览器的无限潜能
随着互联网的快速发展,Web 应用程序的功能需求也越来越复杂。传统的 JavaScript 语言在处理大规模数据和高性能计算方面存在一些局限性。然而,WebAssembly 技术的出现改变了这一切。本文将介绍什么是 WebAssembly,它的应用领域以及如何使用它来提升 Web 应用程序的性能和体验。
|
Web App开发 前端开发 JavaScript
|
1月前
|
数据采集 存储 运维
无头浏览器与请求签名技术
本文分享了在面对Cloudflare防护(如Amazon网站)时,如何通过无头浏览器、请求签名技术和爬虫代理IP实现数据采集的故障排查与改进方案。首先,介绍了从常规请求失败到引入Selenium无头浏览器的过程,解决了Cookie和User-Agent检测问题。接着,通过生成请求签名绕过二次验证,并利用代理IP规避访问风险。最后,提出了架构改进方案,包括无头浏览器集群化、签名算法优化、代理池管理和多层次容错机制,以提高系统的稳定性和扩展性。示例代码展示了如何设置代理、获取Cookie并生成签名,成功采集商品信息。
无头浏览器与请求签名技术
|
10月前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
110 0
|
8月前
|
存储 JSON 监控
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
663 1
|
9月前
|
Web App开发 前端开发 JavaScript
认识WebKit浏览器引擎
WebKit是一款开源的浏览器引擎,用于渲染网页内容。它负责将HTML、CSS和JavaScript等网络资源转换为用户在屏幕上看到的图形界面。WebKit是一个跨平台的引擎,可以在多种操作系统上运行,如Windows、macOS、Linux等。
121 2
|
10月前
技术经验分享:360浏览器截图快捷键设置
技术经验分享:360浏览器截图快捷键设置
169 0
技术经验分享:360浏览器截图快捷键设置
|
9月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改

热门文章

最新文章

下一篇
oss创建bucket