Method for optimizing document loading speed of browser

Abstract

The invention relates to the technical field of browsers, and discloses a method for optimizing the document loading speed of a browser. According to the method, the performance bottleneck of repeatedly downloading network fonts is eliminated through a localized storage and reuse mechanism; on the basis of font resource persistent storage and a homologous sharing strategy of a local database, document rendering preparation time is compressed, so that loading efficiency is improved, and user waiting time is shortened; through key value matching and cache multiplexing, redundant accumulation of font resources in a memory is avoided, and the overall memory load of the browser is reduced; the two technologies cooperate with each other, so that the system stability is enhanced while the browsing fluency is improved, and more efficient and reliable webpage browsing experience is created.

Description

Technical Field

[0001] The present invention relates to the technical field of browsers, and in particular to a method for optimizing the speed at which a browser loads documents. Background Art

[0002] Currently, browsers primarily use the following font display modes: First, they prioritize using local system fonts for rendering and display. Second, if a specific font is missing from the local font library, a built-in fallback font is used, such as Chrome's Segoe UI and Firefox's Noto Sans. Third, some browsers prefer fonts without copyright disputes, such as Arial and Times New Roman. Furthermore, fonts may be downloaded from the network and temporarily cached in the browser's memory for rendering.

[0003] However, when obtaining fonts through the Internet, every time a new document is opened, the browser needs to re-execute the font download and cache operation process for the current tab. This process inevitably slows down the document loading speed and increases the browser's memory usage, which in turn has a negative impact on the overall performance of the browser and greatly damages the user experience.

[0004] In view of the above-mentioned drawbacks in the prior art, the present invention aims to effectively overcome the problems of slow document loading speed and excessive memory usage caused by browsers' poor font downloading and cache management over the network. The goal is to construct a new method that can optimize the font download process and significantly reduce the pressure of fonts on browser memory, thereby improving the speed of browser document loading. To this end, a method for optimizing the speed of browser document loading is proposed. Summary of the Invention

[0005] In view of the deficiencies of the prior art, the present invention provides a method for optimizing the speed of loading documents by a browser to solve the background technical problems.

[0006] To achieve the above object, the present invention provides the following technical solution: a method for optimizing the speed of loading documents by a browser, comprising: S1: In the initialization phase of opening a document in a browser, the document's embedded common font list and user-configured custom fonts are parsed; S2: Initiate a network request to the font server according to the font list to download the missing font resources; S3: Uses the browser's built-in database storage interface to store downloaded font resources in the form of key-value pairs in a local database, where: The key is a combination identifier of font name, weight and font style; The value is the binary data of the font file; S4: When loading the current document or a web page from the same origin, the browser's built-in rendering engine sends a query request to the local database during the DOM tree construction phase; If the database contains a font resource that matches the key value, the data is returned directly for rendering. If it does not exist, it triggers network download and stores the new font in the database according to the same logic; S5: Determine homology based on the three elements of web page URL protocol + domain name + port, and implement shared database font cache between homology web pages.

[0007] Preferably, the method for generating the commonly used font list includes: Automatically identify external font references declared in the document; Extracts the font family name and its variant metrics defined in the document style file.

[0008] Preferably, the configuration process of the user-defined font in S1 includes: Enter the target font name through the user interface provided by the browser; Upload local font files to the browser's isolated storage space.

[0009] Preferably, the database operation logic when storing font resources in S3 includes: Start a database transaction to ensure atomic data writing; Add version identification and last access timestamp to font resources; Create an index that associates font key values ​​with source web page URLs.

[0010] Preferably, the operation of querying the database in S4 includes: Generate search keys based on the name, weight and style of the font required by the current document; Performs an exact match query on the database index.

[0011] Preferably, the rendering process after extracting the font resource from the database includes: Convert binary font data into resource objects that can be recognized by the browser; Generates a resource identifier that can be directly called by the rendering engine.

[0012] Preferably, the specific rules for homology determination are: Compare the source address information of the current web page with the font cached in the database; Sharing is allowed only when the protocol type, primary domain name, and port number are exactly the same.

[0013] Preferably, the database has a maintenance mechanism including: Regularly clear font resources that have not been used for a preset time window; When a newer version of the same font is detected, the old cache is automatically replaced.

[0014] Preferably, the combination identifier construction rule of the font key value includes: a standardized font name character string, an additional digital weight parameter and a marked font style classification identifier.

