一篇搞懂浏览器的工作原理（万字详解）

news2024/11/15 19:39:36

摘要

本文是学习极客时间上的课程，进而整理出的浏览器工作原理。

第一部分：浏览器的进程和线程

（1）进程和线程的区别？

在浏览器中，各个进程负责处理自己的事情，而不同的进程中，也有线程之间相互配合，所以在了解浏览器的工作原理之前，要明白进程和线程之间的区别。

  1. 线程不能单独存在，它要由进程来启动和管理
  2. 一个进程就是一个程序的实例
  3. 线程依附于进程，一个进程采用多个线程可以提高效率
  4. 线程之间共享进程的数据
  5. 当一个进程关闭之后，操作系统会回收进程所占用的内存
  6. 进程和进程之间相互独立

（2）单进程浏览器的缺点

在远古时期，浏览器还是单进程的。当然现在肯定不是，所谓单进程浏览器，就是整个浏览器的工作全部在一个进程里，那对于单进程浏览器，它的缺点都有什么？

  1. 不稳定：不管是一个页面，还是一个JS程序执行出问题，还是一个脚本或者一个插件执行出问题，就会导致整个浏览器崩溃，直接GG。
  2. 不流畅：所有的页面渲染都在一个进程中，如果一个渲染JS效率比较低，会导致整个渲染流程不流畅。同时单进程中渲染过于复杂，在关闭页面后浏览器不能回收所有内存，从而导致内存泄漏。
  3. 不安全：自定义的脚本和插件，会拿到操作系统的系统权限和安全数据

（3）多进程浏览器

既然单进程浏览器的缺点这么明显，那么是否可以考虑将负重比较大的单进程。拆分成负责不同功能模块的多进程呢？

在这里插入图片描
可以在上图看到，不同进程之间负责不同的内容。

不同进程的工作内容

浏览器主进程： 主要负责页面展示，用户交互，子进程管理，同时提供存储功能。

渲染进程： 每个页面都有自己的渲染进程。主要是将html,js,css转换为可以显示的网页。我们经常听到的V8引擎就是在这个进程里。

GPU进程： 主要是为了实现3D，CSS的效果

网络进程： 主要负责网络加载

插件进程： 如果有插件的话，会为插件单独开一个进程用来运行。

所以我们现在已经知道，如果有人问你
当你打开一个浏览器，浏览器会开几个进程？答案是四个，因为有可能没有插件进程。

当然你也可以打开浏览器的任务管理器自己查看当前浏览器的进程：

在这里插入图片描述

多进程的缺点

当然和优点比起来，缺点显得就微不足道了。

  1. 更高的资源占用：因为进程多了资源占用的自然就多
  2. 更复杂的体系结构：浏览器耦合性差，扩展性差，会导致现在的架构很难适应新的需求。

（3）常见问题

问：既然每个页面都有一个渲染进程，那为什么有时候一个页面卡死，会影响其他的页面。

答：通常来讲，一个页面只有一个渲染进程。但是如果两个页面来自一个站点（例如只是端口号不同），那么这两个页面会使用同一个渲染进程。

问：多进程是如何解决安全问题的。

答：在渲染进程和插件进程中，做了沙箱处理。他们无法在硬盘写入任何数据，也不能在敏感位置读取数据。

第二部分：从输入URL到页面展示，这中间发生了什么？

OK，这也是一道很常见的面试题。现在，我们了解了每个进程都是干什么的了。我们通过从进程的角度，来解释这一个问题。

在这里插入图片描述
先将流程图附上，在后面的讲解可以比对着这张图来看。

浏览器进程

  • 判断用户输入的关键字为搜索内容还是URL
  • 如果是搜索内容，就使用浏览器默认的搜索引擎，来合成带搜索内容的URL
  • 如果是请求的URL，就会将请求的URL拼接成合法的，完整的URL，通过IPC把请求的URL交给网络进程。

