浏览器默认行为 为什么要阻止这些默认行为 如何阻止默认行为 后遗症 灵丹妙药 事件对象属性 touchstart 事件 touchmove 事件 触点对象 5-小案例（未完待续—后续补上） 6-适配...设备独立像素的出现，使得即使在高分辨率的屏幕下，也可以正常尺寸的显示元素，代码不受到设备的影响。...像素比 / N倍屏 像素比（DPR dpr）： 单一方向上设备物理像素和设备独立像素的比例。 像素比的作用 程序可以根据像素比来显示不同的图片，达到清晰显示网页的效果。...一般移动设备的浏览器都默认定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。 视口大小由浏览器厂商决定，大多数设备的布局视口大小为 980px。...如何阻止默认行为 可以给 document 绑定 touchstart 事件，并阻止默认行为，不过需要关闭被动模式。这里推荐创建一个包裹元素，绑定 touchstart 事件并阻止默认行为。
图1：浏览器的主要HTML解析器如何被阻塞的图示。在这种情况下，解析器遇到了一个外部CSS文件的元素，它阻止了浏览器解析文档的其余部分，甚至是渲染任何文档，直到CSS被下载和解析。...因为CSS文件同时阻止了渲染和解析，我们可以通过代理服务为样式表引入两秒的人为延迟。这个延迟使我们更容易在网络瀑布图中看到预加载扫描器的工作情况。...图5：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。该页面包含一个样式表和一个注入的异步脚本。...更糟糕的是，图像被延迟加载，直到懒惰加载器的JavaScript下载、编译和执行之后。 图8：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。...图9：在移动设备上通过模拟3G连接在Chrome上运行的网页的WebPageTest网络瀑布图。
关键渲染路径概念 浏览器是如何将HTML、JS、CSS、image等资源渲染成可视化的页面的呢？本文简单介绍一下渲染过程中涉及到的关键步骤。 该过程分为四步：模型对象的构建、渲染树构建、布局、绘制。...3.布局 经过前两步的操作，我们知道了元素的内容和样式信息，但是实际在不同显示器中的大小和位置如何确定呢，这就需要进行布局操作了，有的地方称为"自动重排"（reflow）。...Webkit依据框模型来计算元素的位置和大小，布局输出的是一个"盒模型"对象，该对象包含了每个元素在视口内的确切位置和尺寸。 ? 4.绘制 在布局结束后，接下来就是绘制，实现栅格化。...Paint一般通过图像上下文来控制，分为2D和3D绘制上下文。...关键渲染路径开发相关 介绍完了关键渲染路径的概念，接下来结合chrome dev-tool来看一下实际的情况，chrome的版本是60.0。
第二种情况下(Case 2)也是一样的问题 如果使用容器查询，我们可以通过查询父组件来决定如何显示特定组件来解决这些问题。考虑下图，它展示了我们如何使用容器查询来修复这个问题。...当我们在设计UI时以这种心态思考时，我们可以开始考虑组件的不同变体，这些组件依赖于它们的父宽度。 在下面的图中，请注意文章组件的每个变化是如何以特定的宽度开始的。...不仅如此，我们还可能有一个组件的变体，它应该只显示在特定的上下文中。例如，事件列表页面。在这种情况下，清楚在何处使用此变体是很重要的。 问题是，如何告诉设计师应该在哪里使用这些组件。...注意我是如何将每个变体映射到一个特定的上下文，而不是一个视口。为了进一步证明这一点，我们配合 CSS网格一起使用时，组件的行为会有何不同。...当有足够的空间时，清单将展开并显示每个用户的名称。聊天列表的父元素可以是动态调整大小的元素(例如:使用CSS视口单元，或CSS比较函数)。
接着是提高站点性能的工具 Lighthouse，它内置于 Chrome Dev 工具中，作用正如其名，主要用于分析站点，探索并告诉开发者如何利用所有最新的平台功能，以优化网站性能。...同时 Lighthouse 可以为不同网站资源设置权重，只要简单在 JSON 文件中配置相关限制与指标即可实现。 ? 此外还有一系列网页诊断工具。...强大的功能 Chrome 工程师 Paul Lewis 介绍了 Web Perception Toolkit，这是一个开源库，工作原理是从设备摄像头获取信息流，比如条形码、二维码与 logo，并将其传递给一组探测器...Site Isolation 确保来自不同网站的页面始终放入不同的进程，每个进程都在沙箱中运行，该沙箱限制了允许进程执行的操作。同时它还可以阻止进程从其它站点接收某些类型的敏感数据。...Chrome 引入 SameSite 属性，允许用户声明自己的 cookie 是否应限制在第一方或同一站点上下文中，这增强了用户隐私控制权。
呈现引擎，按图中看，包含了一个 compositor(合成器)和 Javascript Engine(JS解释引擎)。...限制因设备的内存和CPU功率⽽异，但当Chrome达到限制时，它会在⼀个进程中开始从同⼀站点运⾏多个选项卡。 有更高的资源占用。...这样可以做到，当 Chrome 在强大的硬件上运行时，它可能会将每个服务拆分为不同的进程，从而提供更高的稳定性，但如果它位于资源约束的设备上，Chrome 会将服务整合到一个进程中，从而整合流程以减少内存使用...通常一个页面可能很大，但是用户只能看到其中的一部分，我们把用户可以看到的这个部分叫做视口（viewport）。...浏览器中的JavaScript运行机制 JavaScript如何工作的，首先要理解几个概念，分别是JS Engine(JS引擎)、Context(执行上下文)、Call Stack(调用栈)、Event
这可能并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。 例如，以下组件可能显示在网站布局的窄或宽列中。 如果有空间，它将显示为两列，否则，我们希望将其堆叠显示。...上图中的左右两个组件，是同一个组件，功能上是完全一样的，只是要展示不同的布局。...然后，可以编写一个查询来查找此包含上下文而不是视口大小，以便为组件制定布局决策。 使用创建容器查@container。 这将查询最近的包含上下文。...另外，上文显示的基本功能都已经可以在Chrome Canary中进行测试。 下载Canary，然后转到chrome://flags，搜索Container Queries并启用该标志。...id=1145970 共识和标准 Chrome浏览器中提供功能后，此处列出的值不保证是最新的。
Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站 该模式不可替代真实设备测试 切换 Device Mode 按钮可以打开或关闭 Device Mode ?...选择设备 ? 通过该视图控件，你可以设定下面两种模式： 自适应。 使视口可以通过任意一侧的大手柄随意调整大小 特定设备。...将视口锁定为特定设备确切的视口大小，并模拟特定设备特性 媒体查询 媒体查询是自适应网页设计的基本部分。要查看媒体查询检查器，请在三圆点菜单中点击 Show Media queries。...由于每一条消息的时间戳均不同，因此，每一条消息都将显示在各自的行上 ? 选择执行环境 以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector ?...当您在 top 以外的环境中操作时，DevTools 将 Execution Context Selector 突出显示为红色，如下面的屏幕截图中所示。
viewport 该属性可以控制视口，但仅供移动设备使用。需要注意的是 视口 不代表就是手机的屏幕宽高，视口可以设置，就是通过 viewport 这个属性设置的。...viewport 的 content 值如下： width 定义视口的宽度，值一般就是 device-width，表示宽度与设备宽度一致。...； initial-scale 定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率，可以取 0.0 到 10.0 的数值，一般是 1.0，表示不缩放，大于 1.0 会把页面放大...follow 告诉搜索引擎爬虫可以爬取本页面上的链接； nofollow 告诉搜索引擎不要爬取本页面上的链接； noodp 搜索引擎的搜索结果中会显示一部分搜索文字上下文的内容，noodp 属性用来阻止使用...DMOZ 信息做为这部分的文字使用； noydir 搜索引擎的搜索结果中会显示一部分搜索文字上下文的内容，noydir 属性会阻止雅虎使用 Yahoo!
CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。...核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
/*视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要 *document.documentElement.clientWidth或者document.body.clientWidth...（区别与视口）,与上面获取视口大小的方法如出一辙 function getDocumentPort() { if (document.compatMode == "BackCompat") {...').style.[ height | width ] dom.style.width这种方式只能取到行内属性， 而不是css属性 5、HTML title属性：定义关于元素的额外信息，这些信息会在鼠标悬浮时显示一段工具提示文本...鼠标悬浮显示nihao 6、各大浏览器对应内核 Trident IE系列 Wenkit Chrome、Safari ...div，点击文档其他地方隐藏div 法一思路： 1、对document做点击事件，隐藏div 2、对btn的点击事件绑定事件处理程序，阻止事件冒泡。
JPEG、WebP、GIF 和 PNG 都是光栅图像格式的示例。 光栅图像与分辨率有关。144 PPI（每英寸像素）PNG 图像在具有 144 PPI 显示分辨率的设备上看起来很棒。...因此，矢量图像与分辨率无关，无论显示分辨率或显示尺寸如何，都可以保持其质量。 分辨率独立是SVG的最大优势。我们可以在不损失质量的情况下放大或缩小图像。...，但它会阻止 CSS 在多个文档之间共享。...考虑一个徽标，例如下图中虚构的 Hexagon Web Design & Development 的徽标。 如果没有媒体查询，这个 SVG 标志会简单地拉伸或收缩以适应视口或其容器。...您现在应该知道如何： 使用 CSS 设置 SVG 元素的样式 动画 SVG 属性 使用 CSS 媒体查询和matchMediaAPI 来显示和隐藏部分 SVG 文档
大家好，又见面了，我是你们的朋友全栈君。 CSS中的视口单位听起来很棒。...核心问题是移动浏览器（我正在为您浏览，Chrome和Safari）具有“帮助”功能，其中地址栏有时可见，有时隐藏，从而改变了视口的可见大小。...如下所示： 当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
我们看看下图，图中最小的点就是设备的像素。 ? 分辨率(Image resolution) 分辨率(Image resolution)日常用语中之分辨率多用于影像的清晰度。...那么这该如何实现呢？ 基于这个问题，W3C提出参考像素这个概念。定义如下： 参考像素是设备上一个像素的视角，像素密度为96dpi，离设备长一臂。标准的手臂长度为28英尺，所以视角大概为0.0213度。...如何设置文档viewport？...web api，目前只有chrome 60 +跟Opera 47+支持。...} 坐标系统 通过上述对设备屏幕跟视口的介绍，我们应该可以对电子设备中的浏览器显示情况有了基本的了解。那么接下来我们来了解一下浏览器中的坐标系系统。
而进程间通过 IPC 机制进行通信(图中虚线部分)。...2.2 目前多进程架构 [8l3y15mise.png] 最新的 Chrome 浏览器包括 5 类进程： 浏览器进程 x1：负责界面显示、用户交互、子进程管理、存储等功能 渲染进程 xn：将 HTML、...同时在性能受限的设备上 Chrome 还提供灵活的弹性架构，会将很多服务整合到一个进程中，从而节省内存占用。 [yyenpglx0v.png] 3....拥有层叠上下文属性 明确定位属性、定义透明属性、使用 CSS 滤镜等的元素拥有层叠上下文属性。 [1vo7cjen0n.png] 2....有的图层很大很长，但用户通过 视口(viewport)只能看到页面的很小一部分，为了减小开销，合成线程会将图层划分为 图块(tile)，通常大小为 256x256 或 512x512，合成线程会优先把视口附近的图块栅格化转换成位图
浏览器管理： 在入门示例中已经使用过了启动和关闭浏览器的 API，这里主要了解一下浏览器上下文（包含权限）和如何连接到正在运行的浏览器两部分。...浏览器上下文及上下文权限： 浏览器上下文的作用是隔离自动换任务，保证 Cookie 和本地存储不会在浏览器上下文之间共享； 浏览器上下文所关联的页面会在关闭上下文时一同被关闭； 浏览器上下文支持权限配置...JavaScript 函数同样在入门示例中有过使用，但没有提到如何传递参数和其中的一个缺陷。...基础配置： 因为调试往往发生在开发环境中，所以提供一个环境变量来动态启动调试的基础配置还是有很帮助的： 禁用无头模式：可以查看浏览器显示的内容，主观的观察内容变化； 延长执行时间：通过延长执行时间来观察正在发生的情况...().version); console.log(version); PS：Puppeteer 文档显示目前尚无法测试扩展程序的内容脚本。
[image.png] 上图中，描述了具有主线程、工作线程、Compositor 线程、Raster 线程的渲染器进程，以及他们之间的关系。...#JS 可以阻止解析 当 HTML 解析器遇到 标签的时候，它会暂停解析 HTML 文档，然后对这个 JS 脚本进行加载、解析和执行。...Web 开发人员可以通过多种方式的配置，告知浏览器如何更优雅的加载资源。...即使渲染的计算可以跟上屏幕的刷新速度，可因为此计算是在主线程上执行的，这就意味着 JS 代码的执行，也可能导致它被阻断。 [image.png] 如上图，时间轴上的动画帧，被 JS 阻止了一帧。...光栅化是将几何数据经过一系列变换后最终转换为像素，从而呈现在显示设备上的过程。 [305.gif] 也许处理这种情况的一种无脑方案，是在视口（ViewPort）内部将每个组件都光栅化。
霍夫变换 盛载菜品食物的碗盘器具基本是圆形的，因此对餐盘图像去噪后用霍夫圆变换实现对菜品碗盘位置的检测，实现碗盘分离。...数据集准备及处理 菜品数据集 菜品识别通过飞桨实现，起初对每样菜品拍摄一张俯视图。菜品识别的实质就是图像分类。因此，每个分类只有一个训练图片是肯定不够的。...在上图中的左侧图片框中显示的是菜品摄像头实时拍摄的某帧画面，托盘中有芹菜炒肉、番茄炒蛋和米饭三样菜。...在后端通过霍夫圆处理后并调用模型进行预测，最终将数据返回并在移动端显示，可以从上图中的右侧移动端截图中看到结果预测正确，该预测模型在35种菜品类别的数据集中能达到99%以上的准确度。...硬件主体由一个放置台和两个摄像头组成，通过无线路由器将设备连接在同一测试网络下。本设备中使用的是海康威视网络摄像头。 在实物图中，位于上方的摄像头用于人脸识别，下方的摄像头用于识别托盘中的菜品并计价。
浏览器的架构体系也随着调整变得更加复杂，也会有更高的资源占用。 那么如何寻求一种在资源占用和复杂架构体系之间的平衡便成为了一个难题。 小孩子才做选择，鱼和熊掌我都要！...Chrome 团队在 2016 年使用“面向服务的架构”(Services Oriented Architecture，简称 SOA)的思想设计了新的 Chrome 架构。...： 栈中的垃圾回收比较简单，当一个函数执行结束后，JavaScript 引擎会通过向下移动 ESP 来销毁函数调用栈中所保存的执行上下文，ESP 就是记录当前执行状态的指针。...在上图中，有一个元素在一帧中占据了视口的一半。然后，在下一帧中，元素下移视口高度的 25％。...在上图中，最大视口尺寸是高度，不稳定元素已经移动了视口高度的 25％，所以距离分数是 0.25。
Studio 2008实现查询菜品信息的功能，mysql作为后台数据库，功能包括展示所有菜品信息及按菜系查询菜品信息的功能，程序运行界面如图-1所示： 图-1 三、数据库设计 数据库名称:MenuDB...typeName char 10 非空 菜品信息表中所有字段均必须设置为非空字段，其他设置参见下表： 数据表名 menuInfo 实体名 菜品信息表 字段显示 字段名 数据类型 字段大小 备注和说明...按照图-1所示进行窗体设计，在窗体MenuSearchForm中添加1个标签（Label）控件、2个按钮控件(Button)、1个组合框控件（ComboBox）、1个数据视图控件（ListView）和1个上下文菜单控件...（ContextMenuStrip），窗体显示位置为屏幕中央，窗体禁止最大化； 5、创建数据库连接，窗体初始状态显示全部菜品信息；将全部菜系显示到组合框中。...6、实现“查询”按钮功能，根据用户选择的菜系显示菜品信息，并在数据列表视图中显示，如图-2所示： 图-2 7、如果没有满足条件的信息，提示用户，并清空列表视图中的数据，如图-3所示： 图-3 8、选中某条记录
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
