东风地区网站建设价格,搜索引擎优化课程总结,人与马做网站,电商网站的二级怎么做嘿#xff0c;老哥#xff0c;来了就别跑 #xff01;学完 #xff0c;不亏 #x1f602; 文章目录 一、输入url 之后做了什么二、简单了解下浏览器内核三、浏览器渲染过程 #xff08;渲染引擎#xff09;四、js 引擎五、chrome五、v8 引擎原理八、浏览器性能优化九、前… 嘿老哥来了就别跑 学完 不亏 文章目录 一、输入url 之后做了什么二、简单了解下浏览器内核三、浏览器渲染过程 渲染引擎四、js 引擎五、chrome五、v8 引擎原理八、浏览器性能优化九、前端性能优化关于浏览器的周边知识 (以下)一、 浏览器 Chrome二、 进程三、协议四、浏览器渲染 一、输入url 之后做了什么 我们再用百度都上网的时候假设我们在地址栏输入我们想去的网址然后就得到了我们想要的网站输入url 之后做了什么呢就可以执行到我们想要的目的 是这样我们在输入 url 之后浏览器会通过 DNS 进行解析得到对应的 ip 地址换句话来说得到对应的服务器地址。这时服务器会返回一个 index.html一般情况下或者main.index等浏览器会根据这个入口文件解析这个html当我们遇到css文件就会下载css 文件遇到srcipt 文件 就会下载script 文件。把所有文件下载完毕之后浏览器内核再去解析文件 这是第一次读取当我们第二次读取时域名解析的 ip 会存在本地浏览器可以直接读取浏览器缓存
二、简单了解下浏览器内核 浏览器可以分为两部分渲染引擎 和 js引擎 , 渲染引擎 决定了浏览器该如何显示网页内容及页面的格式信息渲染引擎是浏览器兼容性问题出现的根本原因js 引擎 用来解释网页语法并渲染到网页上。 由于 js引擎 越来越独立浏览器内核偏向指向于 渲染引擎 渲染引擎 负责HTML解析、布局、渲染等相关的工作JS引擎: 是一个专门处理JavaScript脚本的虚拟机一般会附带在网页浏览器之中。 不同浏览器是有不同内核组成的 Gecko早期被 Netscape 和 Mozilla Firefox 浏览器浏览器使用Trident由微软开发被IE4~IE11浏览器使用但是 Edge 浏览器已经转向 BlinkWebkit苹果基于KHTML开发、开源的用于 SafariGoogle Chrome在之前也在使用Blink由Google 在KHTML 基础上开发的是Webkit的一个分支目前应用于Google Chrome、Edge、Opera等…
三、浏览器渲染过程 渲染引擎 刚刚我们说到各种文件下载下来之后再由浏览器引擎进行解析根据上附图我们来看下渲染过程
我们都知道啊index.html 是第一个被下载的html 里面无非就是一些标签这时就会通过我们的浏览器内核 parser 会将我们的html 解析成一个 Dom Tree在解析dom 过程中如果遇到 javaScript 标签会停止解析html , 而去加载执行js 代码因为js 会对dom 进行一些操作的比如新增一个节点。 我们都知道js 是一个高级语言cpu 是不认识的那这就要用 js引擎 来执行 同样的道理浏览器内核 parser 解析我们的css 因为style 有很多规则color display 等等这些规则会应用到dom树上通过html 和 css的结合就会生成一个渲染树layout 是布局引擎比如在设置了定位之后布局引擎会根据浏览器页面大小进行处理这时再生成新的渲染树最后我们浏览器内核再进行绘制进行展示
四、js 引擎 我们都知道 js 是一个高级语言cpu 是不认识的 js 引擎 用来执行 js 代码 为啥 高级的编程语言都是需要转成最终的机器指令来执行的事实上我们编写的JavaScript无论你交给浏览器或者Node执行最后都是需要被CPU执行的但是CPU只认识自己的指令集 (实际上是机器语言)才能被CPU所执行所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行
JavaScript引擎
SpiderMonkey第一款JavaScript引擎由Brendan Eich开发也就是JavaScript作者Chakra微软开发用于IT浏览器JavaScriptCoreWebKit中的JavaScript引擎Apple公司开发V8Google开发的强大JavaScript引擎也帮助Chrome从众多浏览器中脱颖而出等等… 五、chrome 十年前你说浏览器就是IE , 有人会出来反对 现在你说浏览器是Chrome 最多有人纠正你 那 chrome 浏览器 为什么能占据 60% 的市场呢 “基于多进程模型” 和 “V8 的高效快速”还有 关于遵循的开源协议 关于进程 可以看看我在最下面写的 关于浏览器的周边知识 (以下) 五、v8 引擎原理 我们来看一下官方对V8引擎的定义
V8是用 C 编写的Google 开源高性能 JavaScript 和 WebAssembly引擎它用于 Chrome 和 Node.js 等。它实现 ECMAScript 和 WebAssembly并在 Windows 7 或更高版本macOS 10.12 和使用 x64IA-32 ARM 或 MIPS 处理器的 Linux 系统上运行。V8 可以独立运行也可以嵌入到任何 C 应用程序中
(看的懂看 看不懂没关系接着看) 先不要慌稳住老哥别怕不难 我们都知道cpu 是执行我们的指令的而高级语言是不能直接被 cpu 执行的需要转化为低级语言才行所以我们需要借助 js 引擎帮助我们把高级语言 翻译 为低级语言 现在把你卡姿兰的大眼睛瞄到上个图红色框框的就是v8 引擎做的事v8 引擎 是目前性能最高的 js 引擎先不用在意看不懂这件事接着往下走
假设我这有一坨代码 const name ‘haha’ 看图 parse 是解析它包括 词法分析 和 语法分析 词法分析 生成一个数组 tokens: [ ]用来存放每个词的信息 对每个词进行分割 tokens: [ { type: ‘keyword’ , value:‘const’ } , { type: ‘indentifier’ , value:name }] 会进行判断比如 const , 会先定义他的类型是一个关键字keyword并且它的值为 const 包括等号分号都会进行分析 好处: 我们把这些划分为一个个小对象这样很容易进行语法分析 … 语法分析 AST 抽象语法树 根据语法分析之后我们进行语法分析会生成一个 AST 抽象语法树 比如 ts 转化为 js ts —— 通过ast 生成一个新的 ast —— 改变之后生成新的代码 generate code —— js代码 好处: 因为他是一个树形有些属性值是固定的这样我们很容易转成 es5代码、es6代码、字节码…非常好操作这个操作是由 ignation 执行的可以把 ignition 当成一个解释器 通过 ignition 我们可以转化为字节码字节码也要经过处理变成汇编指令再得到结果转化为字节码的好处就是可以跨平台 ( 往下看ps ) v8 引擎之所以性能这么高是因为他还有个库trunboFan 用来收集信息比如类型信息。对于执行频率高的函数的就保留 可以看下这个就是一个模拟 AST 抽象语法树 https://astexplorer.net/ 总结
Parse 模块 会将 JavaScript 代码转换成 AST抽象语法树这是因为解释器并不直接认JavaScript代码如果函数没有被调用那么是不会被转换成AST的
Ignition 是一个解释器会将 AST 转换成 ByteCode字节码同时会收集 TurboFan 优化所需要的信息比如函数参数的类型信息有了类型才能进行真实的运算如果函数只调用一次Ignition 会执行解释执行 ByteCode
TurboFan 是一个编译器可以将字节码编译为CPU可以直接执行的机器码如果一个函数被多次调用那么就会被标记为热点函数那么就会经过 TurboFan 转换成优化的机器码提高代码的执行性能 但是机器码实际上也会被还原为ByteCode这是因为如果后续执行函数的过程中类型发生了变化 比如 sum 函数原来执行的是 number 类型后来执行变成了 string 类型之前优化的机器码并不能正确的处理运算就会逆向的转换成字节码
ps : 我们都知道 AST 抽象语法树操作方便为什么不直接转为机器码呢是这样的因为我们 js 代码可能跑在window系统的浏览器里可能跑在iso 系统的浏览器可能跑在linux 系统上的浏览器上面…跑的环境不一样就会拥有不同的 cpu , 不同 cpu 又有着不一样的架构执行的机器指令是不一样的所以 字节码的好处就是可以跨平台
备注
机器码机器码就是cpu能够直接读取并运行的代码用二进制编码表示也叫做机器指令码。字节码字节码是一种中间状态的二进制代码是由源码编译过来的可读性没有源码高。而且cpu也不能够直接读取字节码在java中字节码需要经过JVM虚拟机转译成机器码之后cpu才能够读取并运行采用字节码的好处比如java语言通过字节码的方式在一定程度在解决了传统解释型语言执行效率低的问题同时又保留了解释型语言可移植的特点。所以java程序运行时比较高效而且由于字节码并不专对于一种特定的机器因此java程序无需重新编译便可以在多种不同的计算机上运行什么是字节码文件 字节码文件是经过编译器预处理过的一种文件是JAVA执行文件的存在形式。 它本身是二进制文件但是不可以被系统直接执行而是需要虚拟机JVM解释执行。由于被预处理过所以比一般的解释代码要快但是仍然会比系统直接执行的慢
代码执行过程可以看下我写的文章 02
八、浏览器性能优化 加载时
减少http请求 精灵图文件的合并减少文件大小 资源压缩图片压缩代码压缩CDN 第三方库大文件大图SSR 服务器端渲染预渲染懒加载分包减少dom操作避免回流文档碎片一种虚拟的DOM节点存在于内存中
九、前端性能优化
缓存客户端控制的强缓存策略
降低请求成本
http dns 由客户端控制隔一段时间主动请求dns获取域名ip不走系统的dnstcp/tls 连接复用减少请求数js.css打包到htmljs控制图片异步加载或者懒加载小型图片使用精灵图减少传输体积懒加载自定义属性data-src存放真正需要显示的图片路径 告辞 v8性能高的原因 编译器优化v8引擎使用了即时编译Just-in-Time Compilation技术将JavaScript代码转换为本地机器码以提高执行速度。它包括解析、分析和优化代码的过程以便生成高效的机器码。 内存管理v8引擎使用了高效的内存管理机制如垃圾回收器Garbage Collector用于自动管理内存的分配和释放。它能够及时回收不再使用的内存避免内存泄漏和过度消耗。 即时优化v8引擎还具有即时优化功能它会在代码执行过程中动态地优化性能。例如它会根据运行时的上下文信息进行内联优化将函数调用内联到调用处避免了函数调用的开销。 多线程支持v8引擎通过使用多线程技术如并行编译和并行垃圾回收等提高了执行效率。它可以同时处理多个任务并充分利用多核处理器的计算能力 关于浏览器的周边知识 (以下) 先说两个概念互联网 internet 泛指具有互通的计算机网络因特网 Internet 是基于TCP/IP 协议族的最大的计算机网络万维网 web (word wide web) 是基于互联网由超链接和统一资源标识符连接的文件和其他资源的全球集合 万维网由三个部分构成
统一资源标识符 URI 由一个字符串来表示抽象的或者物理的资源超文本标记语言 html ( 超文本含有指向其他资源链接的文本标记语言通过一些标签包裹的元素这些标记会被浏览器识别为超链接或者文本段等)超文本传输协议 http 传输 html 的一个协议
URL 和 URI 的区别
URL 统一资源 定位 符URI 统一资源 标识 符
这样说吧 URI 是一个抽象的地址URL 是一个具体的地址 抽象的地址安徽省亳州市 具体的地址安徽省亳州市利辛县汝集镇 223号所以说 URL 是 URI 的子集再举个例子 http://www.csdn.net 是一个服务器地址但是没有具体到文件是什么类型 (URI) http://www.csdn.net/image/logo.gif 这就是一个很具体的地址 URL
一、 浏览器 Chrome 浏览器可以分为两部分渲染引擎 和 js引擎 , 渲染引擎 决定了浏览器该如何显示网页内容及页面的格式信息js 引擎 用来解释网页语法并渲染到网页上。 由于 js引擎 越来越独立浏览器内核偏向指向于 渲染引擎 渲染引擎 负责HTML解析、布局、渲染等相关的工作JS引擎: 是一个专门处理JavaScript脚本的虚拟机一般会附带在网页浏览器之中。 十年前你说浏览器就是IE , 有人会出来反对 现在你说浏览器是Chrome 最多有人纠正你 那 chrome 浏览器 为什么能占据 60% 的市场呢 基于多进程模型和 V8引擎的高效快速
关于V8引擎的原理 可以看看我 前端 js 之 浏览器工作原理 和 v8引擎 01 这篇文章。
二、 进程 进程是一个程序的运行实例当我们启动一个程序时那么操作系统会创建一块内存给代码和运行时的数据使用并且创建一个线程来处理任务。这个环境就是叫做进程 线程它是进程的 一个执行任务 或者可以叫做控制单元负责当前进程中程序的执行。一个进程至少有一个线程一个进程也可以运行多个线程。
多个线程之间可以进行数据共享进程关闭后内存会正确回收但是如果一个线程发生崩溃整个进程就会崩溃
不同进程之间的内容相互隔离进程通信需要依靠 IPC ( 进程间通讯机制 ) 在 chrome 浏览器诞生之前大多数浏览器都是单进程
单进程的所有功能模块都在同一个进程中运行的如果有一个产生问题整个进程都会跟着崩溃必须对浏览器进行重启因为页面所有的功能都在一个进程中当一个页面卡住时所有页面都会卡住所以卡也是一个问题因为所有页面都在一个进程中单个页面的数据因为代码编写问题而出现内存泄漏在关闭页面时泄露的内存并不会进行回收会导致浏览器会越用越卡插件和渲染线程拥有很高的权限。插件和渲染线程中包括各种脚本代码而这些脚本代码通常是由第三方编写的如果有恶意插件或者网站可以通过权限来读取本地数据
所以 chrome 浏览器采用 多进程架构
每个页面有单独渲染进程和插件进程每个页面的渲染进程和插件进程都放进沙箱内让他们不能获取系统权限权限问题统一交给浏览器的主线程来操作不同进程之间通过 IPC 来传输数据
浏览器是多进程的 在浏览器中每打开一个tab页面其实就是新开了一个进程在这个进程中还有ui渲染线程js引擎线程http请求线程等。 所以浏览器是一个多进程的 一个浏览器的进程 浏览器进程 负责页面的展示用户的交互管理子进程还有提供存储功能网络进程 : 下载网络资源GPU进程绘制网页和UI界面渲染引擎js引擎 和 排版引擎插件引擎 扶着加载和运行页面上的插件 三、协议
协议保证了通信双方都可以识别的一种约定的数据格式 通过计算机网络可以使多台计算机实现连接但是位于同一个网络中的计算机 在进行连接和通信时 必须要遵守一定的 规则就像比在道路中行驶的汽车要遵守交通规则。在计算机网络中这些连接和通信的规则被称为网络通信协议它对数据的传输格式、传输速率、传输步骤等做了统一规定通信双方必须同时遵守才能完成数据交互。 协议类型
互联网协议基于IP协议的一个体系架构想要进行数据的传输每个主机都要有特定的 ip 地址ip协议通过dns 进行域名解析找到对应的网址并进行缓存http 超文本传输协议规定传输包的数据格式通过tcp/ip 发送到网络中udp ,通过端口号访问指定程序但是不能保证对方确定接受到tcp传输控制协议 解决了udp 传输不可靠问题增加了重传机制tcp协议是面对连接的传输前会和目标设备进行连接传输完成后断开
http 请求流程:
我们通过URL 请求服务器服务器会返回给我们网页数据文件那之间的流程是怎样的呢 当我们发送请求时浏览器会找有没有上次请求缓存的文件如果有且文件没有过期就会直接使用不再请求减少了服务器的压力而且可以快速加载。 如果没有通过http 做应用层协议 http 协议规定传输包的数据格式通过 TCP/IP 把他们发送到发送到网络中发送之前会通过 DNS 通过域名查找到对应的服务器地址查找到以后对他们进行缓存如果输入的域名没有加端口号会默认加 80完成以后为 TCP 建立连接三次握手四次挥手就可以正式发送我们的 HTTP 接下来就是服务端接收到请求并返回数据。 四、浏览器渲染 渲染流程: 我们都知道网页的三件套 html css javascript
html 超文本标记语言由各种标签组成标签可以代表元素类型html 是网页的骨架css 层叠样式表可以赋予网页各种好看的样式排版js 给网页赋予各种逻辑让网页变得具有交互性
因为网页不能识别html , 需要通过 html 解析器转化为dom树供后续的步骤使用 网络进程加载多少数据解析器就会解析多少数据网络进程会实时把获取的数据传递给渲染进程由解析器解析 …看我正篇吧比较详细