网络进程

  • 网络进程查找本地缓存，是否命中强缓存，如果命中，直接将缓存交给浏览器进程
  • 如果没有命中强缓存，通过DNS对域名解析成IP地址
  • 利用IP地址，建立TCP连接，发送HTTP请求，服务器返回响应信息
  • 返回信息中，如果命中协商缓存，继续从缓存里拿资源，交给浏览器进程。否则进行下一步
  • 返回的状态码如果是301 或者 302，就要进行重定向，回到第一步
  • 返回的状态码如果是200，那么读取响应数据，并且交给浏览器进程。
  • 关闭TCP连接

如果你对HTTP的缓存比较陌生，可以先看这一篇文章来了解强缓存和协商缓存：
Http缓存 — 强缓存和协商缓存（详解）

渲染进程

  • 此时渲染进程已经准备完毕，但是文档信息还在浏览器进程里面
  • 浏览器进程发起提交文档的信息
  • 渲染进程接受到提交文档的消息后，和网络进程建立传输管道
  • 数据传输完毕后，渲染进程返回确认提交的信息给浏览器进程
  • 浏览器进程接受到消息后，会更新浏览器的状态（页面的url，前进后退的历史状态），更新页面

所以下次如果有人问你这个问题，你就可以从浏览器多进程的角度来解释。

第三部分：浏览器的渲染进程

（1）构建DOM树

当渲染进程拿到了请求的资源后，html文档是不能够被浏览器所识别的。所以需要将html文档转化为能够被浏览器所识别的DOM树。
DOM树是一个具有层级关系的树形结构，上面的每一个节点就是DOM元素。

DOM树也就是document，上面暴露了很多操作节点的API，例如document.getElementById方法。我们可以在浏览器控制台输入document查看DOM树。

在这里插入图片描述

（2）样式计算

在这个过程，主要是计算出每个DOM节点对应的具体样式。

转换CSS结构

CSS的来源主要有以下三种：

  1. 通过link标签引入的外部CSS
  2. style标签里的CSS内容
  3. 元素里嵌套的CSS样式

浏览器也是无法理解CSS的样式，所以要转换成浏览器可以理解的结构，styleSheets。
可以通过document.styleSheets来查看CSSOM树的结构。

在这里插入图片描述

转换样式表的属性值，使其标准化

因为我们在CSS中写得属性值都是各种各样的，所以要将它转换成浏览器容易识别的标准值。

在这里插入图片描述

计算出DOM树中每个节点的样式

由于在CSS中，我们知道有一个非常重要的机制，就是继承。那继承来的样式，并没有在对应的DOM节点上标记，所以我们要在这一个过程，计算出每个DOM节点的样式。

在这里插入图片描述

（3）布局阶段

当浏览器将html和css转换成了DOM树和CSSOM树之后，还不能进行渲染页面。需要经过布局计算的过程。

创建布局树

该过程主要检查DOM树上的每个节点的样式。是否具有隐藏样式（例如display:none），如果有的话就屏蔽掉，从而构建出一颗新的布局树。

在这里插入图片描述

布局计算

该环节主要是计算布局树中，每个节点的坐标位置。

（4）分层阶段

有了布局树之后，还是不能渲染页面。因为没有考虑到Z轴以及3D动画的问题。所以在这一步要对布局树进行分层处理。

所谓分层处理，就是将布局树分为几个图层，每个节点在自己的图层里。

在这里插入图片描述
并非每个节点都具有自己的图层，只有满足以下两个条件，才会单独为节点创建自己的图层。否则就属于父节点的图层。

（1）拥有层叠上下文的元素

在这里插入图片描述
（2）需要裁减的地方会被创建图层

例如内容区域大于父容器，那么多出来的内容就会被单独创建图层。

最终再经过图层绘制，栅格化操作，合成与显示。渲染进程的工作就做完了（后面这三步感兴趣的话可以自行查阅资料）

（5）重绘，重排，合成

这三个概念，也是经常出现在面试中的。那如果你已经了解了渲染进程的工作原理，你就可以从这方面来解释这个问题了。

（1）重排
在这里插入图片描述
（2）重绘
在这里插入图片描述

（3）合成
在这里插入图片描述

第四部分：JS是按顺序执行的吗？

当我们有了一段JS代码，JS是怎么执行的呢？
JS是先编译，再执行。举个例子：

