笔记-前端

URL 输入到渲染的过程

域名解析,找到服务地址
构建 TCP 连接,若有 https,则多一层 TLS 握手,
特殊响应码处理 301 302
解析文档
构建 dom 树和 csscom
生成渲染树:从DOM树的根节点开始遍历每个可见节点,对于每个可见的节点,找到CSSOM树中对应的规则,并应用它们,根据每个可见节点以及其对应的样式,组合生成渲染树
Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的集合信息
Painting(重绘):根据渲染树及其回流得到的集合信息,得到节点的绝对像素。
绘制,在页面上展示,这一步还涉及到绘制层级、GPU相关的知识点
加载js脚本,加载完成解析js脚本

回流(重排)与重绘

回流:浏览器中的页面是采用流式布局来绘制的,从左到右,从上到下,当其中一个节点的空间属性发生了变化,那么就会影响到其他节点的空间布局,需要重新收集节点信息,再进行绘制,而这个过程及回流的过程,页面节点重新调整排列,因此也叫重排。
重绘:我们对页面节点元素的外观做处理的过程,例如修改颜色,背景,阴影等。
回流一定重绘,但重绘不一定回流
触发回流的场景
1.添加或删除可见的DOM元素
2.元素的位置发生变化
3.元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)
4.内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代。
5.页面一开始渲染的时候(这肯定避免不了)
6.浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)
获取位置信息,因为需要回流计算最新的值

回流的优化
对树的局部甚至全局重新生成是非常耗性能的,所以要避免频繁触发回流
现代浏览器已经帮我们做了优化,采用队列存储多次的回流操作,然后批量执行,但获取布局信息例外,因为要获取到实时的数值,浏览器就必须要清空队列,立即执行回流。
编码上,避免连续多次修改,可通过合并修改,一次触发
对于大量不同的 dom 修改,可以先将其脱离文档流,比如使用绝对定位,或者 display:none ,在文档流外修改完成后再放回文档里中
通过节流和防抖控制触发频率
css3 硬件加速,transform、opacity、filters,开启后,会新建渲染层

https://segmentfault.com/a/1190000021966814
https://juejin.cn/post/6844904073737535496

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

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

相关文章

shell脚本之函数

一、1.函数:将命令序列按照固定的表达格式写在一起 2.函数作用:可以重复使用的命令序列,大的工程分割成若干个小块,依次执行,提高代码的可读性。 3.函数的两种格式 4.return作用:只能写在函数内部&#xff…

12306全球最大票务系统与Gemfire介绍

全球最大票务系统 自2019年12月12日发售春运首日车票,截至2020年1月9日,12306全渠道共发售车票4.12亿张,日均售票能力达到了2000万张,平均一年售出30亿张火车票,也就是说12306已经发展成全球交易量最大的实时票务系统…

26 红黑树

目录 1.概念 2.性质 3.节点定义 4.结构 5.插入 6.验证 7.删除 8.红黑树和avl树比较 9.应用 概念 是一种二叉搜索树,但在每个节点上增加一个存储位表示节点的颜色,可以是red或black。通过对任何一条从根到叶子的路径上各个节点着色方式的限制&#xff…

reverse-android-实战喜马拉雅-ollvm

资料 1. apk: com.ximalaya.ting.android.apk. 2020年8月 可以使用 2. 抓包分析 java层分析 so层分析 登录的算法so是在 liblogin_encrypt.so中。 32位的, 用 IDA打开,查看 静态的导出函数。 打开 一个 首先看到 IDA VIEW 是一个横向 比较多的分支&am…

2-9 基于matlab的传递矩阵计算轴的模态

基于matlab的传递矩阵计算轴的模态,包括模态频率和模态振型,可设置轴的结构参数。程序已调通,可直接运行。 2-9 传递矩阵计算轴的模态 模态频率 - 小红书 (xiaohongshu.com)

python-jupyter notebook安装教程

🌈所属专栏:【python】✨作者主页: Mr.Zwq✔️个人简介:一个正在努力学技术的Python领域创作者,擅长爬虫,逆向,全栈方向,专注基础和实战分享,欢迎咨询! 您的…

Jmeter 逻辑控制之IF条件控制器

🍅 视频学习:文末有免费的配套视频可观看 🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 测试环境 JMeter-5.4.1 循环控制器介绍 添加While Controller 右键线程组->添加->逻辑…

