渲染时间点
渲染过程
当浏览器的网络线程收到 HTML 文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列。
在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程。
整个渲染流程分为多个阶段,分别是: HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画
每个阶段都有明确的输入输出,上一个阶段的输出会成为下一个阶段的输入。
这样,整个渲染流程就形成了一套组织严密的生产流水线。
1. 解析 HTML - Parse渲染的第一步是解析 HTML。
解析过程中遇到 CSS 解析 CSS,遇到 JS 执行 JS。为了提高解析效率,浏览器在开始解析前,会启动一个预解析的线程,率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。
如果主线程解析到link位置,此时外部的 CSS 文件还没有下载解析好,主线程不会等待,继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。
如果主线程解析到script位置,会停止解析 HTML,转而等待 JS 文件下载好,并将 ...
浏览器的进程模型何为进程?程序运行需要有它自己专属的内存空间,可以把这块内存空间简单的理解为进程
每个应用至少有一个进程,进程之间相互独立,即使要通信,也需要双方同意。
何为线程?有了进程后,就可以运行程序的代码了。
运行代码的「人」称之为「线程」。
一个进程至少有一个线程,所以在进程开启后会自动创建一个线程来运行代码,该线程称之为主线程。
如果程序需要同时执行多块代码,主线程就会启动更多的线程来执行代码,所以一个进程中可以包含多个线程。
浏览器有哪些进程和线程?浏览器是一个多进程多线程的应用程序
浏览器内部工作极其复杂。
为了避免相互影响,为了减少连环崩溃的几率,当启动浏览器后,它会自动启动多个进程。
可以在浏览器的任务管理器中查看当前的所有进程
其中,最主要的进程有:
浏览器进程
主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
网络进程
负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
渲染进程(本节课重点讲解的进程)
渲染进程启动后,会开启一个渲染主线程,主线程负责执行 HTML、CSS、JS 代码。
默 ...
本文整理了七种常见 GC 算法的基本原理,包括 GC 标记-清除法、引用计数法、GC 标记-复制算法、GC 标记-压缩算法、保守式 GC、分代垃圾回收、增量式垃圾回收(三色标记法),可以作为学习 GC 知识的框架。
前言本文主要是中村成洋、相川光写的《垃圾回收的算法与实现》一书的读书笔记,没有输出的学习就是一盘散沙。我们要学习 GC 就要系统性的学,形成自己的知识框架,后面再学习其他的 GC 实现,就知道该放在框架的哪个地方,本文起到了作为 GC 知识框架的作用。不管技术风云怎么变化,打牢基础总是不会错的。
一、为什么要有 GC1.1 什么是 GCGC 是 Garbage Collection 的简称,中文称为“垃圾回收”。GC ,是指程序把不用的内存空间视为垃圾并回收掉的整套动作。
GC 要做的有两件事:
找到内存空间里的垃圾;
回收垃圾,让程序能再次利用这部分空间。
满足这两项功能的程序就是 GC。
1.2 为什么要有 GC在没有 GC 的世界里,程序员必须自己手动进行内存管理,必须清楚地确保必要的内存空间,释放不要的内存空间。
程序员在手动进行内存管理时,申请内存尚不存在 ...
如何让你的 APP 图标动起来?这是一个很有意思的事情,从系统提供的切换 APP 图标 的 API 实现中,一步步通过反编译,解决了弹框提醒、进入后台等问题,实现了 APP 的动态图标。并附带有 Github Demo实现 AnimatedAppIcons,效果如下:
Your browser does not support the video tag.
原文链接
一. 什么是链式?可以连续不断地进⾏方法调⽤用的一种语法形式。
二. 探究链式的使用与实现本质示例 1:打豆豆
有位科学家到了南极,碰到一群企鹅。他问其中一个:“你每天都干什么呀?”那企鹅说:“吃饭睡觉打豆豆。”他又问另一个:“你每天都干什么呀?”那企鹅也源说:“吃饭睡觉打豆豆。”他问了许多许多的企鹅,都说:“吃饭睡觉打豆豆。”后来他碰到了一只小企鹅,很可爱的样子,就问它:“小朋友,你每天都干什么呀?”小企鹅说:“吃饭睡觉。”科学家一愣,随即问到:“你怎么不打豆豆呀?”小企鹅委屈的说:“因为我就是豆豆。”
思考一下如何用代码表述这些企鹅每天都做了什么 ❓
普通的实现方式
// 其他企鹅的一天let otherPenguin = Penguin()otherPenguin.eat()otherPenguin.sleep()otherPenguin.strike(penguin: "豆豆")print(otherPenguin.description)// ->吃饭->睡觉->打豆豆
使用链式实现
let longDay = Penguin.sta ...
理解泛型
泛型的定义在 Swift 语言中,泛型是一种编程技术,它允许你编写灵活、可重用的函数和类型,可以工作于任何类型。泛型的主要好处是它可以帮助你避免重复代码,并用一种清晰和抽象的方式来表达代码的意图。泛型的占位类型,可以是 T,也可以是 U,完全由您决定,使用一个由含义的占位符,更能表达含义。例如:系统对数组的定义 struct Array<Element>。
在某场技术活动中,需要管理会场中的观众,每人必须观看两个小时才可以离场(先进先出,无法提前离场)。
会场分为三个会场,分别有以下要求:
主会场 A:有入场号可以进
分会场 B:使用姓名就可以进
女性会场 C: 有号码的女性可以进
在主会场 A 中,由于准备充分,每个入场的观众发放参会证,使用参会证上的号码入场。
使用 Stack 管理观众的入场和离场。Stack 通过 push 方法记录入场的用户号码,通过 pop 方法移除离场的用户。
struct Stack { var items = [Int]() mutating func push(_ item: Int) { ...
Swift 的函数式编程是一种编程范式,它强调使用函数来处理数据和表达程序逻辑。Swift 的函数式编程核心思想是使用一等函数(first-class functions)和不可变性(immutability)来编写代码,这样可以更容易地推理和测试。函数式编程鼓励使用纯函数(输入完全决定输出,无副作用)和高阶函数(可以接受其他函数作为参数或返回函数的函数)。
let numbers = [1, 2, 3, 4, 5] // 使用 map 函数将每个数字乘以 2 let doubledNumbers = numbers.map { $0 * 2 } // 使用 filter 函数筛选出偶数 let evenNumbers = numbers.filter { $0 % 2 == 0 } // 使用 reduce 函数计算所有数字的总和 let sumOfNumbers = numbers.reduce(0, +) print(doubledNumbers) // 输出 [2, 4, 6, 8, 10] print(evenNumb ...
面向协议编程
你可能听过类似的概念:面向对象编程、函数式编程、泛型编程,再加上苹果新提出的面向协议编程,这些统统可以理解为是一种编程范式。所谓编程范式,是隐藏在编程语言背后的思想,代表着语言的作者想要用怎样的方式去解决怎样的问题。不同的编程范式反应在现实世界中,就是不同的编程语言适用于不同的领域和环境,比如在面向对象编程思想中,开发者用对象来描述万事万物并试图用对象来解决所有可能的问题。编程范式都有其各自的偏好和使用限制,所以越来越多的现代编程语言开始支持多范式,使语言自身更强壮也更具适用性。面向协议编程是在面向对象编程基础上演变而来,将程序设计过程中遇到的数据类型的抽取(抽象)由使用基类进行抽取改为使用协议进行抽取。更简单点举个例子来说,一个猫类、一个狗类,我们很容易想到抽取一个描述动物的基类,这就是面向对象编程。当然也会有人想到抽取一个动物通用的协议,这就是面向协议编程了。而在 Swift 语言中,协议被赋予了更多的功能和更广阔的使用空间,为协议增加了扩展功能,使其能够胜任绝大多数情况下数据类型的抽象,所以苹果开始声称 Swift 是一门支持面向协议编程的语言。
协议基础
官方 ...
在 iOS 中,只有继承了 UIResponder(响应者)类的对象才能接收并处理事件。其公共子类包括 UIView、UIViewController 和 UIApplication 。UIResponder 类中提供了以下 4 个对象方法来处理触摸事件:
/// 触摸开始override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {}/// 触摸移动override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {}/// 触摸取消(在触摸结束之前)/// 某个系统事件(例如电话呼入)会打断触摸过程override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {}/// 触摸结束override func touchesEnde ...
1.最炫酷的 AI 工具 - LUMA
描述: 一个计算机视觉和图像处理工具库。它提供了先进的图像处理算法和模型,如物体检测、图像分割、图像增强等。Luma Labs 具有高性能的图像处理能力,可以灵活集成到现有应用程序中,为大家提供丰富的图像处理功能。
官方链接:LUMA AI
2.看起来最有用的 AI 工具 - Gamma
描述: 使用这款强大的 AI 生成器,创建一个工作演示文稿、文档或网页,您可以在不到一分钟的时间内进行改进和定制。
官方链接: Gamma
3.最好用的 AI 搜索引擎 - Phind
描述: 一个无需注册的 AI 搜索引擎,让你轻松解决编程问题!
官方链接: Phind
4.最有潜力的 AI - vall-e-x
描述: 仅需 3 秒音频实现声音克隆!
官方链接: vall-e-x
5.最好用的 AI 学习工具 - Albus
描述: 一种与 AI 技术互动的全新方式。Albus 可以分解主题、创建见解、生成图像和音频。
官方链接: Albus
6.使用最多的 AI 工具 - Raycast AI
描述: 想取代 Spotlight 的「野心工具」
...