showName()
var showName = function() {
    console.log(2)
}
function showName() {
    console.log(1)
}
showName()

看这段代码，应该输出什么呢。应该有不少人在面试中遇到过类似的问题吧。

例如上面的代码，JS要先经过编译，找到通过var，let，const，function定义的变量，将其定义好。切记，赋值操作不在这个阶段执行，上边的代码经过编译后：

var showName
function showName(){console.log(1)}

然后在执行：

showName()//输出1
showName=function(){console.log(2)}
showName()//输出2

所以会先输出1，再输出2。

第五部分：JS的调用栈

想必很多人在面试中，遇到过JS函数作用域等相关的问题吧。而这一小节，会解释JS的执行，是如何创建上下文的。

假如我有以下代码：

var a = 2
function add(b,c){
  return b+c
}
function addAll(b,c){
var d = 10
result = add(b,c)
return  a+result+d
}
addAll(3,6)

现在我们知道一段JS代码要先经过编译，然后再执行了。

（1）编译和执行过程

第一步：创建全局上下文，将编译后的内容压入栈底。

在这里插入图片描述

第二步：执行代码，a = 2;

在这里插入图片描述

第三步：调用addAll函数，编译函数里的内容，创建一个新的执行上下文，压入栈。

在这里插入图片描述

第四步：执行addAll函数里的代码，d=10;

第五步：调用add函数，继续编译add函数里的内容，创建一个上下文，压入栈。

在这里插入图片描述

第六步：执行add函数的代码，执行完后add执行上下文从栈中弹出。

在这里插入图片描述

第七步：返回结果给到addAll执行上下文，执行return语句。addAll上下文中代码执行完，弹出。

在这里插入图片描述
然后整个JS代码就执行完了，结束。

（2）常见问题

问：如何在浏览器中查看调用栈？

可以在右侧的call back中查看。也可以通过console.trace()方法查看。

在这里插入图片描述
问： 栈溢出是什么？

如果调用栈中的函数执行上下文过多，达到了临界值，那么就会报栈溢出的错误。可以自己写代码尝试浏览器的临界值是多少。

第六部分：let和var的区别

这个问题肯定是手到擒来了对吧，什么变量提升，不能重复定义巴拉巴拉。。
但是我们也可以从执行上下文中，来解释二者的区别。

在上面的流程图中，你会发现有一个词法环境，是没有用到过的。而它是专门针对let和const定义的变量，出现的。

例如我现在又这段代码：

function foo(){
    var a = 1
    let b = 2
    {
      let b = 3
      var c = 4
      let d = 5
      console.log(a)
      console.log(b)
    }
    console.log(b) 
    console.log(c)
    console.log(d)
}   
foo()

只有foo一个函数，那么这段代码经过编译后应该是：
在这里插入图片描述
通过var定义的变量，我们放在变量环境，通过let定义的变量，我们放在词法环境。OK，编译完成后，执行代码。
a = 1; b = 2;
执行块级作用域，继续编译：
在这里插入图片描述

在变量环境里加入了一个c，词法环境里加入了一个b和d。并且在词法环境中维护一个栈结构。

执行块级作用域里面的代码：
在这里插入图片描述

只不过上述流程是为了方便了解的。真正的块级作用域是不会被编译的，编译的过程只会存在第一次执行，所以编译时变量环境和词法环境最顶层数据已经确定了。

当执行到块级作用域时，块级作用域中，通过let和const声明的变量会被追加到词法作用域中，当这个块执行结束后，追加到词法作用域的内容会被销毁掉。

第七部分：作用域和作用域链

先来看一段代码：

function bar() {
    console.log(myName)
}
function foo() {
    var myName = "极客邦"
    bar()
}
var myName = "极客时间"
foo()

请做出回答，这段代码的执行结果是什么。现在我们通过作用域来对它进行解释。

现在我们可以很清晰的写出整个执行栈了：
在这里插入图片描述
当在bar的执行上下文中，找不到myName的变量时。它要沿着作用域链进行查找。
而作用域链是在代码定义的时候就已经确定了的，并不是在编译时确定的。

