精华内容
下载资源
问答
  • 浏览器运行机制
    千次阅读
    2018-05-08 16:09:12

    浏览器作用:

    1。向远程服务器发送请求

    2。读取远程服务器返回的字符串数据

    3。根据字符串数据渲染出一个丰富多彩的页面

    (建立HTML页面的DOM模型)

     

    web服务器运行机制:

    1。浏览器发送请求数据到服务器

    2。服务器解析请求参数

    3。服务器处理用户请求

    4。服务器生成响应数据

    5。服务器向浏览器送回响应数据

     

    客户端每次请求服务器需要完成如下步骤:

    1。启动单独线程(一些服务已经不需要对每个用户都启用单独的线程)

    2。I/O流读取用户请求的二进制数据

    3。解析参数

    4。处理请求

    5。生成响应数据

    6。I/O流向客户端发送请求

    更多相关内容
  • 浏览器运行机制

    千次阅读 2021-09-17 21:02:04
    1.浏览器运行原理 1.1浏览器的内部构造 用户界面 浏览器引擎:在用户界面和传送引擎之间传送指令。 渲染引擎:负责显示请求的内容。 网络 用户界面后端:用于绘制基本的窗口小部件。 JavaScript解释器 数据...

    注:牛客职导前端课程笔记

    1.浏览器运行原理

    1.1浏览器的内部构造

    用户界面

    浏览器引擎:在用户界面和传送引擎之间传送指令。

    渲染引擎:负责显示请求的内容。

    网络

    用户界面后端:用于绘制基本的窗口小部件。

    JavaScript解释器

    数据存储:持久层,这是一个完整的浏览器内数据库。

    1.2浏览器的进程

    进程:一个进程就是一个程序的运行实例。

    线程:程序执行的最小单位。

    关系:线程依附于进程,进程可以使用多线程并行处理来提高运算效率。

    特点:

    ①线程中某个任务报错,阻止后面任务执行。

    ②进程中任意线程出错,整个进程崩溃。

    ③一个程序有多个进程时,一个崩溃不影响其他。

    ④线程之间共享数据,进程之间内容相互隔离。

    浏览器进程:

    现代浏览器是多进程的,每个标签页单独渲染,一个崩溃不影响其他。

    浏览器进程:主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。

    渲染进程:核心任务是将HTML、CSS、和JavaScript转换为用户可以与之交互的网页,Blink和V8都是运行在该进程中的。

    GPU进程:为了实现3D CSS的效果。

    网络进程:页面的网络资源加载。

    插件进程:插件的运行,因插件易崩溃,需要插件进程隔离,保证崩溃时其他进程不受影响。

    1.3渲染进程

    浏览器GUI渲染线程:HTML转换成dom树、将CSS样式转换成style表、创建布局树、对布局树进行分层,为每个图层生成绘制列表、将图层分成图块,光栅化将图块转换成位图、合成线程发送绘制图块命令DrawQuad给浏览器进程,浏览器进程根据DrawQuad消息生成页面,并显示到显示器上。

    重排:当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排 。

    重排特点:style后面所有流程都更新 。

    重绘:当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程 。

    重绘特点:跳过布局和分层阶段 。

    重排必重绘。

    JavaScript引擎线程:GUI渲染线程与JS引擎线程互斥,所以如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞 。

    2.V8引擎如何运行代码

    2.1 生成AST语法树

    源码经过词法分析和语法分析生成AST语法树。

    词法分析(分词):将源码拆解为不可能再分的、最小的单个字符或字符串 。

    语法分析(解析):根据语法规则转换为AST,如果源码存在语法错误,这一步就会终止,并抛出一个“语法错误”。

    2.2 生成字节码

    解释器 Ignition ,根据 AST 生成字节码,并解释执行字节码。

    字节码就是介于 AST 和机器码之间的一种代码。但是与特定类型的机器码无关,字节码需要通过解释器将其转换为机器码后才能执行。

    在 V8 中,字节码有三个作用:

    第一个是解释器可以直接解释执行字节码 ;

    第二个是优化编译器可以将字节码编译为二进制代码,然后再执行二进制机器代码。

    第三个是字节码是平台无关的,机器码针对不同的平台都是不一样的。

    2.3 执行代码

    解释器 Ignition 逐条解释执行字节码。

    展开全文
  • 浏览器HTTP缓存运行机制的流程图 强缓存和协商缓存
  • 浏览器背后的运行机制

    千次阅读 多人点赞 2019-01-12 19:02:41
    浏览器背后的运行机制 从本章开始,我们的性能优化探险也正式进入到了“深水区”——浏览器端的性能优化。 平时我们几乎每天都在和浏览器打交道,在一些兼容任务比较繁重的团队里,苦逼的前端攻城师们甚至为了兼容...

    浏览器背后的运行机制


    从本章开始,我们的性能优化探险也正式进入到了“深水区”——浏览器端的性能优化。

    平时我们几乎每天都在和浏览器打交道,在一些兼容任务比较繁重的团队里,苦逼的前端攻城师们甚至为了兼容各个浏览器而不断地去测试和调试,还要在脑子中记下各种遇到的 BUG 及解决方案。即便如此,我们好像并没有去主动地关注和了解下浏览器的工作原理。我想如果我们对此做一点了解,在项目过程中就可以有效地避免一些问题,并对页面性能做出相应的改进。

    “知己知彼,百战不殆”,今天,我们就一起来揭开浏览器渲染过程的神秘面纱!

    浏览器的“心”

    浏览器的“心”,说的就是浏览器的内核。在研究浏览器微观的运行机制之前,我们首先要对浏览器内核有一个宏观的把握。

    开篇我提到许多工程师因为业务需要,免不了需要去处理不同浏览器下代码渲染结果的差异性。这些差异性正是因为浏览器内核的不同而导致的——浏览器内核决定了浏览器解释网页语法的方式。
    浏览器内核可以分成两部分:渲染引擎(Layout Engine 或者 Rendering Engine)和 JS 引擎。早期渲染引擎和 JS 引擎并没有十分明确的区分,但随着 JS 引擎越来越独立,内核也成了渲染引擎的代称(下文我们将沿用这种叫法)。渲染引擎又包括了 HTML 解释器、CSS 解释器、布局、网络、存储、图形、音视频、图片解码器等等零部件。

    https://user-gold-cdn.xitu.io/2018/9/27/16619bf6505a94db?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

    目前市面上常见的浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。

    这里面大家最耳熟能详的可能就是 Webkit 内核了。很多同学可能会听说过 Chrome 的内核就是 Webkit,殊不知 Chrome 内核早已迭代为了 Blink。但是换汤不换药,Blink 其实也是基于 Webkit 衍生而来的一个分支,因此,Webkit 内核仍然是当下浏览器世界真正的霸主。

    下面我们就以 Webkit 为例,对现代浏览器的渲染过程进行一个深度的剖析。

    开启浏览器渲染“黑盒”


    什么是渲染过程?简单来说,渲染引擎根据 HTML 文件描述构建相应的数学模型,调用浏览器各个零部件,从而将网页资源代码转换为图像结果,这个过程就是渲染过程(如下图)。

    https://user-gold-cdn.xitu.io/2018/9/27/16618c7f0cb0768a?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

    从这个流程来看,浏览器呈现网页这个过程,宛如一个黑盒。在这个神秘的黑盒中,有许多功能模块,内核内部的实现正是这些功能模块相互配合协同工作进行的。其中我们最需要关注的,就是HTML 解释器、CSS 解释器、图层布局计算模块、视图绘制模块与JavaScript 引擎这几大模块:

    • HTML 解释器:将 HTML 文档经过词法分析输出 DOM 树。

    • CSS 解释器:解析 CSS 文档, 生成样式规则。

    • 图层布局计算模块:布局计算每个对象的精确位置和大小。

    • 视图绘制模块:进行具体节点的图像绘制,将像素渲染到屏幕上。

    • JavaScript 引擎:编译执行 Javascript 代码。

    浏览器渲染过程解析


    有了对零部件的了解打底,我们就可以一起来走一遍浏览器的渲染流程了。在浏览器里,每一个页面的首次渲染都经历了如下阶段(图中箭头不代表串行,有一些操作是并行进行的,下文会说明):

    https://user-gold-cdn.xitu.io/2018/9/27/16618c829b879f35?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

    • 解析 HTML
      在这一步浏览器执行了所有的加载解析逻辑,在解析 HTML 的过程中发出了页面渲染所需的各种外部资源请求。

    • 计算样式
      浏览器将识别并加载所有的 CSS 样式信息与 DOM 树合并,最终生成页面 render 树(:after :before 这样的伪元素会在这个环节被构建到 DOM 树中)。

    • 计算图层布局
      页面中所有元素的相对位置信息,大小等信息均在这一步得到计算。

    • 绘制图层
      在这一步中浏览器会根据我们的 DOM 代码结果,把每一个页面图层转换为像素,并对所有的媒体文件进行解码。

    • 整合图层,得到页面
      最后一步浏览器会合并合各个图层,将数据由 CPU 输出给 GPU 最终绘制在屏幕上。(复杂的视图层会给这个阶段的 GPU 计算带来一些压力,在实际应用中为了优化动画性能,我们有时会手动区分不同的图层)。

    几棵重要的“树”


    上面的内容没有理解透彻?别着急,我们一起来捋一捋这个过程中的重点——树!

    为了使渲染过程更明晰一些,我们需要给这些”树“们一个特写:

    https://user-gold-cdn.xitu.io/2018/9/27/16619d637d220b20?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

    • DOM 树:解析 HTML 以创建的是 DOM 树(DOM tree ):渲染引擎开始解析 HTML 文档,转换树中的标签到 DOM 节点,它被称为“内容树”。

    • CSSOM 树:解析 CSS(包括外部 CSS 文件和样式元素)创建的是 CSSOM 树。CSSOM 的解析过程与 DOM 的解析过程是并行的。

    • 渲染树:CSSOM 与 DOM 结合,之后我们得到的就是渲染树(Render tree )。

    • 布局渲染树:从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标,我们便得到了基于渲染树的布局渲染树(Layout of the render tree)。

    • 绘制渲染树: 遍历渲染树,每个节点将使用 UI 后端层来绘制。整个过程叫做绘制渲染树(Painting the render tree)。

    基于这些“树”,我们再梳理一番:

    渲染过程说白了,首先是基于 HTML 构建一个 DOM 树,这棵 DOM 树与 CSS 解释器解析出的 CSSOM 相结合,就有了布局渲染树。最后浏览器以布局渲染树为蓝本,去计算布局并绘制图像,我们页面的初次渲染就大功告成了。

    之后每当一个新元素加入到这个 DOM 树当中,浏览器便会通过 CSS 引擎查遍 CSS 样式表,找到符合该元素的样式规则应用到这个元素上,然后再重新去绘制它。

    有心的同学可能已经在思考了,查表是个花时间的活,我怎么让浏览器的查询工作又快又好地实现呢?OK,讲了这么多原理,我们终于引出了我们的第一个可转化为代码的优化点——CSS 样式表规则的优化!

    不做无用功:基于渲染流程的 CSS 优化建议


    在给出 CSS 选择器方面的优化建议之前,先告诉大家一个小知识:CSS 引擎查找样式表,对每条规则都按从右到左的顺序去匹配。 看如下规则:

    #myList  li {}
    

    这样的写法其实很常见。大家平时习惯了从左到右阅读的文字阅读方式,会本能地以为浏览器也是从左到右匹配 CSS 选择器的,因此会推测这个选择器并不会费多少力气:#myList 是一个 id 选择器,它对应的元素只有一个,查找起来应该很快。定位到了 myList 元素,等于是缩小了范围后再去查找它后代中的 li 元素,没毛病。

    事实上,CSS 选择符是从右到左进行匹配的。我们这个看似“没毛病”的选择器,实际开销相当高:浏览器必须遍历页面上每个 li 元素,并且每次都要去确认这个 li 元素的父元素 id 是不是 myList,你说坑不坑!

    说到坑,不知道大家还记不记得这个经典的通配符:

    * {}
    

    入门 CSS 的时候,不少同学拿通配符清除默认样式(我曾经也是通配符用户的一员)。但这个家伙很恐怖,它会匹配所有元素,所以浏览器必须去遍历每一个元素!大家低头看看自己页面里的元素个数,是不是心凉了——这得计算多少次呀!

    这样一看,一个小小的 CSS 选择器,也有不少的门道!好的 CSS 选择器书写习惯,可以为我们带来非常可观的性能提升。根据上面的分析,我们至少可以总结出如下性能提升的方案:

    • 避免使用通配符,只对需要用到的元素进行选择。

    • 关注可以通过继承实现的属性,避免重复匹配重复定义。

    • 少用标签选择器。如果可以,用类选择器替代,举个?:

    false:

    #myList li{}
    

    true:

    .myList_li {}
    
    • 不要画蛇添足,id 和 class 选择器不应该被多余的标签选择器拖后腿。举个?:

    false:

    .myList#title
    

    true:

    #title
    
    • 减少嵌套。后代选择器的开销是最高的,因此我们应该尽量将选择器的深度降到最低(最高不要超过三层),尽可能使用类来关联每一个标签元素。

    搞定了 CSS 选择器,万里长征才刚刚开始的第一步。但现在你已经理解了浏览器的工作过程,接下来的征程对你来说并不再是什么难题~

    告别阻塞:CSS 与 JS 的加载顺序优化


    说完了过程,我们来说一说特性。

    HTML、CSS 和 JS,都具有阻塞渲染的特性。

    HTML 阻塞,天经地义——没有 HTML,何来 DOM?没有 DOM,渲染和优化,都是空谈。

    那么 CSS 和 JS 的阻塞又是怎么回事呢?

    CSS 的阻塞

    在刚刚的过程中,我们提到 DOM 和 CSSOM 合力才能构建渲染树。这一点会给性能造成严重影响:默认情况下,CSS 是阻塞的资源。浏览器在构建 CSSOM 的过程中,不会渲染任何已处理的内容。即便 DOM 已经解析完毕了,只要 CSSOM 不 OK,那么渲染这个事情就不 OK(这主要是为了避免没有 CSS 的 HTML 页面丑陋地“裸奔”在用户眼前)。

    我们知道,只有当我们开始解析 HTML 后、解析到 link 标签或者 style 标签时,CSS 才登场,CSSOM 的构建才开始。很多时候,DOM 不得不等待 CSSOM。因此我们可以这样总结:

    CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端,以便缩短首次渲染的时间。

    事实上,现在很多团队都已经做到了尽早(将 CSS 放在 head 标签里)和尽快(启用 CDN 实现静态资源加载速度的优化)。这个“把 CSS 往前放”的动作,对很多同学来说已经内化为一种编码习惯。那么现在我们还应该知道,这个“习惯”不是空穴来风,它是由 CSS 的特性决定的。

    JS 的阻塞

    不知道大家注意到没有,前面我们说过程的时候,花了很多笔墨去说 HTML、说 CSS。相比之下,JS 的出镜率也太低了点。
    这当然不是因为 JS 不重要。而是因为,在首次渲染过程中,JS 并不是一个非登场不可的角色——没有 JS,CSSOM 和 DOM 照样可以组成渲染树,页面依然会呈现——即使它死气沉沉、毫无交互。

    JS 的作用在于修改,它帮助我们修改网页的方方面面:内容、样式以及它如何响应用户交互。这“方方面面”的修改,本质上都是对 DOM 和 CSSDOM 进行修改。因此 JS 的执行会阻止 CSSOM,在我们不作显式声明的情况下,它也会阻塞 DOM。

    我们通过一个?来理解一下这个机制:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>JS阻塞测试</title>
      <style>
        #container {
          background-color: yellow;
          width: 100px;
          height: 100px;
        }
      </style>
      <script>
        // 尝试获取container元素
        var container = document.getElementById("container")
        console.log('container', container)
      </script>
    </head>
    <body>
      <div id="container"></div>
      <script>
        // 尝试获取container元素
        var container = document.getElementById("container")
        console.log('container', container)
        // 输出container元素此刻的背景色
        console.log('container bgColor', getComputedStyle(container).backgroundColor)
      </script>
      <style>
        #container {
          background-color: blue;
        }
      </style>
    </body>
    </html>
    

    三个 console 的结果分别为:

    https://user-gold-cdn.xitu.io/2018/9/28/166203a2d62212c9?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

    注:本例仅使用了内联 JS 做测试。感兴趣的同学可以把这部分 JS 当做外部文件引入看看效果——它们的表现一致。

    第一次尝试获取 id 为 container 的 DOM 失败,这说明 JS 执行时阻塞了 DOM,后续的 DOM 无法构建;第二次才成功,这说明脚本块只能找到在它前面构建好的元素。这两者结合起来,“阻塞 DOM”得到了验证。再看第三个 console,尝试获取 CSS 样式,获取到的是在 JS 代码执行前的背景色(yellow),而非后续设定的新样式(blue),说明 CSSOM 也被阻塞了。那么在阻塞的背后,到底发生了什么呢?

    我们前面说过,JS 引擎是独立于渲染引擎存在的。我们的 JS 代码在文档的何处插入,就在何处执行。当 HTML 解析器遇到一个 script 标签时,它会暂停渲染过程,将控制权交给 JS 引擎。JS 引擎对内联的 JS 代码会直接执行,对外部 JS 文件还要先获取到脚本、再进行执行。等 JS 引擎运行完毕,浏览器又会把控制权还给渲染引擎,继续 CSSOM 和 DOM 的构建。 因此与其说是 JS 把 CSS 和 HTML 阻塞了,不如说是 JS 引擎抢走了渲染引擎的控制权。

    现在理解了阻塞的表现与原理,我们开始思考一个问题。浏览器之所以让 JS 阻塞其它的活动,是因为它不知道 JS 会做什么改变,担心如果不阻止后续的操作,会造成混乱。但是我们是写 JS 的人,我们知道 JS 会做什么改变。假如我们可以确认一个 JS 文件的执行时机并不一定非要是此时此刻,我们就可以通过对它使用 defer 和 async 来避免不必要的阻塞,这里我们就引出了外部 JS 的三种加载方式。

    JS的三种加载方式

    • 正常模式:
    <script src="index.js"></script>
    

    这种情况下 JS 会阻塞浏览器,浏览器必须等待 index.js 加载和执行完毕才能去做其它事情。

    • async 模式:
    <script async src="index.js"></script>
    

    async 模式下,JS 不会阻塞浏览器做任何其它的事情。它的加载是异步的,当它加载结束,JS 脚本会立即执行。

    • defer 模式:
    <script defer src="index.js"></script>
    

    defer 模式下,JS 的加载是异步的,执行是被推迟的。等整个文档解析完成、DOMContentLoaded 事件即将被触发时,被标记了 defer 的 JS 文件才会开始依次执行。

    从应用的角度来说,一般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时,我们会选用 async;当脚本依赖于 DOM 元素和其它脚本的执行结果时,我们会选用 defer。

    通过审时度势地向 script 标签添加 async/defer,我们就可以告诉浏览器在等待脚本可用期间不阻止其它的工作,这样可以显著提升性能。

    小结


    我们知道,当 JS 登场时,往往意味着对 DOM 的操作。DOM 操作所导致的性能开销的“昂贵”,大家可能早就有所耳闻,雅虎军规里很重要的一条就是“尽量减少 DOM 访问”。

    其它前端性能优化:

    前端技术架构体系(没有链接的后续跟进):

    其它相关

    欢迎各位看官的批评和指正,共同学习和成长
    希望该文章对您有帮助,你的 支持和鼓励会是我持续的动力

    展开全文
  • js在浏览器运行机制 浏览器工作原理: 浏览器的网络流程,页面渲染的流程,js执行流程,web安全 浏览器的多进程架构 进程和线程 并行处理 能大大提升性能 多线程可以并行处理任务,但是线程不能单独存在的,它是由...

    js在浏览器中运行机制

    浏览器工作原理:
    浏览器的网络流程,页面渲染的流程,js执行流程,web安全

    浏览器的多进程架构
    进程和线程

    并行处理 能大大提升性能
    多线程可以并行处理任务,但是线程不能单独存在的,它是由进程来启动和管理的。
    一个进程就是一个程序运行实例,操作系统为一个程序创建一个内存,用来存放代码,运行数据和执行主线程,这样的运行环境叫进程。

    线程依附于进程
    1进程中任意一个线程执行出错,都会导致怎个进程崩溃
    2线程之间可以共享数据
    3当一个进程关闭后,操作系统会回收操作系统占用的内存
    4 进程之间是的内容是相互隔离的(默认隔离)进程之间的通信ipc机制

    单进程浏览器
    1 不稳定:早期浏览器需要借助插件来实现的,插件最容易出现问题的,因为插件运行在浏览器中,所以一个插件会引起整个浏览器奔溃。
    2 不流畅:所有页面喧嚷模块,js执行环境以及插件都运行在一个线程中(单进程有多线程),同一时刻只能由一个模块可以执行
    3 不安全 :插件可以用c++c来编写,通过插件可以获取任意资源。(操作系统就是c++ c来写)

    多进程浏览器时代(资源占用率高 解构体系比较复杂)
    谷歌第一个发布了多进程架构
    1解决不稳定问题:进程相互隔离,当一个插件崩溃时,只是一个进程有问题,其他进程不受影响。
    2解决不流畅问题:js是运行在渲染进程中的,所以即使js堵塞来渲染进程,影响到的也只是当前页面
    3 安全问题:把插件进程和渲染进程放在沙箱中去运行。沙箱中进程不能读取磁盘的数据
    现在的五个进程(之前三个):
    在这里插入图片描述
    主进程:负责页面显示,用户交互,子进程管理,提供存储
    渲染进程:把html css js 转化成页面
    GPU进程:绘制动画ui界面
    网络进程:主要负责页面网络资源的加载
    插件进程:负责插件的运行。因为容易崩溃 ,所以需要进程进行隔离。

    未来的趋势:谷歌面向服务架构

    js执行机制:
    代码–>编译(编译环境,创建执行上下文)–>执行
    1当js执行全局代码,一定会编译全局代码并创建全局执行上下文,并且全局就只有一份
    2当一个函数被调用,函数体内会被编译,创建函数执行上下文,函数执行结束以后,创建的函数执行上下文会被销毁
    3当使用eval函数时候,eval代码会被编译,并创建执行上下文

    展开全文
  • 浏览器端javaScript运行机制的理解

    千次阅读 2018-01-09 15:24:24
    浏览器端javaScript运行机制的理解 线程同步异步Event-Loop 线程 Javascript语言的执行环境是"单线程"(single thread)。 所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,...
  • 浏览器(基于Chromium)运行机制剖析

    千次阅读 2019-06-29 20:18:27
    浏览器运行机制解析(以Chromium为例) 当你打开浏览器,在地址栏输入一个网址(如https://www.baidu.com),按下回车,浏览器很快就会为你加载出你想要的页面。那么你有没有想过,从你按下回车,到看到最终的页面,...
  • JS运行机制.xmind.zip

    2019-07-24 11:56:07
    整理浏览器运行机制,包括:GUI渲染线程、js引擎线程、事件触发线程、定时触发器线程和http异步请求线程等知识
  • 主要介绍了JS浏览器事件循环机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 前言接下来的几篇文章,讲一下二面的内容。二面的内容:渲染机制JS 运行机制页面性能错误监控本文接下来讲渲染机制。渲染机制包括的内容:什么是DOCTYPE及作用浏
  • 浏览器浏览器的缓存机制

    千次阅读 2022-03-11 20:30:32
    浏览器缓存机制
  • 对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,...
  • 浏览器缓存机制详细知识点梳理 在前端的性能优化中,浏览器缓存是很重要的一环。比如在页面前进或者后退,发现丝毫不卡顿很流畅,就是缓存机制的力量。 一、什么是缓存 浏览器缓存Brower Caching是浏览器对之前请求...
  • 因此准备梳理这块知识点,结合已有的认知,基于网上的大量参考资料, 从浏览器多进程到JS单线程,将JS引擎的运行机制系统的梳理一遍。展现形式:由于是属于系统梳理型,就没有由浅入深了,而是...
  • 这种对象过多会占用大量内存空间导致程序运行变慢。 解决:将不再使用的对象设置为null即可。obj=null; 内存溢出:一种程序运行出现的错误。当程序运行需要的内存超过了剩余的内存时,就会抛出内存溢出的错误。 内存...
  • 浏览器页面渲染机制

    千次阅读 2021-05-15 15:07:01
    浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐...
  • 浏览器缓存机制

    千次阅读 2019-01-08 09:55:18
    对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,...
  • 目录1.V8的垃圾回收机制是怎样的2.哪些操作会造成内存泄漏 1.V8的垃圾回收机制是怎样的 V8实现了准确式GC,GC算法采用了分布式垃圾回收机制。因此,v8将内存(堆)分为新生代和老生代两部分。 2.哪些操作会造成内存...
  • 浏览器垃圾回收机制

    千次阅读 2021-06-15 16:40:06
    垃圾回收算法(v8) 可达性:从根节点出发,遍历所有的对象,可以遍历到的对象,就是可达的 根节点包含: 全局变量window 文档DOM树 存放在栈上的变量 例 let dog.a = new Array(1) ...还有一个问题:浏览器在进行垃圾回
  • 我们知道JS是一个单线程的语言,而且其运行机制比较特殊。 下面我们通过settimeout的几个示例来展现javascript的运行机制的特殊点 示例1 console.log(1); setTimeout(function(){ console.log(2); },0); console...
  • 本篇文章是对关闭浏览器后,php脚本会不会继续运行进行了详细的分析介绍,需要的朋友参考下
  • JavaScript 运行机制及原理

    千次阅读 2022-03-10 15:12:22
    写js也有两年多了,一直对它的运行机制和原理不是很了解,今天特意把大神们的理论和自己的总结都记录到下面: 什么是JavaScript解析引擎 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出...
  • 浏览器安全机制

    千次阅读 2018-09-12 20:55:11
    前言 此文章是我最近在看的【WebKit 技术...本章主要讲解 浏览器安全机制的网页的安全和浏览器的安全。 1. 网页安全模型 1.1 安全模型基础 当用户访问网页的时候,浏览器需要确保该网页中数据的安全性...
  • 浏览器的事件循环机制

    千次阅读 2021-10-01 22:08:56
    要想在线程运行过程中,能接收并执行新的任务,就需要采用事件循环机制,如果需要接收其他进程发送来的任务需要引入消息队列 渲染进程的主线程和子线程之间是子线程将任务添加到消息队列。 其他进程发送来的任务是...
  • 知识点 使用 vite 创建 vue3 项目 vue3 简介 项目基础配置 项目首页搭建 ...Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回, 完全跳过了打
  • 浏览器的多进程、多线程运行机制

    千次阅读 2019-06-01 21:45:39
    多进程的浏览器 进程概念 进程是操作系统分配资源的基本单位,而浏览器是多进程的程序。浏览器通过多个tab页来加载多个页面,标准上一个tab页应对应浏览器的一个进程。浏览器之所以能加载出页面,是因为操作系统...
  • 浏览器(chrome)进程机制浏览器作为一个软件,大家有没有好奇浏览器是多进程的还是多线程的?每打开一个浏览器页面代表着是一个线程还是一个进程呢? 其实浏览器是一个多进程软件,从开发的角度来说,相对安全...
  • 说说浏览器的沙箱机制

    万次阅读 2019-03-23 20:23:24
    黑客会在网页中插入一段恶意代码,然后利用浏览器漏洞来执行任意代码,这就叫做 “挂马”。它是浏览器所面对的一种主要的威胁。 浏览器为了应对 “挂马” 威胁,从单进程架构转变为多进程架构。浏览器的多进程架构,...
  • 浏览器进程/线程模型及JS运行机制

    千次阅读 2018-03-30 18:22:31
    浏览器是多进程的,有一个主控进程,以及每一个tab页面都会新开一个进程(某些情况下多个tab会合并进程)。进程可能包括主控进程,插件进程,GPU,tab页(浏览器内核)等等。Browser进程:浏览器的主进程(负责...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 289,539
精华内容 115,815
关键字:

浏览器运行机制

友情链接: python.zip