批量生产千万级数据 推送到kafka代码

1、批量规则生成代码 1、随机IP生成代码 2、指定时间范围内随机日期生成代码 3、随机中文名生成代码。 package com.wfg.flink.connector.utils;import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; import java.util.ArrayList; impo…

个人关于Vue2组成的见解

前言 Vue.js 是一个用于构建用户界面的渐进式框架,它从核心逐渐扩展,提供了一套丰富的功能来构建复杂的单页应用。Vue 2 是该框架的第二个主要版本,引入了许多改进和新特性。 组成部分及解析 模板(Template) 模板是…

简易计算器需求报告

1. (简易计算器) 需求说明书 文件编号:2022[1] [木柚2] 06[3] [木柚4] 01[5] [木柚6] 完成日期:2024年 06月18日 编制: 易正阳 日期:2024年6月18日 审核:张正 日期:2024年6月18…

Vue微前端架构与Qiankun实践理论指南

title: Vue微前端架构与Qiankun实践理论指南 date: 2024/6/15 updated: 2024/6/15 author: cmdragon excerpt: 这篇文章介绍了微前端架构概念,聚焦于如何在Vue.js项目中应用Qiankun框架实现模块化和组件化,以达到高效开发和维护的目的。讨论了Qiankun…

有哪些技术可代替docker?

Docker是用于创建和管理容器化应用程序的流行平台,但市场上也存在多种Docker的替代方案。 前言 国内使用Docker的困难现象,无疑是一个值得深入剖析和批判的问题。Docker作为一种容器化技术,以其轻量级、可移植性和高效性在全球范围内得到了广…

软件测试面试题:性能测试关注哪些指标?

问题 在工作中,使用JMeter做压力测试时,需要关注其中的哪些指标? 性能测试关注哪些指标? 考察点 面试官想了解: 是否用过 JMeter 指标进行分析 技术点 涉及的技术点: JMeter 结果分析 回答 性能指…

gitblit git pycharm 新建版本库及push备忘

在终端l中输入ssh,如果有消息弹出说明安装成功。 // 在任意路径打开GIT BASH,执行以下命令,期间所有询问可以直接Enter跳过 ssh-keygen -t rsa -C "注册Gitlab的邮箱" “”之内可以任何文字,备注提示作用。 设置用户名和邮箱 已经设置的可以检查一下。 #设置用…

SpringBoot配置第三方专业缓存框架j2cache

j2cache的使用 这不是一个缓存 这是一个缓存框架 J2Cache, 也称为Java Cache或JSR-107,是一个用于缓存管理的标准API,它允许开发者在Java应用程序中实现分布式、基于内存的缓存。J2Cache主要通过javax.cache.Cache接口提供功能,用于存储和…

RoaringBitMap处理海量数据内存diff

一、背景 假设mysql库中有一张近千万的客户信息表(未分表),其中有客户性别,等级(10个等级),参与某某活动等字段 1、如果要通过等级性别其他条件(离散度也低)筛选出客户,如何处理查询? 2、参与活动是记录活动ID&#…

了解Nest.js

一直做前端开发,都会有成为全栈工程师的想法,而 Nest 就是一个很好的途径,它是 Node 最流行的企业级开发框架,提供了 IOC、AOP、微服务等架构特性。接下来就让我们一起来学习Nest.js Nest.js官网地址 一,了解Nest Cli …

充电学习—6、电量计FuelGauge

电量计功能: 检测电池 计量电量 电量计首要工作: 计算电池的剩余容量、充满时容量、电量百分比 电量百分比 剩余容量 / 充满时容量 * 100% SOC RM / FCC * 100% 典型的一个电池包框架: 包含电芯、电量计IC、保护IC、充放电MOSFET、保险丝…

【做一道算一道】零钱兑换

零钱兑换 给你一个整数数组 coins ,表示不同面额的硬币;以及一个整数 amount ,表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额,返回 -1 。 你可以认为每种硬币的数量是无…

栈帧浅析,堆栈漏洞概述——【太原理工大学软件安全期末补充】

在上一篇文章中我说实验一不重要,确实没必要完全按照实验内容逐字逐句理解,但是这里我们补充一个知识点 栈帧(Stack Frame)是计算机程序执行过程中,调用栈(Call Stack)中的一个单元,…