每一个执行上下文都有一个auto指针，指向作用域链上的上一个上下文：
在这里插入图片描述
而作用域链，是由词法作用域来决定的。词法作用域是一个静态作用域，由代码位置来确定：
在这里插入图片描述

闭包的情况

来看一段代码：

function foo() {
    var myName = "极客时间"
    let test1 = 1
    const test2 = 2
    var innerBar = {
        getName:function(){
            console.log(test1)
            return myName
        },
        setName:function(newName){
            myName = newName
        }
    }
    return innerBar
}
var bar = foo()
bar.setName("极客邦")
bar.getName()
console.log(bar.getName())

在看后面的内容前，可以先试着写出打印结果。

现在我们一步步来分析，整个过程。

（1）首先是创建全局执行上下文，并且创建foo函数的执行上下文：
在这里插入图片描述
（2）编译结束后，执行foo函数，将innerBar赋值给bar。等foo函数执行完后，会从调用栈中弹出，但是因为innerBar中访问了foo函数中的变量。

所以即便foo函数弹出了，但是getName和setName依旧可以访问myName和test1。
在这里插入图片描述
所以我们来给闭包一个专属的定义：

在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问其外部函数中声明的变量，当通过调用一个外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包。比如外部函数是 foo，那么这些变量的集合就称为 foo 函数的闭包。

第八部分：垃圾回收机制

又是一个面试中比较常见的问题：
首先，我们知道，在JS中，变量的内存是保存在调用栈中。而对象的内存是保存在堆内存中。
如果你不了解堆内存和栈内存，可以先看一下相关文章。
例如我又这样一段代码：

function foo(){
    var a = 1
    var b = {name:"极客邦"}
    function showName(){
      var c = 2
      var d = {name:"极客时间"}
    }
    showName()
}
foo()

调用栈和堆内存的空间状态如图所示：

在这里插入图片描述
当showName函数执行完后，栈中的上下文会一个个弹出，但是堆内存的数据还没有清理。所以我们说的垃圾回收机制，主要针对的是堆内存中的数据。

（1）代际假说

代际假说有两个特点：

  • 大部分对象在内存中存在的时间都很短
  • 不死的对象会活很久

基于这个特点，V8将内存分为了两种。新生代内存和老生代内存。针对于这两部分，V8用不同的机制去实现垃圾回收。

  • 副垃圾回收器：负责回收新生代的内存
  • 主垃圾回收器：负责回收老生代的内存

（2）副垃圾回收器

在新生代内存中，主要使用Scavenge算法来处理。所谓Scavenge算法，就是将新生代的内存分为两部分，一部分是对象区域，一部分是空闲区域。

在这里插入图片描述
每次新加入对象后，都会在对象区域添加。等对象区域满了，就要执行一次垃圾回收操作。

将对象区域中的所有内存打上标记，标记完成后，会将存活的对象复制到空闲区域，同时还会把这些对象有序的排列起来，所以复制的过程，也是对内存整理的过程。

然后对象区域和空闲区域进行互换，等新的对象区域又满了，再次执行垃圾回收操作。

注意：V8还有一个策略是，经过两次垃圾回收，依然存活在对象区域的话，会被移动到老生区域中。

（3）主垃圾回收器

主垃圾回收器，主要是通过标记-清除的方式进行垃圾回收。

标记阶段

通过遍历调用栈，如果有对内存的引用，就会标记为活动对象，如果没有就会标记为垃圾数据。

清除阶段

将垃圾数据的内存进行清除
在这里插入图片描述

不过对一个区域进行标记清除算法之后，会产生大量的不连续的碎片。由于不连续会导致大对象不能分配到连续的内存，于是产生了另一种算法，标记-整理。

标记的方式还是一样，只不过是将所有存活的对象，同时向一段移动。移动完后，会将所有边界外的数据清除。

在这里插入图片描述

全停顿

由于JS是在主线程上执行，一旦执行垃圾回收算法，那么主线程的JS就要停止，等垃圾回收完再继续执行，这种情况叫全停顿。

在这里插入图片描述
为了降低老生代垃圾回收而造成的卡顿，V8引擎将标记的过程分为一个个子过程，同时让垃圾回收的操作和JS交替运行，直到标记阶段结束，我们把这个算法称为增量-标记。

