浏览器运行原理:网页被解析过程、script元素和页面解析的关系、defer和async使用;V8引擎执行原理(执行js)

一、浏览器渲染页面的流程

1.如何找到服务器

2.找到服务器如何下载对应的静态资源

 输入完服务器地址,下载下来的一般是html文件,在解析html文件过程中,遇到link引用了css文件,就下载对应的css文件,js文件同理

3.一个index.html文件被下载下来后,如何被解析和显示在浏览器上的

 

 

 

 1.解析html,会构建对应的DOM Tree
 2.css下载解析

 

 3.DOM Tree、CSS Tree构建Render Tree

4. 布局和绘制:确定呈现树中所有节点的宽度、高度、位置信息,将每个节点绘制到屏幕上

 

 

 5.回流和重绘

回流需要重新布局layout,消耗性能比较大

重绘只是重新绘制,没有改变布局,消耗性能相对小

 

 6.特殊解析-composite合成

 

 4.script元素和页面解析的关系

 5.defer和async使用

  • defer会在DOMTree构建完成,回调DOMConetntLoader事件之前,先执行完defer中代码;多个脚本时也会按照顺序下载执行
  • async:下载完脚本立即执行,不管DOM构没构建完;多个脚本不会按照顺序,不会等待其他脚本

 二、V8引擎执行原理

 

 

 

 v8引擎会搜集你的运行信息,看哪些函数经常运行,经常使用的函数,可被存为优化的机器码,后面直接运行机器码,不需要对字节码做翻译,

如果传入类型不一样了,他就会将机器码重新转换成字节码,后如果多次执行,又生成优化的机器码,所以ts在某种成度上可以提高对应js代码性能

所以,代码中尽量函数中传入的类型是一致的

 

 

 

 

 

 ;

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA 学习之 命令行太长问题

现象 Error running App Command line is too long. In order to reduce its length classpath file can be used. Would you like to enable classpath file mode for all run configurations of your project?解决办法 办法一 .idea\workspace.xml ——> <compone…

关于IDEA创建Maven一直爆红无法下载的问题

你能看到这我就知道你肯定已经试过了网上的很多方法了&#xff0c;我之前也是&#xff0c;试过了很多一直无法正常下载&#xff0c;我也是找人给 线下看了看解决了&#xff0c;我总结一下从头到尾排除问题&#xff0c;试到最后要是还解决不了你直接私信我&#xff0c;我给你看看…

【并发程序设计】15.信号灯(信号量)

15.信号灯(信号量) Linux中的信号灯即信号量是一种用于进程间同步或互斥的机制&#xff0c;它主要用于控制对共享资源的访问。 在Linux系统中&#xff0c;信号灯作为一种进程间通信&#xff08;IPC&#xff09;的方式&#xff0c;与其他如管道、FIFO或共享内存等IPC方式不同&…

Python保存为json中文Unicode乱码解决json.dump()

保存为json中文Unicode乱码&#xff1a; 可以看到&#xff0c;中文字符没有乱码&#xff0c;只是出现了反斜杠&#xff0c;此时解决方法应考虑是否进行了二次序列化。 一、原因1 在dump时加入ensure_asciiFalse 即可解决&#xff0c;即json.dump(json_data, f, indent4, en…

【Spring-01】BeanFactory和ApplicationContext

【Spring-01】BeanFactory和ApplicationContext 1. 容器接口1.1 什么是 BeanFactory1.2 BeanFactory 能做什么&#xff1f; 1. 容器接口 以 SpringBoot 的启动类为例&#xff1a; /*** BeanFactory 与 ApplicationContext的区别*/ SpringBootApplication public class Spring…

【自动驾驶】针对低速无人车的线控底盘技术

目录 术语定义 一般要求 操纵装置 防护等级 识别代号 技术要求 通过性要求 直线行驶稳定性 环境适应性要求 功能安全要求 信息安全要求 故障处理要求 通信接口 在线升级(OTA) 线控驱动 动力性能 驱动控制响应能力 线控制动 行车制动 制动响应能力 线控转向 总体要求 线控…

STM32作业实现(五)温湿度传感器dht11

目录 STM32作业设计 STM32作业实现(一)串口通信 STM32作业实现(二)串口控制led STM32作业实现(三)串口控制有源蜂鸣器 STM32作业实现(四)光敏传感器 STM32作业实现(五)温湿度传感器dht11 STM32作业实现(六)闪存保存数据 STM32作业实现(七)OLED显示数据 STM32作业实现(八)触摸按…

UML静态图-类图

概述 静态图包含类图、对象图和包图的主要目的是在系统详细设计阶段&#xff0c;帮助系统设计人员以一种可视化的方式来理解系统的内部结构和代码结构&#xff0c;包括类的细节、类的属性和操作、类的依赖关系和调用关系、类的包和包的依赖关系。 一、类图的表示法 类图(Cla…

