当前位置： 首页 > news >正文

浏览器渲染原理 - 输入url 回车后发生了什么

news 文章来源：https://blog.csdn.net/qq_40147756/article/details/132328338 2024/10/8 6:24:19

目录

  • 渲染时间点
  • 渲染流水线
    • 1，解析（parse）HTML
      • 1.1，DOM树
      • 1.2，CSSOM树
      • 1.3，解析时遇到 css 是怎么做的
      • 1.4，解析时遇到 js 是怎么做的
    • 2，样式计算 Recalculate style
    • 3，布局 layout
    • 4，分层 layer
    • 5，绘制 paint
    • 6，分块 tiling
    • 7，光栅化 raster
    • 8，画 draw
  • 常见面试题
    • 什么是 reflow
    • 什么是 repaint
    • 为什么 transform 效率高

在上一篇文章中，介绍了 浏览器的事件循环，其中提到了浏览器的进程模型。那浏览器是如何渲染页面的呢？

渲染时间点

浏览器会通过网络进程中的线程来通信，获取到 html 数据后生成渲染任务，发送给消息队列。

渲染主线程会执行渲染任务。整个渲染流程：把 html 字符串解析为像素点信息，再交给 GPU来渲染后在页面中展示。

在这里插入图片描述

渲染流水线

在这里插入图片描述

每个阶段都有明确的输入输出，上个阶段的输出会成为下个阶段的输入。形成一套完整的流水线。

1，解析（parse）HTML

会将 html 字符串解析为 2个树。因为字符串不好操作，对象更容易处理。

1.1，DOM树

也就是 document 对象。可以在控制台通过console.dir(document) 展示对象结构。
在这里插入图片描述

1.2，CSSOM树

包括：

  • <style> 内部样式
  • <link> 外部样式
  • style="" 内联样式
  • 浏览器默认样式表

在这里插入图片描述

注意，这里的 CSSOM树 ≠ document.styleSheets。因为 document.styleSheets 只包括内部样式和外部样式，每写一个 <style> 或 <link> 就会多一个 CSSStyleSheet 样式表：

在这里插入图片描述

举例说明：

<html><head><style>body h1 {color: red;font-size: 3em;}div p {margin: 1em;color: blue;}</style></head><body><h1>下雪天的夏风</h1><div><p>求关注</p></div></body>
</html>

在这里插入图片描述

可以看到：

  • CSSStyleSheet 样式表
    • CSSStyleRule 规则对象
      • selectorText 选择器
      • style 样式（键值对）

另外，CSSStyleSheet 样式表是可以直接通过 js 操作的。

举例：通过 js 给页面所有 div 添加 border

document.styleSheets[0].addRule('div', 'border: 1px solid !important')

这样添加样式的方式，一般框架用的多。最终样式不会在内联样式中展现。

1.3，解析时遇到 css 是怎么做的

渲染主线程遇到 css 时，会启动一个预解析线程，让它来率先下载和解析 css。渲染主线程继续解析 html。

预解析线程会快速浏览，如果遇到外部样式link ，会通知网络线程来下载 css，下载完成后进行“解析”完成后交给渲染主线程。

并不是真正的解析，只是做一些前期工作，最终生成 CSSOM 树还是由渲染主线程来完成。

所以，css 代码不会阻塞解析 HTML。

在这里插入图片描述

1.4，解析时遇到 js 是怎么做的

没有生成所谓的 js 树，是因为 js 只需要执行一遍即可。DOM树和CSSOM树作为解析 HTML 的输出，后续还会有其他的操作。

渲染主线程遇到内部 js 时，直接启动 V8 引擎执行即可；遇到外部 js 时，会启动一个预解析线程，让它来下载 js，渲染主线程暂停。

预解析线程会通知网络线程来下载 js，下载完成后再交给渲染主线程来执行。执行完继续解析 HTML。

这样做的原因：DOM 树是边解析边生成的，而 js 代码可能会修改之前已解析好的内容。

所以，js 代码会阻塞解析 HTML。