在这里插入图片描述

第九部分：事件循环

事件循环也是在面试中比较常见的问题了。
而JS的事件循环，是通过浏览器的消息队来实现的：
在这里插入图片描述

  • 渲染进程：用来解析JS代码
  • 消息队列：用来存放宏任务列表
  • IO线程：用来和其他线程进行通信

每个宏任务都有一个微任务队列，用来存放微任务。当宏任务里的代码全部执行完毕后， 才会执行微任务队列里面的微任务。

现在我用一段代码来描述：

 console.log(123)
 setTimeout(() => {
   console.log('time');
   new Promise((resolve,reject) =>{resolve()}).then(() => {
       console.log(123);
   })
 }, 0);
 new Promise((resolve,reject) =>{resolve()}).then(() => {
   console.log(123);
 })
 console.log(789);
  1. 执行代码，给JS整体代码创建宏任务H1。
  2. 执行宏任务H1，打印123
  3. 碰到setTimeout，创建宏任务H2，继续执行代码
  4. 碰到Promise.then，在宏任务H1中创建微任务队列W1，并将Promise.then放在队列里
  5. 继续执行代码，输出789
  6. 宏任务H1代码执行完了，开始执行微任务队列W1里的代码，输出123
  7. 宏任务H1里的微任务队列执行完，开始执行宏任务H2
  8. 输出time，碰到Promise.then，给宏任务H2添加微任务队列W2
  9. 执行W2里的代码，输出123

OK，这样这段代码的事件循环就描述清楚了。
在这里插入图片描述

第十部分：await和async

上面说了事件循环，但是我们知道，在JS中，异步相关的还有await和async。
在解释await和async之前，我们先来说一下Generator和协程的概念。

看下面的代码：
如果你不了解Generator，可以先看一下相关的概念。

function* genDemo() {
    console.log("开始执行第一段")
    yield 'generator 2'

    console.log("开始执行第二段")
    yield 'generator 2'

    console.log("开始执行第三段")
    yield 'generator 2'

    console.log("执行结束")
    return 'generator 2'
}

console.log('main 0')
let gen = genDemo()
console.log(gen.next().value)
console.log('main 1')
console.log(gen.next().value)
console.log('main 2')
console.log(gen.next().value)
console.log('main 3')
console.log(gen.next().value)
console.log('main 4')

在渲染进程中，有一个主线程用来执行代码，消息队列用来存放宏任务，IO线程用来处理接受外部的事件。

协程的概念就是，在主线程中开辟另一条路来执行。
而上面的代码执行起来就是：

  • let gen = genDemo()： 开辟一个协程
  • gen.next()：将执行的主动权交给gen协程
  • yield：将执行的主动权还给主线程
  • rerturn：关闭协程

在这里插入图片描述
OK。如果了解了Generator，那我们就来看一下await是什么情况：

async function foo() {
    console.log(1)
    let a = await 100
    console.log(a)
    console.log(2)
}
console.log(0)
foo()
console.log(3)

对于这段代码来说：

  • 执行foo函数，开辟foo协程
  • 执行到await 100，此时await会创建一个promise对象
  • 将promise对象交给主线程，主线程通过Promise.then()来监听foo协程的变化，其实就是创建了一个微任务队列，用来存放foo协程里面剩下的内容。
  • 执行主线程的代码，执行完后，执行微任务队列里面的内容

第十一部分：JS是如何影响DOM树的构建

（1）DOM树是如何构建的

  • 网络进程收到响应，判断content-type是否为text/html,如果是
  • 创建一个渲染进程，和网络进程建立管道
  • 网络进程将请求的内容，通过管道输送给渲染进程

在渲染进程中，有一个HTML解析器，是专门用来解析文档的，解析的过程如下：
在这里插入图片描述

通过分词器将字节流转换为Token

Token分为Tag Token（对应的是div，span等） 和Text Token（对应的是文本节点）。
Tag Token又分为StartTag（对应的是标签开头）和EndTag（对应的是标签末尾）。

在这里插入图片描述

计算节点的父子关系