[0015] Compared with the prior art, the present invention has the following beneficial effects: The present invention eliminates the performance bottleneck of repeatedly downloading network fonts through a local storage and reuse mechanism; based on the persistent storage of font resources in the local database and a same-origin sharing strategy, it compresses the document rendering preparation time, thereby improving loading efficiency and shortening user waiting time; through key-value matching and cache reuse, it avoids redundant accumulation of font resources in memory and reduces the overall memory load of the browser; the two technologies work together to improve browsing fluency while enhancing system stability, creating a more efficient and reliable web browsing experience.

[0016] Other features and advantages of the present invention will be described in the following description, and in part will become apparent from the description, or will be understood by practicing the present invention. The purpose and other advantages of the present invention can be realized and obtained by the structures pointed out in the description, claims and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 A flow chart of the method for optimizing the browser document loading speed according to the present invention; Figure 2 Generating a logic diagram for the font key value of the present invention; Figure 3 This is a flow chart of the homology determination mechanism of the present invention; Figure 4 This is a flow chart of the cache maintenance mechanism of the present invention; Figure 5 This is a diagram of the database storage architecture of the present invention. DETAILED DESCRIPTION

[0018] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this technical field without making any creative efforts shall fall within the scope of protection of the present invention.

[0019] See also Figure 1-Figure 5 A method for optimizing the speed of loading documents by a browser according to the present invention includes the following steps: S1: Document initialization and font requirement analysis 1. Document loading event triggers: When a user accesses a target document (such as an online report page) through a browser, the browser kernel immediately starts the font requirement parsing process after completing basic HTML parsing.

[0020] This phase occurs during the critical path of page rendering, ensuring that font requirements are captured before visual content is built.