在这里插入图片描述

2，样式计算 Recalculate style

遍历DOM树，计算每个节点的最终样式 Computed Style。

这一过程，许多预设值会变成绝对值，比如 red 变为 rgb(255,0,0)；相对单位变为绝对单位，比如rem 变为 px

最终会得到1个带有最终样式的 DOM 树。
在这里插入图片描述

可以在浏览器的 computed 窗口中，或使用 getComputedStyle() 查看某个元素的最终样式。

3，布局 layout

遍历DOM树的每个节点，根据 css 属性值计算每个节点的几何信息（尺寸，相对包含块的位置），生成一个 layout 树。

注意到 DOM 树和 layout 树不一定一一对应。
在这里插入图片描述
举例1：diaplay:none 的元素不会出现在 layout 树中。

问题来了，为什么<head> <link> 等元素默认是隐藏的？因为在浏览器默认样式表中，它们 diaplay:none！
在这里插入图片描述
举例2：伪元素的 content 内容在 DOM 树中没有，在 layout 树中有。

在这里插入图片描述
举例3：内容必须在行盒中，行盒和块盒不能相邻。所以在 layout 树中会有匿名块盒。

解释：“行级元素”，“块级元素”这些元素指的是 html。但元素的类型是 css 属性决定的。所以称为行盒或块盒。

在这里插入图片描述

4，分层 layer

现在 layout 布局树中每个节点的几何信息，尺寸位置等都明确了。渲染主线程会使用一套策略对整个布局树分层。

目的是提升效率，这样可以让之后页面的修改更新不会影响到其他层。类似 PS 中的图层，修改某一个图层不会影响到其他图层。

可以在浏览器控制台的 Layers 面板查看当前网页的分层信息。
也不会分太多的层，因为会比较占内存。滚动条是单独一层。

在这里插入图片描述

另外，和堆叠上下文有关的 css 属性（transform，opacity）会影响分层的决策。其中 will-change 属性能更大程度的影响分层角色，可能会将设置该属性的元素单独分一层。

因为这个属性会告诉浏览器，我可能会经常变化，浏览器最好掂量下。

5，绘制 paint

分层后，会对每层都生成绘制指令，类似于 canvas 中的 API 一样。其实canvas 用的就是浏览器内核的绘制功能。

指令举例：“笔”移动到 xx 坐标位置，画 100*100 的矩形，并用红色填充等等。

在这里插入图片描述

以上。渲染主线程的工作结束，剩下的步骤交给其他线程来完成。

在这里插入图片描述

6，分块 tiling

将每层都分为多个小的区域，浏览器视窗区域的优先级最高，靠近视窗区域的优先级次之。
在这里插入图片描述

分块逻辑：渲染主线程每个图层的绘制信息交给合成线程，合成线程又会启动多个分块线程来对每个图层进行分块。

合成线程也属于渲染线程

在这里插入图片描述

7，光栅化 raster

将每个块变成位图，位图就是每个像素点的信息。优先处理靠近视窗的块。

位图就是内存中的二位数组，其中记录了每个像素点的信息。

在这里插入图片描述

此过程会用到GPU来加速，用到显卡。
在这里插入图片描述

8，画 draw

合成线程现在拿到了所有的信息，在画之前还需要确认【指引信息 quad】，也就是位图相对的屏幕在哪里。

注意，之前布局树中的信息是相对于整个页面的。现在需要知道每个块相对于屏幕的位置信息。

步骤：合成线程将指引信息 --> GPU 进程 --> 硬件显卡，由显卡来呈现最终的像素信息。

GPU 做中转的原因是：GPU 是浏览器的进程。合成线程属于渲染进程，它是在沙盒中的，与硬件系统做隔离，提升安全性。所以渲染进程是没有调度系统硬件能力的。

在这里插入图片描述
而 css 中的 transform 属性就是在这一步完成的。这就是 transform 效率高的原因，直接跳过之前所有的步骤。

常见面试题

什么是 reflow