将HTML转为对应的Token之后，就要摸清Token和Token之间的关系了。

在HTML解析器中，维护了一个Token栈结构，这个栈主要是为了计算节点与节点之间的对应父子关系。第一阶段生成的Token会按顺序压入栈中。

  • 如果压入栈中的是StateTag，HTML解析器就会为该Token创建一个DOM节点，将该节点插入到DOM树中。而该节点的父节点，就是该Token相邻的Token对应的DOM节点。
  • 如果是TextToken，就不会将该Token压入栈中，而是直接生成一个文本节点插入到DOM树中，对应的父节点就是栈顶元素。
  • 如果压入的是EndTag，那么就会查看栈顶元素是否为StartTag，如果是，就将栈顶元素弹出，表示该Token已经解析完毕。

（2）JS是如何影响DOM生成的

我们拿代码来举例子：

JS脚本

<html>
<body>
    <div>1</div>
    <script>
    let div1 = document.getElementsByTagName('div')[0]
    div1.innerText = 'time.geekbang'
    </script>
    <div>test</div>
</body>
</html>

对于这段代码，当HTML解析器碰到script标签之后，HTML解析器会暂停工作。因为JS的执行可能会影响DOM。所以要等JS执行完之后，再进行解析。

动态引入

<html>
<body>
    <div>1</div>
    <script type="text/javascript" src='foo.js'></script>
    <div>test</div>
</body>
</html>

通过src方式的引入，HTML解析器依旧会暂停工作，不过在执行JS代码之前，要先对JS的文件进行下载，而JS的下载是非常耗时的。

所以谷歌浏览器在这方面做了优化，叫做预解析操作。渲染进程会分析HTML中的JS和CSS文件，然后提前去下载它们。

所以如果不是修改DOM操作的JS脚本，可以通过defer属性或者async属性来让脚本异步执行。
二者的区别在于：

  • async脚本在加载完毕后立即执行，而defer脚本会在DOMContentLoaded事件之前执行
  • defer标记的脚本需要按顺序执行，async是加载完就执行

（3）CSS阻塞

<html>
    <head>
        <style src='theme.css'></style>
    </head>
<body>
    <div>1</div>
    <script>
            let div1 = document.getElementsByTagName('div')[0]
            div1.innerText = 'time.geekbang' //需要DOM
            div1.style.color = 'red'  //需要CSSOM
        </script>
    <div>test</div>
</body>
</html>

正常来讲，页面的渲染，应该是先构建DOM树，在进行样式计算。

但是如果我们在JS中修改了DOM的样式，这个时候就要先解析对应节点的CSS样式，如果是外部引入，那么就要先下载。

所以：
CSS不会阻塞DOM的生成，但是会阻塞JS的执行，从而影响DOM树的构建

OK，课程后面还有一些内容，写不动了，不写了，就写到这里吧。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/922301.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android多线程开发核心知识点

Android多线程开发核心知识点

什么是线程并发安全 线程安全的本质是能够让并发线程&#xff0c;有序的运行(这个有序可能是先来后到的排队&#xff0c;有可能有人插队&#xff0c;但是不管怎么着&#xff0c;同一时刻只能一个线程有权访问同步资源)&#xff0c;线程执行的结果&#xff0c;能够对其他线程可…
阅读更多...
C语言实例_数据压缩与解压

C语言实例_数据压缩与解压

一、压缩与解压介绍 数据压缩是通过一系列的算法和技术将原始数据转换为更紧凑的表示形式&#xff0c;以减少数据占用的存储空间。数据解压缩则是将压缩后的数据恢复到原始的表示形式。 数据可以被压缩打包并减少空间占用的原因有以下几个方面&#xff1a; &#xff08;1&am…
阅读更多...
Python支持下Noah-MP陆面模式站点、区域模拟及可视化分析

Python支持下Noah-MP陆面模式站点、区域模拟及可视化分析

熟悉陆表过程的主要研究内容以及陆面模型在生态水文研究中的地位和作用&#xff1b;深入理解Noah-MP 5.0模型的原理&#xff0c;掌握Noah-MP模型&#xff08;2023年最新发布的5.0版本&#xff09;所需的系统环境与编译环境的搭建方法及模型实践运行&#xff0c;熟悉linux系统操…
阅读更多...
高忆管理大盘行情：美股开盘时间？

