Lighthouse 通过捕获在浏览器中加载页面的视频并检查每个视频帧（在启用视频捕获的测试中，每秒10帧）来完成的。 LCP：显示最大内容元素所需时间。...这是因为它们的使用方式不仅会影响页面速度（不同的字体有不同的大小），而且会对查看者在不查看页面时的查看方式产生深远影响。以下是一些需要注意的事项： 自托管：避免从无法控制的外部服务加载字体文件。...但有时，我们不必使用任何花哨的东西。我们可以只插入一个空的占位符框，这将确保用户没有不愉快的体验。 图像 图像可能是最臭名昭著的页面速度的恶棍。...Lighthouse 确实建议为提供不同变体的图像。像Sharp 这样的库允许我们生成同一张图像的多种尺寸。要显示它们，我们可以使用 标签或 img srcSet 属性。 延迟加。...总是延迟加载视口之外的图像。这样，我们可以在第一次访问我们的页面时节省时间。为此，我们可以在 img 标签上使用 loading=”lazy”属性。 预加载。
你可以通过查看网络选项卡并将其筛选为仅显示图片请求来轻松观察到这一点。 当你查看网络选项卡时，你可能会注意到每个图片都附带了一个随机的ID。...我这样做的原因是，如果你在页面上多次加载相同的图片，浏览器只会下载一次，所以我为每个图片添加了一个唯一的ID，以便浏览器认为它们是不同的图片，并单独下载它们，这样你就可以在开发工具中看到懒加载的效果。...与我们之前编写的代码相比，这部分略微复杂一些，因为它需要使用 JavaScript，但仍然相当简单。我们只需要为图像添加一个事件监听器，该监听器将在图像加载完成时触发，然后我们可以淡入图像。...但如果返回值为 false，则需要为 img 元素添加一个事件监听器，该监听器在图像加载完成时触发，并调用 loaded 函数。...最后，我们将 img 元素的不透明度设置为 1，这样在图像加载完成后它将可见。 通过进行上述操作，将得到以下效果：加载模糊的占位符图像，直到完整图像加载完成后淡入显示。
Push Cache 是一种存在于会话阶段的缓存，当 session 终止时，缓存也随之释放。 不同的页面只要共享了同一个 HTTP2 连接，那么它们就可以共享同一个 Push Cache。...但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。...了解了如何计算图片大小的知识，那么对于如何优化图片，想必大家已经有 2 个思路了： 减少像素点 减少每个像素点能够显示的颜色 图片类型要点 JPEG/JPG 特点：有损压缩、体积小、加载快、不支持透明,...DOM渲染优化 先了解回流和重绘 回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响...如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。 <!
Push Cache 是一种存在于会话阶段的缓存，当 session 终止时，缓存也随之释放。 不同的页面只要共享了同一个 HTTP2 连接，那么它们就可以共享同一个 Push Cache。...但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。...DOM渲染优化 先了解回流和重绘 回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响...重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。...如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。 <!
可以通过 JS 进行访问和操作，来实现对数据的操作 <article id="article" data-columns="2" data-index-number="1"> </article...的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它指向的文件时，会并行下载资源，不会停止对当前文档的处理,所以一般建议使用 link 来加载 CSS 而不是 @import <link href...srcset 定义了允许浏览器选择的图像集，以及每个图像的大小 srcset 定义了一组媒体条件并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择 有了这些属性，浏览器会 查看设备宽度 检查 sizes... 元素通过包含零个或多个 元素和一个 元素来为不同的显示/设备场景提供图像版本。...，上述部分操作可能重复运行 重排：DOM Tree 发生结构变化时，需要重新构建 DOM 结构 重绘：DOM 节点样式改变，重新绘制 重排一定会导致重绘，重绘不一定有重排 如何减少重排 将需要多次重排的元素
ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。...当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。...如何在点击一个按钮时使用 jQuery 隐藏一个图片？ 这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。...ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。...如何在点击一个按钮时使用 jQuery 隐藏一个图片？ 这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。
3.载入class文件之后，会创建一个该该类的class对象，所有关于静态初始化的动作会被执行，所以静态初始化只在Class对象首次加载时进行一次。...所以，当我们自定义的classloader加载成功了 com.company.MyClass以后，MyClass里所有依赖的class都由这个classLoader来加载完成。...=和==，当用于基本类型时候，是比较值是否相同；当用于引用类型的时候，是比较对象是否相同，比较内存地址 13.null可以被强制类型转换成任意类型的对象，于是通过它来执行静态方法 14.如何终止一个线程...4.CopyOnWriteArrayList：ArrayList 的一个线程安全的变体，其中所有可变操作（add、set 等等）都是通过对底层数组进行一次新的复制来实现的，在CopyOnWriteArrayList...EnumSet的集合元素也是有序的，它们以枚举值在Enum类内的定义顺序来决定集合元素的顺序。
随之产生了一种比较可行的解决方案：将所有的社交图片拼在一张图上，然后通过定位的方式来索引到不同的社交图标，我们通常将这张图称为雪碧图。...这会导致虽然只发出了一个文件 HTTP 加载请求，但是由于文件体积过大、加载速度慢，而给用户带来不好的使用体验。 字体图标 接着发展出了一种字体图标的东西来解决图片索引中存在的问题。...比如说，虽然我们只在字体图标文件中定义了一个图标，但是当我们使用不同的 color 定义时，图标就会改变其颜色。...当我们用 Lighthouse 类似的工具来测试网页的性能时，就可以很容易地发现请求代码的使用率情况。如果我们采用多个字体图标集合并用的方案，那么代码实际使用率可能就会很低。...为了能够创建一个 SVG 图标集合，我们可以使用 symbol 元素来定义一个图形模板对象，然后用一个 元素实例化。symbol 元素对图形的作用是在同一文档中多次使用，添加结构和语义。
jQuery 支持不同类型的选择器，例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你可以用标签选择器来选择所有的 div 元素。...ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。...当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。...如何在点击一个按钮时使用 jQuery 隐藏一个图片？ 这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。...好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次.
这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会出现意料之外的副作用。...同时用在同一个元素上。...和 v-show 的区别相比大家都非常熟悉了； v-if 通过直接操作 DOM 的删除和添加来控制元素的显示和隐藏； v-show 是通过控制 DOM 的 display CSS熟悉来控制元素的显示和隐藏...两种格式有相同尺寸以及图像数据，他们的扩展名也是相同的，唯一的区别是二者显示的方式不同。...网络 CDN： 首先就是上面的说的 CDN 引入把，开发阶段使用本地库，通过配置 外部扩展(Externals) 打包时来排除这些依赖。
LCP 考虑哪些元素 LCP 目前并不会计算所有元素，因为这样会使这个指标变得非常复杂，它现在只关注下面的元素： 元素 元素内的元素 元素 通过 url...为了在开始时保持简单，将元素限制到这个有限的集合是有意的。随着研究的深入，将来可能会添加更多的元素。 如何计算 LCP ?...图片元素的面积计算方式稍微有点不同，因为可以通过 CSS 将图片扩大或缩小显示，也就是说，图片有两个面积：“渲染面积”与“真实面积”。在 LCP 的计算中，图片的绘制面积将获取较小的数值。...可以使用 srcset 定义图像，使浏览器可以在图像之间进行选择，以及每个图像的大小。...然后在服务器可以通过计算所有id对应值的和来获取最终结果。 ?
这可以通过将QML的Image异步(asynchronous)设置为true来完成。这样，用户界面就可以保持响应。 请注意，此属性仅对从本地文件系统读取的图像有效。...通过网络资源(例如HTTP)加载的图像始终是异步加载的。 1.3 避免调整和缩放 调整大小/缩放是QML中非常繁重的操作。使用原始大小的图像，而不是调整大小图像的大小/缩放大小。...图像在内部进行缓存和共享，因此如果多个图像元素使用相同的源，则只加载图像的一个内存。 1.5 仅在必要时启用Image的smooth属性 启用smooth属性对性能不利。...1.6 避免由多个元素组成图像 由单个图像组成的图像比由多个元素组成图像效率更高。 例如，可以使用放置在提供阴影的图像上的矩形来创建具有阴影的图像。 提供包括框架和阴影的图像效率更高。...Item作为根元素而不是Rectangle，以避免多次绘制背景: 如果你的根元素是一个Rectangle，就会绘制每个像素，甚至可能是几次。
把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分； 图片地图是把多张图片整合到一张图片中。...在search.yahoo.com中你可以看到如何在你输入内容时加载额外的页面内容。 有预期的加载：载入重新设计过的页面时使用预加载。...这可以对照有很好标记使用的类似页面。比如Yahoo!主页是一个内容非常多的页面，但是它只使用了700个元素（HTML标签）。 8....第一次访问你页面的用户就意味着进行多次的HTTP请求，但是通过使用Expires文件头就可以使这样内容具有缓存性。它避免了接下来的页面访问中不必要的HTTP请求。...不要在HTML中缩放图像 不要为了在HTML中设置长宽而使用比实际需要大的图片。
把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分； 图片地图是把多张图片整合到一张图片中。...在search.yahoo.com中你可以看到如何在你输入内容时加载额外的页面内容。 有预期的加载：载入重新设计过的页面时使用预加载。...这可以对照有很好标记使用的类似页面。比如Yahoo!主页是一个内容非常多的页面，但是它只使用了700个元素（HTML标签）。...第一次访问你页面的用户就意味着进行多次的HTTP请求，但是通过使用Expires文件头就可以使这样内容具有缓存性。它避免了接下来的页面访问中不必要的HTTP请求。...31、不要在HTML中缩放图像 不要为了在HTML中设置长宽而使用比实际需要大的图片。
然而，当你每次看同一张脸时，它看上去并没有变形，这正是恒定表征的奥秘。 将一根探针深入到V1区来看单个细胞是如何响应的，会发现任一细胞都只针对视网膜极小一部分的视觉输入做出反应，且异常活跃。...而且，V1区每个细胞也都只响应特定类型的输入模式，例如，在某个细胞的感应域内，只有看到倾斜为30度的直线才活跃，然后，随着每一次新的注视，细胞的感应域换到不同的视觉空间，活跃状态就很容易改变。...如图8(a)所示，对于4×4的二维输入到3×3的二维输出，全连接有16×9=144个权值，而采用2×2卷积的话，每个输出元素只与前面4个输入元素相连，权值只要4×9=36个，是全连接的1/4。...另外，为了进一步减少训练参数，CNN采用权值共享机制，即同一个特征图使用相同的滤波器对输入进行计算，比如这里9个输出元素都由同一个滤波器扫描输入图像得到，就只需4个参数，这是其第二个特性。...当然，只使用一个滤波器，提取的特征比较单一，一般会使用多组滤波器，学得更丰富的图像特征，这就对应了CNN的第三个特性，即多通道卷积。
Fragment的优点 Fragment加载灵活，替换方便。定制你的UI，在不同尺寸的屏幕上创建合适的UI，提高用户体验。...注意：每个片段都需要唯一标识符，重启 Activity 时，系统可使用该标识符来恢复片段（也可以使用该标识符来捕获片段，从而执行某些事务，如将其移除）。...也可使用 FragmentManager 打开一个 FragmentTransaction，通过它来执行某些事务，如添加和移除片段。...我们经常使用的一个架构就是通过 RadioGroup 切换 Fragment，每个 Fragment 就是一个功能模块。...因为通过 add 的方法添加的 Fragment，每个 Fragment 只能添加一次，因此如果要想达到切换效果需要通过 Fragment 的的 hide 和 show 方法结合者使用。
我们先来看一下ArrayList，它的底层是数组，每个数据往底层的数组中存取即可，数据不需要判断是否重复。 集合Set中的元素是无序不可重复的，那么如何确保存入的元素不重复呢？...集合Set添加某元素时，先调用hashCode()方法，定位到此元素实际存储位置，如果这个位置没有元素，说明是第一次存储；若此位置有对象存在，调用equals()进行比较，相等就舍弃此元素不存，不等则散列到其他地址...，该对象多次调用hashCode()方法，该方法必须始终如一返回同一个integer。...否则需要为这个域计算一个范式，比如当这个域的值为null的时候，那么hashCode 值为0 (7) 如果是数组，那么需要为每个元素当做单独的域来处理。...在集合中通常通过equals方法来比较对象是否相等，通过hashCode方法来解决大数据量时会发生的性能问题。
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。...5.2 精灵技术讲解 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。 ?...这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。...滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ ?
领取专属 10元无门槛券
手把手带您无忧上云