【recalculate layoutBlockFlow 重排】它的本质是重新计算 layout 树。

当做了会影响 layout 树的操作后，比如修改几何尺寸相关的信息时，会引起重新计算 layout 树。

在这里插入图片描述

并且，为了避免连续多次的操作导致 layout 树反复计算，浏览器会合并这些操作，当 js 代码完成后统一计算。所以这一步骤是异步的。

同样因为这个原因，当 js 获取布局属性时，可能无法获取到最新的布局信息。

浏览器会在反复权衡下，最终决定获取属性时立即 reflow。

什么是 repaint

它的本质是重新根据分层信息计算了绘制指令。

当改变了可见样式，比如颜色等和几何尺寸无关的属性时，就需要重新计算，会从【绘制】这一步骤开始重新执行。

而因为几何尺寸也属于可见样式，所以 reflow 一定会引起 repaint。

在这里插入图片描述

为什么 transform 效率高

因为 transform 既不会影响布局，也不会影响绘制，它只会影响渲染的最后一步【画】。而【画】是在合成线程中，不会影响到渲染主线程。同样无论渲染主线程多忙，也不会影响到 transform。

验证代码如下，当渲染主线程卡死时，transform 不受影响。

<!DOCTYPE html>
<html lang="en"><head><style>.common {width: 50px;height: 50px;background-color: salmon;border-radius: 50%;margin: 10px;}.ball1 {animation: move1 1s alternate infinite;}.ball2 {position: relative;left: 0;animation: move2 1s alternate infinite;}@keyframes move1 {to {transform: translate(100px);}}@keyframes move2 {to {left: 100px;}}</style></head><body><button id="btn">死循环3s</button><div class="common ball1"></div><div class="common ball2"></div><script>btn.addEventListener("click", function () {delay(3000);});function delay(duration) {var start = Date.now();while (Date.now() - start < duration) {}}</script></body>
</html>

效果：
在这里插入图片描述

滚动也是一样的逻辑，如果 js 有一段上面的死循环，并不会影响到滚动。因为只有视窗内元素的位置变了，直接执行【画 draw】这一步骤。

以上。

参考：渡一教育。

相关文章：

浏览器渲染原理 - 输入url 回车后发生了什么

目录 渲染时间点渲染流水线1&#xff0c;解析&#xff08;parse&#xff09;HTML1.1&#xff0c;DOM树1.2&#xff0c;CSSOM树1.3&#xff0c;解析时遇到 css 是怎么做的1.4&#xff0c;解析时遇到 js 是怎么做的 2&#xff0c;样式计算 Recalculate style3&#xff0c;布局 la…...

编程日记 2023/8/20 0:57:01

大文本的全文检索方案附件索引

一、简介 Elasticsearch附件索引是需要插件支持的功能&#xff0c;它允许将文件内容附加到Elasticsearch文档中&#xff0c;并对这些附件内容进行全文检索。本文将带你了解索引附件的原理和使用方法&#xff0c;并通过一个实际示例来说明如何在Elasticsearch中索引和检索文件附…...

编程日记 2023/8/20 0:55:57

35_windows环境debug Nginx 源码-CLion配置CMake和启动

文章目录 生成 CMakeLists.txt 组态档35_windows环境debug Nginx 源码-CLion配置CMake和启动生成 CMakeLists.txt 组态档 修改auto目录configure文件，在 . auto/make 上边增加 . auto/cmake, 大概在 106 行。在 auto 目录下创建cmake 文件其内容如下： #!/usr/bin/env bash NG…...

编程日记 2023/8/20 0:54:54

收集的一些比较好的git网址

1、民间故事 https://github.com/folkstory/lingqiu/blob/master/%E4%BC%A0%E8%AF%B4%E9%83%A8%E5%88%86/%E4%BA%BA%E7%89%A9%E4%BC%A0%E8%AF%B4/%E2%80%9C%E6%B5%B7%E5%BA%95%E6%8D%9E%E6%9C%88%E2%80%9D%E7%9A%84%E6%AD%A6%E4%B8%BE.md 2、童话故事 https://gutenberg.org/c…...