高忆管理大盘行情：美股开盘时间？

股票商场是一个充满生机的环境&#xff0c;而美股作为全球最具生机和最具影响力的股票商场之一&#xff0c;被投资者和买卖员广泛关注。美股开盘时刻是众多投资者和买卖员最为关心的问题之一&#xff0c;由于不同的买卖时刻会对在商场中进行投资产生重要影响。那么&#xff0c;…
阅读更多...
虹科分享 | 如何构建深度防御层 | 自动移动目标防御

虹科分享 | 如何构建深度防御层 | 自动移动目标防御

在当今的威胁环境中&#xff0c;多层纵深防御是安全团队获得安心的唯一方法之一。 为什么?有两个原因: 1、攻击面越来越大 随着DevOps等远程工作和数字化转型项目的兴起&#xff0c;攻击面已经超出了大多数安全团队的定义能力。创建一个完全安全的网络边界是不可能的。正如…
阅读更多...
计算机视觉-图形处理基础

计算机视觉-图形处理基础

一、环境安装 1、anaconda安装 官网下载&#xff1a;Free Download | Anaconda 2、打开anaconda prompt测试是否安装成功 输入conda env list命令显示虚拟环境清单即可 二、创建开发虚拟环境 1、创建python3.8虚拟环境 conda create --name demo_py3.8 python3.8 2、激…
阅读更多...
ubuntu18 编译ROS代码 报“cxx_attribute_deprecated”is not know to CXX compiler

ubuntu18 编译ROS代码 报“cxx_attribute_deprecated”is not know to CXX compiler

编译代码报错如下&#xff1a; 通常用两种解决方式&#xff1a; 1&#xff1a;先检查一下 编写的CMakeList.txt的文件中&#xff0c;所包含、链接的文件和库是否都存在且引用正确&#xff08;仔细的查看了一下&#xff0c;都是正确的&#xff09; 2&#xff1a;查看一下cmake…
阅读更多...
iOS 17 及 Xcode 15.0 Beta7 问题记录

iOS 17 及 Xcode 15.0 Beta7 问题记录

1、iOS 17 真机调试问题 iOS 17之后&#xff0c;真机调试Beta版本必须使用Beta版本的Xcode来调试&#xff0c;用以前复制DeviceSupport 方式无法调试&#xff0c;新的Beta版本Xcode中&#xff0c;已经不包含 iOS 17目录。如下图&#xff1a; 解决方案&#xff1a; 1&#x…
阅读更多...
数据驱动的胜利：体育赛事的可视化之道

数据驱动的胜利：体育赛事的可视化之道

当前&#xff0c;体育赛事遍地开花&#xff0c;智能体育也不断成熟。体育赛事不断与物联网、数字孪生等新一代信息技术深入融合&#xff0c;创新运动方式&#xff0c;推动全民健身&#xff0c;促进产业升级。数字孪生可视化平台易知微也一直致力于体育领域的数字化发展&#xf…
阅读更多...
Elexcon2023深圳国际电子展开幕，飞凌嵌入式重装亮相！

Elexcon2023深圳国际电子展开幕，飞凌嵌入式重装亮相！

8月23日&#xff0c;Elexcon2023深圳国际电子展正式开幕&#xff0c;近600家全球优质品牌厂商齐聚深圳会展中心&#xff08;福田&#xff09;&#xff0c;并有上万名观众来到现场参观、交流。飞凌嵌入式携多款多类型的智能主控产品及热门行业解决方案亮相盛会&#xff0c;展位号…
阅读更多...
基于 SpringBoot+Vue+Java 的财务管理系统，附源码，教程

基于 SpringBoot+Vue+Java 的财务管理系统，附源码，教程

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 一 简介第二.主要技术第三、部分效果图第四章 系统设计4.1功能结构4.2 数据库设计4.2.1 数据库E/R…
阅读更多...
如何使用图形数据库构建实时推荐引擎

如何使用图形数据库构建实时推荐引擎

