Chrome 浏览器在浏览器大战的“二战”中技压群雄，拔得头筹。现如今也是前端工程师最喜爱的浏览器，没有之一。...如果想要直接通过 Web API 来获取这些指标的话可以参考下面的获取方法： 在JavaScript中测量LCP 在JavaScript中测量FID 在JavaScript中测量CLS LCP Largest...Contentful Paint 最大内容绘制 LCP用于衡量标准报告视口内可见的最大图像或文本块的渲染时间，为了提供良好的用户体验，网站应努力在开始加载页面的前2.5 秒内进行“最大内容绘制”。...在上图中，有一个元素在一帧中占据了视口的一半。然后，在下一帧中，元素下移视口高度的 25％。...在上图中，最大视口尺寸是高度，不稳定元素已经移动了视口高度的 25％，所以距离分数是 0.25。
只有当视口宽度大于400px时，才会显示该图。我向元素添加了hidden`属性。 在CSS中，我使用hidden属性仅在所需的视口大小中显示元素。...那么，你可能会问为什么不使用display: none呢?这是个好问题。当通过其hidden属性调用图像选择器时，我们可以确定即使CSS因为某种原因没有加载，元素也会被隐藏。...请参见下图： image.png 注意，当蓝皮书被隐藏时，它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素时。...image.png 请注意，蓝皮书是如何从可视流中隐藏的，但是它并没有影响图书堆栈的顺序。...可访问性对position: absolute | fixed的影响 屏幕阅读器可访问该元素，并且键盘可聚焦。 它只是从视口中隐藏起来。
在下面的图中，我模拟了两个按钮的不同情况。在左侧，按钮更小，更远，用户需要更多的时间与它互动。在右侧，按钮大小更大，更接近于它的同级输入元素，这将使交互更容易、更快。 ?...我把鼠标悬停在按钮上，光标仍然是一个指针，这很好。不过，我也可以选择文本和悬停时，有一个文本光标!如果使用了正确的元素，就不会发生这种情况。 ?...复选框和单选按钮 当存在复选框或单选按钮元素时，我希望可以单击它或关联的标签来激活/禁用它。 ? 从用户体验的角度来看，这是难以访问和糟糕的。...这样，问题得以解决，整个复选框或单选按钮都是可单击的，如下图所 ? 侧边栏 对于带有类别的页面，有时我会注意到列表链接没有扩展到其父页面的整个宽度。 也就是说，可点击区域仅在文本上，如下图所示： ?...真实案例 在最近的Twitter更新中，导航设计在可点击区域大小方面存在问题。 最初，它仅与文本相关，如下面的屏幕截图所示，但他们在收到反馈后将其修复。 ?
3.4 关于屏幕 这里多说两句 Retina屏幕，因为我在很多文章中看到对 Retina屏幕的误解。 Retina屏幕只是苹果提出的一个营销术语： 在普通的使用距离下，人的肉眼无法分辨单个的像素点。...为什么强调 普通的使用距离下呢？...四、视口 视口( viewport)代表当前可见的计算机图形区域。在 Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。...，基本可以满足所有场景，而且不需要外部引入，这是我个人比较喜欢的一种方案。...不同于位图的基于像素， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 ?
大家好，又见面了，我是你们的朋友全栈君。 有很长一段时间没有更新博客了，近一段时间开始重新梳理知识点和写博客了，新的博客地址：欢迎访问。...visual viewport（视觉视口,即用户实际看见的部分）：屏幕上显示的网页区域的尺寸，会被缩放影响，可以通过window.innerWidth来获取。...理论上：1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。 在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。...在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。...手机浏览器是把页面放在一个虚拟的”视口”（viewport）中，视口可大于或小于手机屏幕的可视区域，一般手机默认viewport大于可视区域。
选择正确的技术很重要，并且可以在性能和可访问性方面发挥巨大作用。 在这篇文章中，我们除了提到各种包含图片的方法外，还将了解到每种方法的优点和缺点，以及什么时候和为什么要使用每种方法的来龙去脉。...解决方案1要点： 解决方案只有在图像不重要的情况下才是好的 当无法从后端CMS动态更改图片时 Demo 4.1.2 Hero - 解决方案2 对于此解决方案，我们将使用HTML图像。...另外，我喜欢使用HTML 的地方是可以在图片没有加载的情况下添加一个回退方法，这个回退至少可以保持内容的可读性。...悬停时，形状和文本需要更改颜色。怎么做？对我来说最好的解决方案是使用内联SVG。...4.6.1 避免使用图像作为CSS背景 当一个图像作为CSS背景被包含进来时，它不会被打印出来，取而代之的是一个空白区域。如下图所示： ? 就是这样的情况。
因为上一篇中有提到过 CSS逻辑属性的变革，从物理概念跳跃到了逻辑概念，也就是从 top 、 right 、 bottom、 left更新为 block、 inline、 start、 end。...如：打印机输出可达600DPI的分辨率，表示打印机可以在每一平方英寸的面积中可以输出600X600＝360000个输出点。...下图为喷墨打印机以较低质量在约 0.25 平方英寸的范围内按 150 dpi 打印的效果的特写 ?...视图 视口(viewport) 视口(viewport)代表当前可见的计算机图形区域。...在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，viewport 是浏览器窗口的大小。 在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。
前言 图片懒加载其实已经是一个近乎“烂大街”的词语了，在大大小小的面试中也会被频繁的问到，我在之前的面试中也被问到了图片懒加载的原因、实现方式及底层原理，但由于自己平时很少做“图片”相关的处理，对于“懒加载...今天，我将首先从浏览器底层渲染机制来剖析为什么要去做图片懒加载，之后我将带大家一起来看下目前主流的几种实现图片懒加载的方式及其实现原理，最后会做一个展望。...lazyLoad(imgs); } “但上面的代码如果你在lazyLoad中打印，你会发现滚动条上下滚动时，lazyLoad...思路分析 通过这个 API，我们就很容易获取img元素相对于视口的顶点位置rectObject.top，只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域： function...传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。
什么是图片懒加载 图片的懒加载就是在页面打开的时候，不要一次性全部显示页面所有的图片，而是只显示当前视口内的图片，一般在移动端使用（PC端主要是前端分页或者后端分页）。...当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片判断是否出现在视口内，如果出现在视口内，则将data-src赋值到src。...如何判断一个元素是否在视口内呢？ 通过getBoundingClientRect()方法来获取元素的大小以及位置。...当向下滑动的时候，从Network面板可以看到，剩下的图片是一个个加载的。 可能有人疑问为什么第一次加载了4张，而不是3张？...情况二 2、前端从后端获取图片进行展示，后端进行分页。
不得不说的屏幕尺寸 这里我得盗一下图，来好好说说这些概念 简单的说就是你的显示器的分辨率用物理像素描述的，而横向和纵向的分辨率值可以用screen.width/height打印出来。...视口viewport问题引出 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport...又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。...打印的是显示宽度（CSS像素），缩放就看得到区别，验证是CSS像素 没做视口viewport适配的显示效果 做了视口适配的效果(比如百度) 兼容性的方案： var viewWidth = document.documentElement.clientWidth...|| window.innerWidth; 即可获取视口宽度，如果做了视口适配，这个打印出来就是和屏幕宽度一样的值，比如这里的375个CSS像素，如果不做视口适配，这个打印出来就是默认视口宽度(和机型相关
在第二行开始写自己的代码。首先，把之前生成的那个文本文件（海南省所有镇的经纬度.txt）复制到现在的项目中，和Graph.h一个目录就行，然后用VS编写Graph.h。...#define ROW 106表示图中有106个结点（视自己情况而定，我以前在学校就爬出来106个点，然后回到家重新爬一次发现没有106个点，我也不清楚是为什么，具体怎么爬看之前的推送。...这个不用管，那个文本文件（海南省所有镇的经纬度.txt）有多少行ROW就是多少），最后我还定义了一个Graph类型的全局变量，为什么要定义这个全局变量是因为和Python交互时使用，如果局部变量函数一结束就直接回收了...这样就把str整个字符串分成了ROW行3列的char*类型的二维数组，二维数组是变量strArray，然后利用atof函数把经纬度从char*类型转变为double类型，存入图中，代码如下： ?...初始状态节点与节点并没有来连通，以后我会把最短路径连上，MAX是一个无穷大的数，我在这里定义成了10，为什么我会定义成10明天再说，今天差不多就到这里，最后不要忘了关闭文件释放资源！
HTTP 请求流程 HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础。通常由浏览器发起请求，用来获取不同类型的文件，例如HTML，CSS，JavaScript、「图片」、「视频」等。...所以在显示之前，我么还要额外地构建一棵「只包含了可见元素的布局树」。 image-20220125191135512 从上图可以看出，DOM树中所有不可见的节点都没有有包含到布局树中。... 这里我么把div的大小限定为200 * 200像素，而div里面的文字内容比较多，文字所显示的区域肯定会超过200 * 200的面积，这时候就产生了剪裁...首先我们谈一个概念，「视口」。什么是视口？ 通常一个页面可能很大，用户只能看到其中的一部分，我们把「用户可以看到的这个区域叫视口(viewport)。」...image-20220125191327634 从图中可以看出，渲染进程把生成图块的指令发送给 GPU，然后在 GPU 中执行生成图块的位图，并保存在 GPU 的内存中。
图1 这段代码读取tests/163/9.html这个文件里面的 HTML 代码，分别获取 下面的所有标签内部的所有标签中的文本。说起来可能有点绕口，我举个例子。...薛定谔的 Element 为了调试这个问题，我对代码做了一下修改： ? 图4 可以看到，同一个 HTML 标签，之前缓存的结果竟然跟新提取的不一样。...但奇怪的事情就这样发生了，问题消失了！在图4大量打印的同一个标签，缓存的数据跟提取的数据不一致！，在图5里面却一条都没有打印。这样修改以后，GNE 的提取的结果就正确了。 但为什么会发生这种事情呢？...一开始，我有一个不正确的假设，我以为str(element)的值，对应的 HTML 里面的每个节点。同一个节点，多次执行，结果都一样，不同的节点，多次执行，结果都不一样。 但实际上这是不正确的。...因为如果前一个节点的内存区域被垃圾回收了，那么这个区域会被重新分配，新来的节点可能碰巧会放到这个地方，这就导致两个不同的 标签，当你执行str(element)时，他们打印出来的结果都是相同的。
三、视口 视口（viewport）是用来约束网站中最顶级块元素的，即它决定了的大小。...从图中统计我们得知不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。...1、layout viewport（布局视口）指的是我们可以进行网页布局区域的大小，同样是以CSS像素做为计量单位，可以通过下面方式获取 /* 获取layout viewport */ document.documentElement.clientWidth...2、ideal viewport（理想视口）设备屏幕区域，（以设备独立像素PT、DP做为单位）以CSS像素做为计量单位，其大小是不可能被改变，通过下面方式可以获取。...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢
「meta viewport的用法」 通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。...在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口 meta有两个属性name 和 http-equiv name属性的取值 keywords...如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。...，是不同的进程在发挥作用，示意图如下： 从图中可以看出，整个过程是需要各个进程之间相互配合完成的，过程大致可以描述为： 用户输入url,处理输入信息，主进程开始导航，交给网络进程干活 网络进程发起网络请求...HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。
initial-scale 属性来缩小，注意点: 缩放视口后视口大小会发生变化，利用获取像素比动态设置缩放比例改造之前的示例如下：然后在 iphone5 上面输出的视口宽度也为 320 没问题：图片然后我在将上面我们进行缩放的代码添加之后再次打印结果如下：图片发现缩小之后并不是 320 而是 640 了，那么这就是为什么我们将整个视口缩小之后它里面的内容并没有进行缩小的原因，原因就是因为它在进行缩小的时候首先会将视口变大一半，原本我设置的宽度等于设备的宽度应该长相如下这么宽...，然后在一一对应关系的视口当中先进行布局，布局完毕之后在放入真正视口当中，然后在进行缩小一半，然后正是因为它们是一一对应的关系所以说你看到的界面就没有变小了：图片图片我正在参与2023腾讯技术创作特训营第二期有奖征文
你可以像上文中这样很明确的指定地址，也可以不用写。因为看源码来说，SDK是有自动获取IP的代码区域的。这个看自己的实际情况去写。 之后记得初始化机体，内部完成“command指令的发送。...具体的视频流的处理与输出看这个media的类 在初始化里面就完成了对机器视频流的获取 可以看到视频的编码是H.264的格式 可以看到，用到了多线程。...失败重连会导致计数器+1，之后会去判断队列的情况，后面的队列的相关的函数，我不熟悉，不分析了。 如果队列没有满的话，而且是debug开启的话，就打印连接的次数，数据的长度，以及具体的数据。...（TCP和UDP二选一） 一开始的日志会打印，连接的地址和协议 接着调用连接线程，上面我写过 标志位更新， 然后进入下面的解码的线程 接着是这个解码线程，从队列里面读取一帧数据，将它送入 _h264...SDK从连接设备到获取视频，到屏幕出现动态画面的完整流程做了简单的分析。
认识视口与相机 相机是我们日常生活中非常常见的概念，在 Flame 中，相机的概念如何理解呢？现实生活中，当你使用相机拍出一张照片，其囊括的区域是有限的，这个区域也就是视口 Viewport。...简单来说，相机的作用是：在视口内对原本空间坐标信息进行变换，完成对应的功能需求。注意，这里的 Camera 类和硬件设备的相机没有半毛钱关系。 ---- 2....【29/02】 比如上图中默认相机的视口尺寸是 900*600 ，并不是指白色区域的是 900*600 逻辑像素。另外，可以看到角色的尺寸没有改动，但在这个视口尺寸下，就会显得较小。...所以，从这里可以体会一下相机视口对于坐标系变换的特性。 此时改变窗口尺寸，通过打印日志可以发现， FlameGame 中的尺寸始终保持不变。...目前看来，本系列的文章并没有太多人看，所以没有太大的动力去研究，我也不想投入太多的精力在游戏开发中。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