编程日记 2023/8/20 0:53:54

容斥原理 博弈论（多种Nim游戏解法）

目录 容斥原理容斥原理的简介能被整除的数&#xff08;典型例题&#xff09;实现思路代码实现扩展&#xff1a;用DPS实现 博弈论博弈论中的相关性质博弈论的相关结论先手必败必胜的证明Nim游戏&#xff08;典型例题&#xff09;代码实现 台阶-Nim游戏&#xff08;典型例题&…...

编程日记 2023/8/20 0:52:53

【C++】函数指针

2023年8月18日&#xff0c;周五上午 今天在B站看Qt教学视频的时候遇到了 目录 语法和typedef或using结合我的总结 语法 返回类型 (*指针变量名)(参数列表)以下是一些示例来说明如何声明不同类型的函数指针&#xff1a; 声明一个不接受任何参数且返回void的函数指针&#xf…...

编程日记 2023/8/20 0:51:51

VBA技术资料MF45：VBA_在Excel中自定义行高

【分享成果&#xff0c;随喜正能量】可以不光芒万丈&#xff0c;但不要停止发光。有的人陷入困境&#xff0c;不是被人所困&#xff0c;而是自己束缚自己&#xff0c;这时"解铃还须系铃人"&#xff0c;如果自己无法放下&#xff0c;如何能脱困&#xff1f; 。 我给V…...

编程日记 2023/8/20 0:50:47

【Git】Git中的钩子

Git Book——Git的自定义钩子 Git中的钩子分为两大类&#xff1a; 1、客户端钩子&#xff1a;由诸如提交和合并这样的操作所调用 2、服务端钩子&#xff1a;由诸如接收被推送的提交这样的联网操作 客户端钩子&#xff1a; 提交工作流钩子 pre-commit&#xff1a;在提交信息前…...

编程日记 2023/8/20 0:49:46

java 工程管理系统源码+项目说明+功能描述+前后端分离 + 二次开发 em

Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下&#xff1a; 首页 工作台&#xff1a;待办工作、消息通知、预警信息&#xff0c;点击可进入相应的列表 项目进度图表&#xff1a;选择&#xff08;总体或单个&#xff09;项目显…...

编程日记 2023/8/20 0:48:27

Java # JVM

一、1.8之前 运行时数据区&#xff08;进程共享&#xff09; 运行时常量池为什么要有方法区&#xff1a; jvm完成类装载后&#xff0c;需要将class文件中的常量池转入内存&#xff0c;保存在方法区中为什么是常量&#xff1a; 常量对象操作较多&#xff0c;为了避免频繁创建和…...

编程日记 2023/8/20 0:47:25

vscode远程连接Linux失败，提示过程试图写入的管道不存在(三种解决办法)

vscode报错如下&#xff1a; 一、第一种情况 原因是本地的known_hosts文件记录服务器信息与现服务器的信息冲突了&#xff0c;导致连接失败。 解决方案就是把本地的known_hosts的原服务器信息全部删掉&#xff0c;然后重新连接。 二、第二种情况 在编写配置文件config时&…...

编程日记 2023/8/20 0:46:24

elaticsearch(1)

1.简介 Elasticsearch是一个开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检索数据&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服务器&#xff0c;处理PB级别的数据。 Elasticsearch也使用Java开发并使用Lucene作为其核心来实现所有索引…...

编程日记 2023/8/20 0:45:20

使用pnpm workspace管理Monorepo架构

在开发项目的过程中&#xff0c;我们需要在一个仓库中管理多个项目&#xff0c;每个项目有独立的依赖、脚手架&#xff0c;这种形式的项目结构我们称之为Monorepo&#xff0c;pnpm workspace就是管理这类项目的方案之一。 一、pnpm简介 1、pnpm概述 pnpm代表performance npm…...

编程日记 2023/8/20 0:44:17

Ubuntu16.04-ros-kinetic环境搭建笔记=1=