推荐&#xff1a;使用 NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 “这是给你的”&#xff0c;“为你推荐的”或“你可能也喜欢”&#xff0c;是大多数数字业务中必不可少的短语&#xff0c;特别是在电子商务或流媒体平台中。 尽管它们看起来像一个简单的概念&#xf…
阅读更多...
Linux 设置mysql开机自启动和安装JDK

Linux 设置mysql开机自启动和安装JDK

0目录 1.mysql设置开机自启动 2.linux安装jdk 1.mysql设置开机自启动 去到cd /etc/rc.d/init.d目录 创建一个sh脚本 编辑脚本 设置开机自启动 重启 检查是否自启动 2.linux安装jdk 下载安装包 放在opt目录下 新建soft文件夹&#xff08;opt目录下&#xff09;…
阅读更多...
window版本的kibana的安装，使用，启动

window版本的kibana的安装，使用，启动

前言&#xff1a;本篇是根据小破站UP主遇见狂神说学习篇&#xff0c; 这里是我做的笔记&#xff0c;&#xff08;ElasticSearch7.6入门学习笔记-KuangStudy-文章&#xff09;&#xff0c;up主的文档肯定比我更清晰&#xff0c;但我还是记录一下嘿嘿嘿&#xff0c;下面直接开始 …
阅读更多...
用户管理与用户权限

用户管理与用户权限

数据库用户管理 新建用户 CREATE USER 用户名来源地址 [IDENTIFIED BY [PASSWORD] 密码]; 用户名&#xff1a;指定将创建的用户名. 来源地址&#xff1a;指定新创建的用户可在哪些主机上登录&#xff0c;可使用IP地址、网段、主机名的形式&#xff0c;本地用户可用localhost&…
阅读更多...
【全站最全】被苹果、谷歌和Microsoft停产的产品(三)

【全站最全】被苹果、谷歌和Microsoft停产的产品(三)

2016 Narrative Clip 2012 – 2016 HARDWARE Narrative Clip was small wearable capable of automatically take a picture every 30 seconds whilst being worn throughout the day, a practice known as "life-logging". Pebble 2013 – 2016 HARDWARE Pe…
阅读更多...
C#+WPF上位机开发（模块化+反应式）作者:重庆教主

C#+WPF上位机开发（模块化+反应式）作者:重庆教主

在上位机开发领域中&#xff0c;C#与C两种语言是应用最多的两种开发语言&#xff0c;在C语言中&#xff0c;与之搭配的前端框架通常以QT最为常用&#xff0c;而C#语言中&#xff0c;与之搭配的前端框架是Winform和WPF两种框架。今天我们主要讨论一下C#和WPF这一对组合在上位机开…
阅读更多...
SUI 将通过 SUI Foundation 资助 Footprint Analytics 解析其公链数据，为生态系统提供支持

SUI 将通过 SUI Foundation 资助 Footprint Analytics 解析其公链数据，为生态系统提供支持

2023 年 8 月 23 日消息&#xff0c;SUI 基金会宣布将赞助链上数据提供商 Footprint Analytics&#xff0c;旨在协助解析公链数据&#xff0c;为 SUI 的生态系统及其开发者提供全方位支持。 Footprint Analytics 将提供完整的数据报表和 API 接口&#xff0c; SUI 链的用户可以…
阅读更多...
uniapp离线打包apk - Android Studio

uniapp离线打包apk - Android Studio

uniapp 离线打包 基于uni-app的andiord 离线打包 开发工具及所需要的jar包​1.将下载的App离线SDK解压打开&#xff0c;找到HBuilder-Integrate-AS &#xff0c;在Android Studio打开2.打开HBuilder X&#xff0c;发行->原生app本地打包->生成本地打包app资源3.在“HBuil…
阅读更多...
GitLab-CI 指南

GitLab-CI 指南

GitLab CI 指南 前置工作 部署GitLab 部署GitLab-Runner 注册Runner到GitLab docker exec -it gitlab-runner bash # 进入容器 gitlab-runner register #调用register命令开始注册 # 在Gitlab Setting中找到Runners，如下图所示Enter the GitLab instance URL (for example, …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023