[0021] 2. Parsing of embedded font list: HTML structure scanning: The browser parsing engine traverses all external style sheet links in the document ( <link rel=""stylesheet”"> Tags) and inline style blocks ( <style>标签）。

[0022] 识别所有与字体相关的资源声明，定位到CSS文件或内联规则。

[0023] CSS规则深度解析：对获取的CSS内容进行语法分析，提取所有@font-face规则。

[0024] 每条规则解析为结构化数据，包含三个核心属性：字体族名称（font-family）：如"Roboto Condensed”；字重参数（font-weight）：数字型值（100-900）；字型分类（font-style）：常规（normal）、斜体（italic）或倾斜（oblique）；具体伪代码表示为：@font-face {font-family: "Roboto Condensed"; / * 字体族名称 * / src: url("roboto-condensed.woff2") format("woff2"); / * 资源路径 * / font-weight: 300; / * 字重（100-900） * / font-style: oblique 10deg; / * 字型（normal / italic / oblique） * / unicode-range: U+000-5FF; / * 字符集范围 * / }生成字体需求对象，伪代码表示为：{"fontKey": "RobotoCondensed_300_oblique", / / 标准化键名"family": "Roboto Condensed","weight": 300,"style": "oblique","src": "https: / / cdn.example.com / roboto-condensed.woff2"}3.用户自定义字体整合：配置接口说明：浏览器提供用户设置界面（如"高级设置→自定义字体”），允许输入字体名称或上传本地字体文件；上传的字体文件被隔离存储在浏览器沙盒环境中，避免系统级冲突。

[0025] 需求合并逻辑：系统自动过滤已安装在操作系统中的字体（如通过API检测"Arial”是否存在）；最终生成字体需求清单，包含文档声明的字体和用户添加的自定义字体。

[0026] S2：字体下载与预处理网络层优化设计：1.智能请求调度：浏览器网络模块根据字体需求清单创建下载队列，对同一域名下的字体请求进行合并处理；采用HTTP / 2协议的多路复用特性，单次连接并行传输多个字体文件，减少TCP握手开销。

[0027] 2.动态格式适配：根据浏览器支持的字体格式优先级（如WOFF2 > WOFF > TTF），在请求头中声明可接受的格式；服务端响应时返回最优格式文件，例如针对现代浏览器返回压缩率更高的WOFF2格式。

[0028] 3.完整性验证机制：下载完成后，计算字体文件的哈希值（如SHA-256）并与服务器提供的校验码比对；验证失败时自动重试下载，确保字体数据完整可用。

[0029] S3：字体资源持久化存储数据库架构设计：1.存储引擎选择：优先选用浏览器标准IndexedDB作为存储后端，其支持二进制数据存储和事务操作；在不支持IndexedDB的旧版浏览器中，降级使用WebSQL或LocalStorage;检测浏览器支持性伪代码表示为：const dbEngine = window.indexedDB ? "IndexedDB" :window.webkitIndexedDB ? "WebSQL" :"LocalStorage"; / / 降级方案创建数据库（以IndexedDB为例）：const request = indexedDB.open("FontCacheDB", 2); / / 版本2request.onupgradeneeded = (e) => {const db = e.target.result;if (!db.objectStoreNames.contains("fonts")) {const store = db.createObjectStore("fonts", { keyPath: "fontKey"});store.createIndex("url_index", "sourceURL", { multiEntry: true}); / / 来源URL索引store.createIndex("time_index", "lastAccessed", { unique: false}); / / 时间索引}};2.数据结构定义：键（Key）构建规则：将字体名称、字重、字型三个属性拼接为唯一标识符；示例："RobotoCondensed_700_italic”。

[0030] 值（Value）内容：存储字体文件的原始二进制数据，保留完整文件内容。

[0031] 3.事务性写入流程：开启数据库写入事务，确保在多标签页同时操作时的数据一致性；伪代码表示为：const tx = db.transaction("fonts", "readwrite", { durability: "relaxed"});const store = tx.objectStore("fonts");构造存储对象，伪代码表示为：const fontRecord = {fontKey: "RobotoCondensed_300_oblique", / / 字体键fontData: arrayBuffer, / / 二进制数据version: "2.137", / / 版本标识lastAccessed: Date.now(), / / 最后访问时间戳sourceURL: "https: / / example.com", / / 来源URLsizeKB: arrayBuffer.byteLength / 1024 / / 字体大小};执行写入，伪代码表示为：const req = store.put(fontRecord);req.onsuccess = () => console.log("字体存储成功");tx.commit(); / / 显式提交事务S4：智能字体检索与渲染渲染协同机制：1.查询触发时机：当浏览器渲染引擎解析到DOM元素应用特定字体样式时，自动向数据库发起查询请求；查询内容为当前所需的字体名称、字重、字型组合键。

[0032] 2.数据库检索过程：在数据库索引中执行精确键值匹配；命中缓存时同步更新该字体的"最后访问时间”字段；未命中时触发网络下载流程，并将新字体存入数据库；执行索引查询的伪代码表示为：const tx = db.transaction("fonts", "readonly");const store = tx.objectStore("fonts");const req = store.get("RobotoCondensed_300_oblique");req.onsuccess = (e) => {const font = e.target.result;if (font) { / / 更新访问时间（权利要求8）font.lastAccessed = Date.now();store.put(font);return font.fontData;}return null;};3.字体渲染技术链：数据格式转换：将二进制字体数据封装为浏览器可操作的Blob对象；伪代码表示为：const blob = new Blob([fontData], { type: "font / woff2"});资源链接生成：创建指向Blob对象的临时URL；伪代码表示为：const objectURL = URL.createObjectURL(blob); / / 生成 blob:https: / / example.com / 550e8400样式动态注入：通过JavaScript创建@font-faceCSS规则，将临时URL作为字体源注入文档头部，触发浏览器渲染引擎重绘；伪代码表示为：const style = document.createElement("style");style.textContent = `@font-face {font-family: "Roboto Condensed";src: url(${objectURL}) format("woff2");font-weight: 300;font-style: oblique;}`;document.head.appendChild(style);S5：同源共享与缓存维护同源策略实现：1.同源判定标准：定义同源条件为：协议相同（如https）、域名相同（如www.example.com）、端口相同（如443）；当新加载网页与缓存字体来源满足同源条件时，允许直接复用数据库中的字体资源；同源判定执行比对的伪代码为：def is_same_origin(A, B):# 协议比对（https / http）if A.scheme != B.scheme: return False# 域名比对（支持子域名）if A.hostname != B.hostname: return False# 端口比对（隐式443 vs 显式443）port_A = A.port if A.port else 443port_B = B.port if B.port else 443return port_A == port_B特殊场景：http: / / localhost:8080与http: / / localhost:3000→非同源（端口不同）；https: / / a.example.com与https: / / b.example.com→非同源（主机名不同）。

[0033] 2.跨文档共享实例：用户首次访问https: / / support.example.com / page1下载"BrandFont”字体并存储；当访问同源的https: / / support.example.com / page2时，直接使用已缓存字体，跳过下载。

[0034] 缓存自治管理：1.定期清理策略：浏览器在空闲周期扫描数据库，删除超过30天未使用的字体记录；清理操作通过时间戳索引高效执行，避免性能影响；浏览器空闲时触发IdleTask，伪代码表示为：requestIdleCallback(() => {const now = Date.now();const range = IDBKeyRange.upperBound(now - 2592000000); / / 30天前const req = store.index("time_index").openCursor(range);req.onsuccess = (e) => {const cursor = e.target.result;if (cursor) {cursor.delete(); / / 删除过期字体cursor.continue();}};});2.版本更新机制：当检测到同一字体的新版本（版本号更高或最后修改时间更新），自动下载更新并覆盖旧缓存；版本比对依据HTTP响应头中的Font-Version和Last-Modified字段；下载新字体时检查响应头的伪代码表示为：HTTP / 1.1 200 OKFont-Version: 2.138Last-Modified: Wed, 21 Jun 2025 07:28:00 GMT若版本号高于数据库记录（例如：2.137 < 2.138），则覆盖存储，伪代码表示为：store.put({ ...fontRecord, version: "2.138"});应用实例：新闻网站场景背景：新闻站点https: / / news.example.org使用两种专用字体：标题："News Headline Bold”(700, normal)正文："News Text Regular”(400, normal)首次加载流程如下表所示：

[0035] 二次加载同源页面：访问新页面：https: / / news.example.org / article / 123。

[0036] S5同源判定：协议 / 域名 / 端口完全一致→允许共享。

[0037] 性能对比：

[0038] 缓存更新事件：30天后设计团队更新标题字体（版本1.2→1.3）。

[0039] 用户访问时：数据库检测版本过旧；自动下载新版字体（165KB）；覆盖原记录并更新版本号。< / style>

Claims

1. A method for optimizing the speed of loading documents by a browser, characterized in that: include: S1: In the initialization phase of opening a document in a browser, the document's embedded common font list and user-configured custom fonts are parsed; S2: Initiate a network request to the font server according to the font list to download the missing font resources; S3: Uses the browser's built-in database storage interface to store downloaded font resources in the form of key-value pairs in a local database, where: The key is a combination identifier of font name, weight and font style; The value is the binary data of the font file; S4: When loading the current document or a web page from the same origin, the browser's built-in rendering engine sends a query request to the local database during the DOM tree construction phase; If the database contains a font resource that matches the key value, the data is returned directly for rendering. If it does not exist, it triggers network download and stores the new font in the database according to the same logic; S5: Determine homology based on the three elements of web page URL protocol + domain name + port, and implement shared database font cache between homology web pages.

2. A method for optimizing the speed of loading documents by a browser according to claim 1, characterized in that: The method for generating the commonly used font list includes: Automatically identify external font references declared in the document; Extracts the font family name and its variant metrics defined in the document style file.

3. The method for optimizing the speed of loading documents by a browser according to claim 1, characterized in that: The configuration process of the user-defined font in S1 includes: Enter the target font name through the user interface provided by the browser; Upload local font files to the browser's isolated storage space.

4. The method for optimizing the speed of loading documents by a browser according to claim 1, characterized in that: The database operation logic when storing font resources in S3 includes: Start a database transaction to ensure atomic data writing; Add version identification and last access timestamp to font resources; Create an index that associates font key values ​​with source web page URLs.

5. The method for optimizing the speed of loading documents by a browser according to claim 1, characterized in that: The operation of querying the database in S4 includes: Generate search keys based on the name, weight and style of the font required by the current document; Performs an exact match query on the database index.

6. The method for optimizing the speed of loading documents by a browser according to claim 1, characterized in that: The rendering process after extracting font resources from the database includes: Convert binary font data into resource objects that can be recognized by the browser; Generates a resource identifier that can be directly called by the rendering engine.

7. The method for optimizing the speed of loading documents by a browser according to claim 1, characterized in that: The specific rules for homology determination are: Compare the source address information of the current web page with the font cached in the database; Sharing is allowed only when the protocol type, primary domain name, and port number are exactly the same.

8. The method for optimizing the speed of loading documents by a browser according to claim 1, characterized in that: The database has a maintenance mechanism including: Regularly clear font resources that have not been used for a preset time window; When a newer version of the same font is detected, the old cache is automatically replaced.

9. The method for optimizing the speed of loading documents by a browser according to claim 1, characterized in that: The combination identifier construction rule of the font key value includes: a standardized font name character string, an additional digital font weight parameter and a marked font style classification identifier.

Images