tips&#xff1a;搬运资料&#xff0c;留个记录 安装Ubuntu Ubuntu官网下载地址 安装 虚拟机安装Ubuntu 最好断网安装Ubuntu&#xff0c;可以节约时间 Ubuntu基础设置 Ubuntu换国内源 换成清华源 sudo apt upgradeVMwareTool安装 把这个压缩包拖到桌面&#xff0c;否则只读…...

编程日记 2023/8/20 0:43:16

应用层自定义协议（组织数据的格式）

概念 在进行网络传输数据的时候&#xff0c;通常是将要传输的数据组织成一个字符串&#xff0c;再将字符串转换为一个字节流进行网络传输数据&#xff0c;而数据组织的格式是多种多样的&#xff0c;我们只需要保证&#xff0c;客户端和服务器对于字符串的组织和解析统一即可 现…...

编程日记 2023/8/20 0:42:14

5种常见的3D游戏艺术风格及工具栈

在游戏开发领域&#xff0c;3D 艺术风格已成为为玩家创造身临其境、引人入胜的体验的重要组成部分。 随着技术的进步&#xff0c;创造令人惊叹的 3D 视觉效果的可能性已经大大扩展&#xff0c;为游戏开发人员提供了广泛的选择。 在本文中&#xff0c;我们将探讨当今游戏开发中…...

编程日记 2023/8/20 0:41:13

【玩转Linux操作】crond的基本操作

&#x1f38a;专栏【玩转Linux操作】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【Counting Stars 】 欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f354;概述&#x1f354;命令⭐常用选项 &#x1f354;练…...

编程日记 2023/8/20 0:40:10

设置Linux 静态IP

LInux虚拟机默认的IP地址是动态获取的 作为服务器&#xff0c;我们一般还需要把IP地址设置为静态的 设置静态IP vim /etc/sysconfig/network-scripts/ifcfg-ens33 TYPEEthernet PROXY_METHODnone BROWSER_ONLYno # BOOTPROTOdhcp 动态获取 BOOTPROTOstatic IPADDR"192.16…...

编程日记 2023/8/20 0:39:09

JMeter接口自动化测试实例—JMeter引用javaScript

Jmeter提供了JSR223 PreProcessor前置处理器&#xff0c;通过该工具融合了Java 8 Nashorn 脚本引擎&#xff0c;可以执行js脚本以便对脚本进行前置处理。其中比较典型的应用就是通过执行js脚本对前端数据进行rsa加密&#xff0c;如登录密码加密。但在这里我就简单的应用javaScr…...

编程日记 2023/8/20 0:38:08

javascript期末作业【三维房屋设计】 【源码+文档下载】

1、引入three.js库 官网下载three.js 库 放置目录并引用 引入js文件: 设置场景&#xff08;scene&#xff09; &#xff08;1&#xff09;创建场景对象 &#xff08;2&#xff09;设置透明相机 1,透明相机的优点 透明相机机制更符合于人的视角,在场景预览和游戏场景多有使用…...

编程日记 2023/8/20 0:37:07

数组详解

1. 一维数组的创建和初始化 1.1 数组的创建 数组是一组相同类型元素的集合。 数组的创建方式&#xff1a; type_t arr_name [const_n]; //type_t 是指数组的元素类型 //const_n 是一个常量表达式&#xff0c;用来指定数组的大小 数组创建的实例&#xff1a; //代码1 int a…...

编程日记 2023/8/20 0:36:05

【记录COCO数据集格式】实例分割的annotations.json的内部格式

