原因： 页面切换时RecyclerView获得了焦点，RecyclerView的 focusableOnTouchMode属性默认是true，所以页面切换时RecyclerView自动获得焦点就滚动到头部
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/112656.html原文链接：https://javaforall.cn
；加载就是获取资源的过程；如果在加载过程中遇到外部的css文件和图片，浏览器会另外发送一个请求，去获取css文件和图片，这个请求是异步的，并不会影响HTML文件的加载；但如果遇到JavaScript文件...） 当渲染引擎接收到CSS文本时，会执行一个转换操作，将CSS文本转换为浏览器可以理解的结构——styleSheets。...面试问题：CSS加载会阻塞页面显示吗？...每个页面至少需要一次回流，就是在页面第一次加载的时候。 在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。...当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。就叫称为重绘。
） 当渲染引擎接收到CSS文本时，会执行一个转换操作，将CSS文本转换为浏览器可以理解的结构——styleSheets。...image 布局阶段 布局：计算出DOM树中可见元素的几何位置，第一创建布局树（构建一棵只包含可见元素布局树），第二布局计算。 面试问题：CSS加载会阻塞页面显示吗？...css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行 so，为了避免让用户看到长时间的白屏时间，应该提高css的加载速度。...每个页面至少需要一次回流，就是在页面第一次加载的时候。 在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。...当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。就叫称为重绘。
iframe 通常用于在当前页面中加载另一个页面，例如嵌入地图、视频、广告等。...这意味着，在iframe内的元素样式不会受到主文档样式的影响，也不会影响到主文档的样式。直接修改原始 HTML 文件时，所有的样式都处于同一个样式表中，可能会导致样式冲突或不必要的覆盖。...本文由“壹伴编辑器”提供技术支持 优点: 解决加载缓慢的第三方内容如图标和广告等的加载问题 Security sandbox 并行加载脚本 ---- 缺点： iframe会阻塞主页面的Onload事件...这也是为什么建议把 js 脚本放在底部而不是头部的原因。 5.行内元素和块级元素的区别？ 行内元素：不会独立出现在一行，单独使用的时候后面不会有换行符的元素。...块元素转换成行内元素，只要将其display属性设置为inline即可，display:inline;。
当页面被载入时，Google 会抓取页面中最大元素的载入时间作为 LCP，而且 LCP 会随着载入的内容越来越多而改变，直到页面完全载入后，最大元素即被确定为「真正的」LCP。...修复字体文件以提高 Lighthouse 分数 为什么字体会影响你的灯塔分数？这是因为它们的使用方式不仅会影响页面速度（不同的字体有不同的大小），而且会对查看者在不查看页面时的查看方式产生深远影响。...脚本 脚本也会影响应用的性能——尤其是当它们在不需要的地方出现瓶颈或占用宝贵的加载时间时。处理这方面的方法： 异步加载。...CLS 每当可见元素将其位置从一个渲染帧更改为下一帧时，就会发生布局转换。...Next/Image 组件，它将通过转换为 webp、调整大小、延迟加载和预加载 API 为我们优化图像。 8.
页面加载过程 在介绍浏览器渲染过程之前，我们简明扼要介绍下页面的加载过程，有助于更好理解后续渲染过程。...浏览器渲染过程大体分为如下三部分： 1）浏览器会解析三个东西： 一是HTML/SVG/XHTML，HTML字符串描述了一个页面的结构，浏览器会把HTML结构字符串解析转换DOM树形结构。 ?...这里重要要说两个概念，一个是Reflow，另一个是Repaint 重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式...回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来...重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。
在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。...('2')的值会进入失败的函数。...假如对比 x 和 y 是否相同，就会进行如下判断流程：首先会判断两者类型是否相同，相同的话就比较两者的大小；类型不相同的话，就会进行类型转换；会先判断是否在对比 null 和 undefined，是的话就会返回...官方对clear属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。...，这就是借助伪元素清除浮动影响时需要设置display属性值的原因。
回流（Reflow）触发条件 添加或删除DOM元素：当文档中添加新的可见元素或删除已存在的元素时，可能会导致周围元素或整体布局的变化，从而触发回流。...其他策略 懒加载图像和资源：只在需要时加载图片和脚本，减轻首次加载负担。 代码拆分与按需加载：通过webpack等工具将代码分割成小块，用户只需加载当前页面所需的代码。...使用will-change属性：提前告知浏览器哪些属性可能会变化，帮助浏览器优化渲染流程。 为什么说回流一定会引起重绘，而重绘不一定引起回流？...通过减少不必要的回流和重绘，我们能够显著提升页面的加载速度和交互响应，为用户提供更加流畅的浏览体验。 重绘是指当元素的外观发生变化但不影响布局时（例如颜色改变），浏览器重新绘制该元素的行为。...回流则更为消耗资源，它发生在元素的位置、大小或其他影响布局的属性发生改变时，导致浏览器重新计算布局并重新绘制受影响的部分乃至整个页面。
我们首先带着这 8 个问题,来了解浏览器渲染过程,后面会给出题解~ 为什么 Javascript 要是单线程的 ? 为什么 JS 阻塞页面加载 ?...为什么 JS 阻塞页面加载 ?...因此如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。 3. css 加载会造成阻塞吗 ？...减少关键 CSS 元素数量 当我们声明样式表时,请密切关注媒体查询的类型,它们极大地影响了 CRP 的性能 。 3....性能影响 回流比重绘的代价要更高。 有时即使仅仅回流一个单一的元素,它的父元素以及任何跟随它的元素也会产生回流。
Paint 最后一步是将像素绘制在屏幕上，栅格化所有元素，将元素转换为实际像素。 一旦渲染树创建并且布局完成，像素就可以被绘制在屏幕上。加载时，整个屏幕被绘制出来。...重排(Reflow)：元素的 位置发生变动 时发生重排，也叫回流。此时在 Layout 阶段，计算每一个元素在设备视口内的确切位置和大小。...这也是为什么 JavaScript 的加载、解析与执行会阻塞 DOM 的构建，阻塞页面的渲染。...这就是为什么我们需要把 js 放在页面底部的原因，尽量保证 DOM 树生成完毕再去加载 JS，从而出现这样的效果。...，页面加载时先快速生成一个 DOM 树 正确的性能优化思路 再啰嗦一下性能优化相关的，当你遇到一个性能问题的时候，绝对不是去网上找一些性能优化的方法，然后不管三七二十一，就整上去，这样大概率是没啥用的。
，当使用该插件时才创建 GPU进程 该进程也只有一个，用于3D/动画绘制等等 渲染进程(重) 即通常所说的浏览器内核(Renderer进程，内部是多线程) 每个Tab页面都有一个渲染进程，互不影响 主要作用为页面渲染...，脚本执行，事件处理等 为什么浏览器要多进程 我们假设浏览器是单进程，那么某个Tab页崩溃了，就影响了整个浏览器，体验有多差 同理如果插件崩溃了也会影响整个浏览器 当然多进程还有其它的诸多优势，不过多阐述...，页面就会重绘(Repaint) 当我们修改元素的尺寸，页面就会回流(Reflow) 当页面需要Repaing和Reflow时GUI线程执行，绘制页面 回流(Reflow)比重绘(Repaint)的成本要高...JS 文件，由于 JS 阻塞，会推迟页面的首绘，所以为了加快页面渲染，一般将 JS 文件放到HTML 底部进行加载，或是对 JS 文件执行 async 或 defer 加载 async 是异步执行，异步下载完毕后就会执行...，否则由于资源消耗过度，页面反而会变的更卡，因小失大 GPU中，各个复合图层是单独绘制的，所以也互不影响，通过 硬件加速 的方式，会声明一个 新的复合图层 ，它会单独分配资源，当然也会脱离普通文档流，这样一来
渲染流水线影响首次页面展示的速度，首次页面展示速度会直接影响用户体验。...分层和合成 通常页面组成是非常复杂的，如果没有分层机制，会“牵一发而动全身”严重影响页面渲染效率。...是不会影响到主线程执行的（这也是为什么主线程卡主时，CSS 动画依然能执行的原因） 分块 分层从宏观上提升了渲染效率，分块则是从微观层面提升了渲染效率。...此时，可以使用 will-change 来告知渲染引擎会对该元素进行一些变换，渲染引擎会将该元素单独实现一帧，等这些变换发生时，渲染引擎会通过合成线程去直接处理变换，这些变换不会涉及到主线程，所以效率会提高...页面性能 主要关于如何让页面更快地显示和响应，一个页面通常分为三个阶段： 加载阶段：发出请求到渲染出完整页面的过程，影响因素有网络和 JavaScript 脚本 交互阶段：页面加载完成到用户交互的整个过程
在BFC中上下相邻的两个容器的margin会重叠 计算BFC的高度时，需要计算浮动元素的高度 BFC区域不会与浮动的容器发生重叠 BFC是独立的容器，容器内部元素不会影响外部元素 每个元素的左margin...title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响 i内容展示为斜体，em表示强调的文本 懒加载的实现原理 图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源...方法1：当页面的元素数小于x时，则认为页面白屏。比如“没有任何内容”，可以获取页面的DOM节点数，判断DOM节点数少于某个阈值X，则认为白屏。 方法2：当页面出现业务定义的错误码时，则认为是白屏。...方法3：当页面出现业务定义的特征值时，则认为是白屏。比如“数据加载中”。 浏览器乱码的原因是什么？如何解决？...z-index属性在下列情况下会失效： 父元素position为relative时，子元素的z-index失效。
JavaScript是如何影响DOM生成的 一段HTML文件，如果加入了script标签(内有脚本内容)，在解析到此script标签时，此时的HTML解析器会暂停DOM的解析，因为接下来JavaScript...23 ｜ 渲染流水线：CSS如何影响首次加载时的白屏时间？...利用分层技术优化代码 当对一些元素进行几何形状变换、透明度变换、缩放等操作时，使用JS操作会牵扯到整个渲染流水线，而使用CSS则只会经过合成线程的合成阶段，效率要大很多。...加载阶段 加载阶段也就是资源下载整合的阶段，这些资源包括图片、音频、视频等不会影响阻塞页面首次加载的资源，以及JS、CSS、HTML等阻塞首次渲染的资源。...影子DOM 影子DOM的作用主要有两类： 影子DOM的元素对于整个网页是不可见的。 影子DOM的CSS不会影响到整个网页的CSSOM，影子内部的CSS只对内部元素起作用。
02 HTSM与2W1H对比 理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值...05 测试第一步：【项目环境】 理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值...图5.HTSM【项目环境】的具体内容 06 测试第二步：【产品元素】 理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构...配置：系统的哪些部分会受到安装的影响？⽂件和资源存储在哪里？ 卸载：产品卸载时，是否能够清除干净？ 升级/补丁：可以轻松添加新模块或升级新版本吗？他们是否会影响现有的配置吗？...09 结束语 理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值
布局过程的输出是一个“盒子模型”，它精确地捕获视口内每个元素的确切位置和大小：所有相对测量值都转换为屏幕上的绝对像素。...*外部脚本链接的加载和执行只会影响后续 Dom 的解析和渲染，对于脚本之前的的 Dom 并不会阻塞它的解析以及渲染，这也就是为什么我们常说将 js 放在底部。...上述为页面首次加载时的 performance 面板，首先我们可以对比网络进程和主进程中，明确的可以看到当 css 文件加载完毕之后才会触发页面的 FP 时间点。...至于 Css 是否会影响 Dom 解析，当然 Cssom 的生成是在 DomTree 构建之后发生。那么外部 Css 脚本的加载是否会影响后续 Dom 元素的解析呢？...稍微总结一下 Css 所以，如果你在乎页面首次渲染时间。其实过多的关心 JS 而忽略 Css 文件恰恰会适得其反。绝大多数时候影响页面首屏渲染的时机恰恰是 css 文件在作祟。
目录 HTML、CSS相关 Javascript相关 三者的异同 Vue相关 55.Vue路由懒加载（按需加载路由） React相关 react 生命周期函数 ******为什么虚拟 dom 会提高性能...当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了） 6....为什么js是弱类型语言 弱类型语言实现相对于强类型语言来说的，在强类型语言中，变量类型有多种，比如int char float Boolean 不同类型相互转换有时需要强制转换，而jacascript...Vue单页面的优缺点 单页面spa 优点：前后端分离 用户体验好 一个字 快 内容改变不需要重新加载整个页面 缺点：不利于seo， 初次加载时耗长（浏览器一开始就要加载html css js...31.Vue组件中的data为什么是函数 Data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响 如果是引用类型（对象），当多个组件共用一个数据源时，一处数据改变，所有的组件数据都会改变
flex order使用 flex中的order属性对致力于无障碍优化的QQ空间同学来说，也很有用，例如以下这个页面： image.png 为了实现第一名居中，我们可能如上实现，但是这样不利于数据的顺序加载和无障碍阅读...，我们一般会这样实现，然而在iOS11上滚动时，fixed元素可能有短暂的消失时间 image.png 而另一种解决方案是通过flex来解决，如下图： image.png ps: 第二种方案也有缺点，...当主体内容过长时不能使用系统的原生滚动，局部滚动会让安卓系统滚动体验不太流畅（iOS系统支持用-webkit-overflow-scrolling: touch;开启弹性滚动）。...用display:inline-flex解决display:inline-block空格问题 很多时候我们需要在同一行显示多个元素，如果在代码中这些换行了，html解析时会把这些换行转换为一个空格，于是乎显示可能是这样...因为很多时候需要父级的宽度受子元素的宽度影响而不是更上一层的父级影响，而内联flex可以做到。
如果 “预加载扫描” 发现有类似 或 这样的标签时，会由 HTML 解析器对该资源生成一个 Tokens，然后在浏览器进程中，通过网络或者本地缓存来加载资源。...计算页面布局是一个很复杂的工作，即使最简单的从上到下的块流结构，也必须考虑字体的大小以及如何划分每一块，因为它们会影响当前段落的大小和形状，然后影响下一块所在的位置。...如果用户滚动页面，则移动光栅帧，并通过更多光栅元素填充缺少的部分。 这就是 Chrome 首次发布时处理光栅化的方式，但是，现代浏览器运行一个更复杂的被称为合成（Compositing）的进程。...合成器线程会光栅化每个图层，一个图层可能想一个完整的页面那么大，因此合成器线程将他们分成图块，并将每个图块发送到光栅线程。光栅线程格式化每个元素，并将他们存储在 GPU 内存中。...合成（Compositor）的好处，是它可以在不影响主线程的情况下完成。合成器线程不需要等待样式计算或者 JS 脚本执行，这就是为什么 “仅合成动画” 被认为是平滑性能的最佳选择。
领取专属 10元无门槛券
手把手带您无忧上云