2024系统架构师软考考题考点回忆版

2024年5月25日系统架构师软考试题/考点梳理 选择题 (75道单选题) 软件测试(P205) 静态测试:是被测程序不运行,只依靠分析和检查源程序的语句、结构、过程来检查程序是否有错误。动态测试:运行被测试程序,对得到的结果与预期的结果进行比较分析,同时分析运行效率和健壮…

(1) 初识QT5

文章目录 Qt Quickdemo信号的命名方式 qml语言一个很重要的概念 qt 模块 Qt Quick Qt Quick是Qt5中⽤户界⾯技术的涵盖。Qt Quick⾃⾝包含了以下⼏种技术&#xff1a; QML-使⽤于⽤户界⾯的标识语⾔JavaScript-动态脚本语⾔Qt C具有⾼度可移植性的C库. 类似HTML语⾔&#xf…

Docker(Centos7+)

先确定是否 Centos 7 及以上的版本 查看是否 ping 通外网 linux centos7运行下面的代码&#xff0c;基本上都可以正常安装 # 删除之前的docker残留 yum -y remove docker*yum install -y yum-utilsyum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/…

Docker最新超详细版教程通俗易懂

文章目录 一、Docker 概述1. Docker 为什么出现2. Docker 的历史3. Docker 能做什么 二、Docker 安装1. Docker 的基本组成2. 安装 Docker3. 阿里云镜像加速4. 回顾 hello-world 流程5. 底层原理 三、Docker 的常用命令1. 帮助命令2. 镜像命令dokcer imagesdocker searchdocker…

反向配置教程

注意&#xff0c;Openai、Gemini、claude和pika接口在国内直连不通&#xff0c;都需要配置反向 一、配置openai反向 1、在海外宝塔添加反向 将海外宝塔升级到最新 在海外宝塔添加一个新站点&#xff08;可以解析一个域名来用&#xff0c;也可以用ip端口形式&#xff09; 打开…

全国水系数据(更新到2024年5月)

上海市水系数据地图可视化 水系数据线图层&#xff08;小河/溪流、江/河、运河、下水道/排水管&#xff09; 水系数据面数据&#xff08;水域、水库、河岸、湿地&#xff09; 水系数据字段说明 可视化预览 北京市水系可视化 上海市水系可视化 广州市水系可视化 深圳市水系可视化…

部署Envoy

Envoy常用术语 envoy文档官网 Life of a Request — envoy 1.31.0-dev-e543e1 documentationhttps://www.envoyproxy.io/docs/envoy/latest/intro/life_of_a_request#terminology 基础总结 &#xff08;1&#xff09;Envoy Envoy自己本身是工作在L7层的一个proxy&#xff…

如何让大模型更聪明?

【导读】 6月20日下午&#xff0c;163期文汇讲堂“数字强国”系列启动&#xff0c;首期《AIGC驱动生产力跃升与良好世界塑造》&#xff0c;在涌动着毕业季青春气息的华东师大樱桃河畔成功举办。北京智源人工智能研究院副院长兼总工程师林咏华应邀作主讲&#xff0c;华东师大学者…

Whisper-AT:抗噪语音识别模型(Whisper)实现通用音频事件标记(Audio Tagger)

本文介绍一个统一音频标记&#xff08;Audio Tagger&#xff09;和语音识别&#xff08;ASR&#xff09;的模型&#xff1a;Whisper-AT&#xff0c;通过冻结Whisper的主干&#xff0c;并在其之上训练一个轻量级的音频标记模型。Whisper-AT在额外计算成本不到1%的情况下&#xf…

第三届大湾区算力大会丨暴雨开启数字未来新篇

5月30-31日&#xff0c;韶关市迎来主题为“算启新篇智创未来”的第三届粤港澳大湾区(广东)算力产业大会暨第二届中国算力网大会&#xff0c;活动由广东省人民政府主办&#xff0c;广东省政数局、韶关市人民政府共同承办。暴雨信息作为算力产业发展的重要构建者受邀赴会&#xf…

vue-2

vue-cli的安装 vue-cli是一个脚手架工具&#xff0c;它集成了诸多前端技术&#xff0c;包括但不仅限于&#xff1a; webpack、 babel、eslint、http-proxy-middleware、typescript、css pre-prosessor、css module、… 这些工具&#xff0c;他们大部分都要依赖两个东西&…

用例篇03

正交表 因素&#xff1a;存在的条件 水平&#xff1a;因素的取值 最简单的正交表&#xff1a;L4(2) 应用 allpairs 来实现正交表。 步骤&#xff1a; 1.根据需求找出因素和水平 2.将因素和水平写入到excel表格中&#xff08;表格不需要保存&#xff09;&#xff08;推荐用…