在此记录一下实例分割coco的annotations.json的格式 annotations.json,整体是一个字典: { "info": {"description": null,"url": null, "version": null, "year": 2023, "contributor": null, "date_created…...

编程日记 2023/8/20 0:35:04

mac 关于获取手机信息 终端指令

iOS真机命令&#xff08;自动化测试&#xff09; 获取设备的的UDID idevice_id --list # 显示当前所连接设备的 udid instruments -s devices # 列出所有设备&#xff0c;包括真机、模拟器、mac ideviceinfo 可以在返回的数据中找到 udid idevice_id -l 苹果手机 safari打开网…...

编程日记 2023/8/20 0:34:02

ios消息推送例子

通过Apple推送服务&#xff0c;将消息发送给特定的ios客户端&#xff0c;这是服务器端实例代码。需要客户端的voip key值&#xff0c;以及相应的客户端回调接口&#xff0c;支持ios9.0以上版本。 下载地址&#xff1a;https://download.csdn.net/download/m0_37567738/8821559…...

编程日记 2023/8/20 0:33:01

LabVIEW开发最小化5G系统测试平台

LabVIEW开发最小化5G系统测试平台 由于具有大量存储能力和数据的应用程序的智能手机的激增&#xff0c;当前一代产品被迫提高其吞吐效率。正交频分复用由于其卓越的品质&#xff0c;如单抽头均衡和具有成本效益的实施&#xff0c;现在被广泛用作物理层技术。这些好处是以严格的…...

编程日记 2023/8/20 0:32:01

如何用输入函数为数组赋值

在编写程序时我们经常使用数组&#xff0c;而数组的大小可能是很大的但是我们并不需要为每个元素都自己赋值&#xff0c;我们可能会自定义输入数组元素个数&#xff0c;我们应该如何实现通过输入函数为数组赋值呢&#xff1f; 目录 第一种&#xff1a; 第二种&#xff1a; 第一…...

编程日记 2023/8/20 0:31:00

【Python COM】Word 自动纵向合并相同内容单元格

使用场景 docxtempl 库不支持动态纵向合并单元格&#xff0c;所以写了这段代码用来曲线救国。 使用方法 需要纵向合并的单元格加上在文本末尾加上“【纵向合并】”&#xff0c;然后调用此函数&#xff0c;就会自动纵向合并相同内容的单元格。 代码 需要安装 pywin32 库。 …...

编程日记 2023/8/20 0:29:58

maven 环境变量的配置

1、安装好maven /home/sunyuhua/dev/apache-maven-3.9.32、编辑环境变量 vi /etc/profile.d/maven.shexport MAVEN_HOME/home/sunyuhua/dev/apache-maven-3.9.3 export PATH$PATH:$MAVEN_HOME/bin3、执行source source /etc/profile4、检验 mvn -version5、附注&#xff1a…...

编程日记 2023/8/20 0:28:56

flutter-设置开屏页 解决开屏白屏问题

flutter_native_splash 当您的应用程序打开时&#xff0c;本机应用程序会短暂加载 Flutter。默认情况下&#xff0c;在此期间&#xff0c;本机应用程序会显示白色启动屏幕。该包自动生成 iOS、Android 和 Web 本机代码&#xff0c;用于自定义本机启动画面背景颜色和启动图像。支…...

编程日记 2023/8/20 0:27:54

简单理解Linux中的一切皆文件

一款操作系统要管理各种各样不同的硬件&#xff0c;因为硬件的不同所以它们使用的文件系统也不同。但是按道理来说&#xff0c;文件系统的不同对于用户来说可不是一件好事&#xff0c;操作不同的硬件就要使用不同的方法。 但是Linux有一切皆文件。 简单来说&#xff0c;Linux…...

编程日记 2023/8/20 0:26:52

Kubernetes的endpoint

简介 Kubernetes的endpoint&#xff08;终结点&#xff09;是用于将服务绑定到集群中其他组件的网络地址。Endpoint为服务提供了一个稳定的虚拟IP地址&#xff0c;它会负责将流量从Service路由到后端Pod。 下面是使用Kubernetes的endpoint的详细步骤&#xff1a; 创建一个Se…...

编程日记 2023/8/20 0:25:51

第四章，向量组，2-矩阵等价与向量组等价的关系

第四章&#xff0c;向量组&#xff0c;2-矩阵等价与向量组等价的关系 矩阵乘法与线性表示矩阵等价与向量组等价 玩转线性代数(23)线性组合与线性表示的应用的笔记&#xff0c;相关证明以及例子见原文 矩阵乘法与线性表示 设有 A m ∗ n B n ∗ l C m ∗ l A_{m*n}B_{n*l}C_{m…...

编程日记 2023/8/20 0:24:50

Flink源码之StreamTask启动流程

每个ExecutionVertex分配Slot后&#xff0c;JobMaster就会向Slot所在的TaskExecutor提交RPC请求执行Task&#xff0c;接口为TaskExecutorGateway::submitTask CompletableFuture<Acknowledge> submitTask(TaskDeploymentDescriptor tdd, JobMasterId jobMasterId, RpcTi…...

编程日记 2023/8/20 0:23:48

【BASH】回顾与知识点梳理（三十）

【BASH】回顾与知识点梳理 三十 三十. 进程的观察30.1 ps &#xff1a;将某个时间点的进程运作情况撷取下来仅观察自己的 bash 相关进程&#xff1a; ps -l观察系统所有进程&#xff1a; ps aux 30.2 top&#xff1a;动态观察进程的变化30.3 pstree 该系列目录 --> 【BASH】…...

编程日记 2023/8/20 0:22:47

亿赛通电子文档安全管理系统任意文件上传漏洞复现

0x01 产品简介 亿赛通电子文档安全管理系统&#xff08;简称&#xff1a;CDG&#xff09;是一款电子文档安全加密软件&#xff0c;该系统利用驱动层透明加密技术&#xff0c;通过对电子文档的加密保护&#xff0c;防止内部员工泄密和外部人员非法窃取企业核心重要数据资产&…...

编程日记 2023/8/20 0:21:46

java：数据库连接池

概念 举个例子来说吧&#xff0c;假设我们开了一家餐馆&#xff0c;客人来了&#xff0c;我们就请一个服务员&#xff0c;使用完后再把他开除了&#xff0c;下个客人再来了&#xff0c;我们再请一个&#xff0c;使用完再开除。 这是不是我们现在使用 JDBC 连接数据库的场景&a…...

编程日记 2023/8/20 0:20:44

可视化绘图技巧100篇基础篇（三）-条形图(一)

目录 前言 适用场景 图例 条形图分类 多系列条形图 单系列条形图...

编程日记 2023/8/20 0:19:43

如何使用Redis实现附近商家查询

导读 在日常生活中&#xff0c;我们经常能看见查询附近商家的功能。 常见的场景有&#xff0c;比如你在点外卖的时候&#xff0c;就可能需要按照距离查询附近几百米或者几公里的商家。 本文将介绍如何使用Redis实现按照距离查询附近商户的功能&#xff0c;并以SpringBoot项目…...

编程日记 2023/8/20 0:18:42

于vue3+vite+element pro + pnpm开源项目

河码桌面是一个基于vue3viteelement pro pnpm 创建的monorepo项目&#xff0c;项目采用的是类操作系统的web界面&#xff0c;操作起来简单又方便&#xff0c;符合用户习惯&#xff0c;又没有操作系统的复杂&#xff01; 有两个两个分支&#xff0c;一个是web版本&#xff0c;…...

编程日记 2023/8/20 0:17:41

18-组件化开发 根组件

组件化开发 & 根组件: 1. 组件化:一个页面可以拆分成一个个组件&#xff0c;每个组件有着自己独立的结构、样式、行为. 好处:便于维护&#xff0c;利于复用->提升开发效率 组件分类: 普通组件 , 根组件 2. 根组件:整个应用最上层的组件&#xff0c;包裹所有普通小组件…...

编程日记 2023/8/20 0:16:40

springboot集成ES

1.引入pom依赖2.application 配置3.JavaBean配置以及ES相关注解 3.1 Student实体类3.2 Teacher实体类3.3 Headmaster 实体类4. 启动类配置5.elasticsearchRestTemplate 新增 5.1 createIndex && putMapping 创建索引及映射 5.1.1 Controller层5.1.2 service层5.1.3 ser…...

编程日记 2023/8/20 0:15:36

Maven 生成编译时间和版本Java类

本文使用Maven插件来自动生成一个 Version.java 类&#xff0c;可以在Java代码中使用里面对应的常量&#xff0c;获取当前版本号和构建时间。 Maven编译后自动生成的 Version.java 文件内容如下所示&#xff1a; package com.shanhy.demo;public final class Version {public…...

编程日记 2023/8/20 0:14:34

关于uniapp微信小程序scroll-view组件使用show-scrollbar隐藏不了滚动条

这里关于使用 scroll-view组件 时候有滚动条 想要隐藏滚动条但是使用show-scrollbar没有效果 这时候又使用类名隐藏滚动条 使用id隐藏滚动条都不行 解决方法&#xff1a;在使用 scroll-view组件 的页面或者app 页面加上以下代码就可以了 ::-webkit-scrollbar {displa…...

编程日记 2023/8/20 0:13:32

CSS：filter滤镜 详解（用法 + 代码 + 例子 + 效果）

文章目录 filter 滤镜blur() 模糊度例子 渐变光晕 brightness() 元素亮度contrast() 对比度grayscale() 元素灰度hue-rorate() 色相opacity() 透明度invert() 反转颜色saturate() 饱和度 backdrop-filter 蒙版&#xff0c;滤镜例子 卷轴展开 filter 滤镜 动图为效果添加前后对…...

编程日记 2023/8/20 0:12:29

【Unity每日一记】Physics.Raycast 相关_Unity中的“X光射线”

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…...

编程日记 2023/8/20 0:11:28

软件报错msvcr90.dll丢失的解决方法，亲测可以修复

我曾经遇到过一个令人头疼的问题&#xff1a;msvcr90.dll丢失。这个问题导致了我的程序无法正常运行&#xff0c;让我感到非常苦恼。然而&#xff0c;在经过一番努力后&#xff0c;我终于成功地修复了这个问题&#xff0c;这让我感到非常欣慰和满足。 msvcr90.dll丢失的原因可能…...

编程日记 2023/8/20 0:10:27

第一百一十八回 如何获取蓝牙连接状态

文章目录 知识回顾实现方法示例代码我们在上一章回中介绍了如何连接蓝牙设备相关的内容，本章回中将介绍如何获取蓝牙连接状态.闲话休提，让我们一起Talk Flutter吧。 知识回顾 我们在上一章回中介绍如何连接蓝牙设备，但是如何知道蓝牙设备是否连接成功呢？这就需要我们去获取…...

编程日记 2023/8/20 0:09:25

C++11并发与多线程笔记（12） windows临界区、其他各种mutex互斥量

C11并发与多线程笔记&#xff08;12&#xff09; windows临界区、其他各种mutex互斥量 1、windows临界区2、自动析构技术3、递归独占互斥量 std::recursive_mutex4、带超时的互斥量 std::timed_mutex 和 std::recursive_timed_mutex4.1 std::timed_mutex&#xff1a;是带超时的…...

编程日记 2023/8/20 0:08:24

[MAUI]在.NET MAUI中实现可拖拽排序列表

文章目录 创建可拖放控件创建绑定服务类拖拽&#xff08;Drag&#xff09;拖拽悬停&#xff0c;经过&#xff08;DragOver&#xff09;释放&#xff08;Drop&#xff09; 创建页面元素最终效果项目地址 .NET MAUI 中提供了拖放(drag-drop)手势识别器&#xff0c;允许用户通过拖…...

编程日记 2023/8/20 0:07:22

Linux 内核内存管理 pfn_to_online_page宏

文章目录 一、Memory Hotplug1.1 简介1.2 热插拔事件通知机制 二、pfn_to_online_page2.1 pfn_to_online_page2.2 pfn_to_section_nr2.3 online_section_nr 参考资料 一、Memory Hotplug 1.1 简介 Linux 内存热插拔&#xff08;Memory Hotplug&#xff09;是指在运行时动态增…...

编程日记 2023/8/20 0:06:19