浏览器运行原理:网页被解析过程、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代码性能

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

 

 

 

 

 

 ;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

飞书API(11):阿里云MaxCompute分区表入库

一、引入 前面入库阿里云 MaxCompute 的数据都是读取之后直接写入,保留数据最新的状态,如果我要保留历史的状态,怎么办呢?MaxCompute 表有一个分区功能,可以自行定义分区。我们可以使用 MaxCompute 表的分区功能&…

01背包变式例题

传送门——P2370 yyy2015c01 的 U 盘 题解:题目意思很好理解,就是说,当能够达到预期的U盘的最小接口(接口越大,能传递的文件越大),然后我们就需要先看题目了,有n个文件,每…

Spring 中如何控制 Bean 的加载顺序?

如果你脱口而出说添加 Order 注解或者是实现 Ordered 接口,那么恭喜,你掉坑了。 一 Order 注解和 Ordered 接口 在 Spring 框架中,Order 是一个非常实用的元注解,它位于 spring-core 包下,主要用于控制某些特定上下文…

适合技术小白学习的项目1863java在线视频网站系统 Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java在线视频网站系统 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助采用了java设计,系统具有完整的源代码和数据库,系统采用web模式,系统主要采用B/S模式开发。 开发环境为TOMCAT7.0,Myeclipse8.5开发…

简单、免费、强大的高效率截图工具神器——Snipaste(下载安装+常用快捷键教学)

一、简介 Snipaste是一款功能强大的截图和贴图工具,它允许用户快速截取屏幕上的任意区域,并将截图以浮窗形式显示在屏幕上。用户可以自由调整浮窗的位置和大小,甚至将浮窗设置为半透明,以便在查看屏幕内容时不会遮挡视线。此外&a…

golang map部分原理源码个人走读-附个人理解过程图解

近期再写map的demo时出现了下面一段报错,于是带着疑惑去看了一下源码 目的:主要想知道为啥map不让并发读写 fatal error: concurrent map read and map write 一.map的数据结构 先有个印象,后续会详细介绍 // A header for a Go map. ty…

Educational Codeforces Round 166 (Rated for Div. 2) (A~C)

A. Verify Password 思路:按照ASCLL值进行比较就行(因为字母的ASCLL本来就在数字后面),所以,只要找到前面比后面的数大就输出NO,反之YES 代码实现: #include<bits/stdc.h> using namespace std; #define N 100005 typedef long long ll; ll n, m, num, sum, t; ll a[N]…

通过f-string编写简洁高效的Python格式化输出代码

Python 3.6中引入的f-string是Python中最常用的特征之一&#xff0c;它可以让我们编写更干净、更高效和更易于维护的代码&#xff0c;我们今天就由浅入深来详细介绍使用它的一些技巧。 对齐文本 在格式化输出时&#xff0c;对齐对可读性至关重要。无论是生成报告、记录数据还是…

kibana7.17.0查看index

kibana查看index Kibana 提供了一个直观的用户界面&#xff0c;可以查看和管理 Elasticsearch 的索引。以下是如何在 Kibana 中查看 Elasticsearch 索引的步骤&#xff1a; 1. 打开 Kibana 首先&#xff0c;确保 Kibana 已经启动并可以访问。通常&#xff0c;你可以通过浏览…

开箱即用的Spring Boot 企业级开发平台【毕设项目推荐】

项目概述 基于 Spring 实现的通用权限管理平台&#xff08;RBAC模式&#xff09;。整合最新技术高效快速开发&#xff0c;前后端分离模式&#xff0c;开箱即用。 核心模块包括&#xff1a;用户、角色、职位、组织机构、菜单、字典、日志、多应用管理、文件管理、定时任务等功能…

【自己动手】自制刷题系统(php+layui应用 社区工作者题库)

现在各种证都可以考&#xff0c;网上免费刷题的APP一大堆&#xff0c;我自己也想搞一个。网上的刷题软件有的用的很舒服&#xff0c;有的体检就很不好&#xff0c;热门的考试基本都有&#xff0c;不热门的基本就很差了&#xff0c;网上也有提供自制试卷的APP&#xff0c;但都有…

弹性云服务器ECS

ECS的功能&#xff1a; 1、类型丰富。支持多规格类型、多镜像类型、多磁盘种类。 2、灵活的计费模式。支持包年包月或按需计费模式购买云服务器&#xff0c;满足不同应用场景&#xff0c;根据业务波动随时购买或释放资源。 3、数据可靠。基于分布式架构的&#xff0c;可弹性…

2024年6月2日 (周日) 叶子游戏新闻

中医百科中药: 中医百科中药是一款非常强大的中药知识科普软件&#xff0c;该应用提供500多味中草药的文献资料&#xff0c;强大的搜索功能可根据功效、特点和关键词来快速查找中药&#xff0c;而且每味中药的图片、功效、主治、炮制方法等百科知识&#xff0c;可以很好的帮助你…

Opera 浏览器与Google联手,推出由Gemini驱动的全新AI功能

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

MedSegDiff-V2: Diffusion-Based Medical Image Segmentation with Transformer 论文总结

标题&#xff1a;MedSegDiff-V2: Diffusion-Based&#xff08;基于扩散模型&#xff09;Medical Image Segmentation&#xff08;医学图像分割&#xff09;with Transformer 论文&#xff08;AAAI&#xff09;&#xff1a;https://ojs.aaai.org/index.php/AAAI/article/view/28…

2024-6-2 石群电路-21

2024-6-2&#xff0c;星期日&#xff0c;天气&#xff1a;阴&#xff0c;心情&#xff1a;晴。今天没什么特别的事情发生&#xff0c;心情还是一如既往的好&#xff0c;明天就周一啦&#xff0c;虽然我暂时不用上班&#xff0c;但是希望大家新的一周元气满满~ 今日观看了石群老…

ANAH数据集- 大模型幻觉细粒度评估工具

大型语言模型&#xff08;LLMs&#xff09;在各种自然语言处理任务中取得了显著的性能提升。然而&#xff0c;它们在回答用户问题时仍面临一个令人担忧的问题&#xff0c;即幻觉&#xff0c;它们会产生听起来合理但不符合事实或无意义的信息&#xff0c;尤其是当问题需要大量知…

MongoDB-4.2.1 之安装和使用

安装 下载安装包 我自己电脑是 Windows7 的老古董&#xff0c;所以就下载老版本的 MongoDB。 mongodb: https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2012plus-4.2.1.zip 解压安装包到指定路径 我解压到的 C 盘 C:\mongodb-4.2.1 添加环境变量 创建数据库和…

gitlab服务器迁移(亲测有效)

描述&#xff1a;最近公司迁移gitlab&#xff0c;我没有迁移过&#xff0c;经过网上查找资料最终完成迁移&#xff0c;途中也遇到挺多坑和两个问题&#xff0c;希望能帮到你。 新服务器安装gitlab 注意&#xff1a;新服务器gitlab版本也需要和旧版本一致。 首先查看原Gitlab…

渗透测试靶机----FirstLeads_1.3

渗透测试靶机----FirstLeads_1.3 启动靶机&#xff0c;扫描ip&#xff0c;平平无奇 可以看出&#xff0c;这里是存在139这个主机的&#xff0c;这就是扫描出来的靶机ip继续探测端口及其他信息 发现这里只开启了80 端口 尝试一些基本目录&#xff0c;发现存在robot.txt文件目录…