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


相关文章
|
3月前
|
Web App开发 小程序 前端开发
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
43 0
|
7月前
|
Web App开发 前端开发 JavaScript
|
前端开发 JavaScript
web浏览器常用内核和web标准
web浏览器常用内核和web标准
web浏览器常用内核和web标准
|
Web App开发 前端开发 JavaScript
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”
322 0
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”
|
Web App开发 安全 iOS开发
Safari 被吐槽“太糟糕像新 IE”,苹果浏览器、WebKit 团队“连夜”征求反馈意见
Safari 被吐槽“太糟糕像新 IE”,苹果浏览器、WebKit 团队“连夜”征求反馈意见
103 0
Safari 被吐槽“太糟糕像新 IE”,苹果浏览器、WebKit 团队“连夜”征求反馈意见
|
前端开发 JavaScript Java
websocket部署后在谷歌内核浏览器异常断开问题
后端springboot前端vue开发的网页,利用websocket实现操作数据库前端网页实时刷新的功能
websocket部署后在谷歌内核浏览器异常断开问题
|
Web App开发 缓存 前端开发
火狐 和 谷歌Google Chrome 内核浏览器 跨域问题
火狐 和 谷歌Google Chrome 内核浏览器 跨域问题
243 0
|
数据采集
浏览器(2):自制Chromium内核浏览器,自动统计CSDN社区打卡记录(三)
自研、掌握核心科技?这我可不敢吹,我老老实实说我用了个Chromium内核组件。 为了统计一些数据,一条条复制粘贴肯定是够累的。用爬虫吧,自己还不精通,而且现在好多数据都需要登录才能请求,或者有些需要滑滚动条才显示。 比如csdn社区的打卡记录,一个月的如何快速的统计出来呢?
667 0
浏览器(2):自制Chromium内核浏览器,自动统计CSDN社区打卡记录(三)
|
数据采集 Web App开发 JavaScript
浏览器(2):自制Chromium内核浏览器,自动统计CSDN社区打卡记录(二)
自研、掌握核心科技?这我可不敢吹,我老老实实说我用了个Chromium内核组件。 为了统计一些数据,一条条复制粘贴肯定是够累的。用爬虫吧,自己还不精通,而且现在好多数据都需要登录才能请求,或者有些需要滑滚动条才显示。 比如csdn社区的打卡记录,一个月的如何快速的统计出来呢?
541 0
浏览器(2):自制Chromium内核浏览器,自动统计CSDN社区打卡记录(二)

热门文章

最新文章