栅格化

在浅析Chrome的渲染流程（上）中我们介绍了渲染流水线中的 DOM生成 、 样式计算 和 布局 三个阶段。今天我们来讲下渲染流水线后面的阶段。 分层 经过生成布局之后生成的布局树，将每个元素的具体位置信息都计算出来了，那么接下来是不是开始着手绘制页面了？ 答案依然是否定的。 因为页面中有很多复杂的效果，比如一些复杂的3D变换、页面滚动，或者使用z-indexing做z轴排序等。为了更加方便地实现这些效果， 渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerThree） 。提到图层，大家最先应该想到的是PS软件。PS中图层是很常见的，比如将图片背景变成透明的，就需要先复制一个图层出来后，用滤棒清除掉图层中不需要的部分，然后应用到原始图像上，就可以生成一个具有透明背景的图片了。 要想直观地理解什么是图层，可以通过Chrome的 “开发者工具”，选择 “Layers” 标签，就可以可视化页面的分层情况，如下图： 如果找不到 “Layers” 这个标签，请参考下图： 从上面的第一张图可以看出，渲染引擎给页面分了很多图层，这些图层按照一定的顺序折叠加在一起，就形成了最终的页面。 现在你知道了浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面。那么这些图层和布局树节点的之间的关系是什么样子呢？请参考下图： 通常情况下，

这几天一直在讨论关于一体化态势图的架构。首先大家明确了基于层次化架构，采用大量功能图层来表示承载不同类型的数据。我要解决的大量的地理信息数据的建模。目前底层的地理信息数据库的处理系统arcGIS等，可以高效管理地理信息数据库中的数据，提供层次化视图，也可以帮助用户轻松筛选所需要的数据，并提供相应的关联分析能力。 刚开始，我准备借鉴arcGIS的思想，将地理信息数据分层显示，每个图层都是功能单一的，例如，河流构成一个河流层，附带对河流操作的函数，路网分成公路网和铁路网，分别形成一个图层。再借鉴costmap_2d的思想，通过三层到master map的投影，构成一个虚拟的图层，对导航提供代价地图。如果将铁路网和公路网到虚拟的路网层做投影，则也可以当成一个路网层，对外提供先关数据。最底层是一个栅格化的空白图层，就是按照实际需要，将态势展示的区域进行栅格化，栅格化带来的好处是减小数据存储和处理的开销(一定面积的区域可以用该栅格的坐标表示）。 这需要说明的是，我在设计地理信息层的时候，是把它当做一个图层的集合来设计的，其下面包含很多子图层集合和基础功能图层。子图层集合也允许嵌套，直到最底层的图层集合只包含基础功能图层为止。对于某一个子图层，我们可以把它当做一个虚拟图层，是由其所有子图层集合和基础功能图层的投影。例如上面的路网层，就是背景轮廓层+公路网+铁路网进行的投影。另外

本文转载自公众号 前端迷 总体概览 大体上，可以分为六步，当然每一步都可以详细展开来说，这里先放一张总览图: DNS域名解析 在网络世界，你肯定记得住网站的名称，但是很难记住网站的 IP 地址，因而也需要一个地址簿，就是 DNS 服务器。DNS 服务器是高可用、高并发和分布式的，它是树状结构，如图： 根 DNS 服务器 ：返回顶级域 DNS 服务器的 IP 地址 顶级域 DNS 服务器：返回权威 DNS 服务器的 IP 地址 权威 DNS 服务器 ：返回相应主机的 IP 地址 DNS的域名查找，在客户端和浏览器，本地DNS之间的查询方式是递归查询；在本地DNS服务器与根域及其子域之间的查询方式是迭代查询； 递归过程： 在客户端输入 URL 后，会有一个递归查找的过程，从浏览器缓存中查找->本地的hosts文件查找->找本地DNS解析器缓存查找->本地DNS服务器查找，这个过程中任何一步找到了都会结束查找流程。 如果本地DNS服务器无法查询到，则根据本地DNS服务器设置的转发器进行查询。若未用转发模式，则迭代查找过程如下图： 结合起来的过程，可以用一个图表示： 在查找过程中，有以下优化点： DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。 在域名和 IP

①创建窗口和布局 ②改为栅格化 点击窗口处的空白处（无控件），右击->lay out->lay out in grid ③修改各个控件的最大最小大小值以及各个属性值 ④对比图 1、没有自适应 2、栅格化，自适应效果图 来源： CSDN 作者： 李阡殇 链接： https://blog.csdn.net/qq_41767945/article/details/103754561

@mixin cube正方形 rect长方形 circle圆形 bg背景色 @include bg() @for $index from 1 through 3{ @debug #index } 插值：#{$index} 选择器{ 属性：值； } 监视transition:all .8s ease 0.2s; apple 四个div横排那里 鼠标滚下来打的时候依次透明度从0到1的动画 利用栅格化响应式的解决方案 利用栅格化实现响应式布局 1.响应式 @media srceen and(max-width:500px){ .content{ background:#c40021; } } 2.栅格化 .col-lg-3{ width:percentage(3/12); float:left; } 3.利用栅格化实现响应式布局 sm md lg 来源： https://www.cnblogs.com/liuxuhui/p/12157291.html

流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。 样式计算（recalculate Style） 1.将css转换为浏览器可以理解的结构 当渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构——styleSheets。控制台输入：document.styleSheets即可查看 2. 转换样式表中的属性值，使其标准化 将color：blue；转化为color：rbg（）；将em，rem转化为px 3. 计算出 DOM 树中每个节点的具体样式 使用继承和层叠规则来算出每个节点样式 样式计算阶段的目的是为了计算出 DOM 节点中每个元素的具体样式，在计算过程中需要遵守 CSS 的继承和层叠两个规则。这个阶段最终输出的内容是每个 DOM 节点的样式，并被保存在 ComputedStyle 的结构内 布局阶段（layout） 计算出 DOM 树中可见元素的几何位置，我们把这个计算过程叫做布局。 1. 创建布局树 在显示之前，我们还要额外的创建一颗只包含可见元素的布局树。 要点总结：浏览器不能直接理解 HTML 数据，所以第一步需要将其转换为浏览器能够理解的 DOM 树结构；生成 DOM 树后，还需要根据 CSS 样式表，来计算出 DOM 树所有节点的样式；最后计算 DOM 元素的布局信息

在上篇文章中，我们介绍了渲染流水线中的 DOM 生成、样式计算和布局三个阶段，那今天我们接着讲解 渲染流水线后面的阶段 。 这里还是先简单回顾下上节前三个阶段的主要内容：在 HTML 页面内容被提交给渲染引擎之后，渲染引擎首先将 HTML 解析为浏览器可以理解的 DOM；然后根据 CSS 样式表，计算出 DOM 树所有节点的样式；接着又计算每个元素的几何坐标位置，并将这些信息保存在布局树中。 分层 现在我们有了布局树，而且每个元素的具体位置信息都计算出来了，那么接下来是不是就要开始着手绘制页面了？ 答案依然是否定的。 因为页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-indexing 做 z 轴排序等，为了更加方便地实现这些效果， 渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree） 。如果你熟悉 PS，相信你会很容易理解图层的概念，正是这些图层叠加在一起构成了最终的页面图像。 要想直观地理解什么是图层，你可以打开 Chrome 的“开发者工具”，选择“Layers”标签，就可以可视化页面的分层情况，如下图所示： 现在你知道了 浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面 。 下面我们再来看看这些图层和布局树节点之间的关系，如文中图所示： 通常情况下， 并不是布局树的每个节点都包含一个图层

原文发布时间：2012-09-29 翻译：糖糖 PDF格式是一种可在Adobe PDF文件中设置三维数据显示的目标格式。 本文主要内容： 介绍 案例 输出 PDF格式是一种可在Adobe PDF文件中设置三维数据显示的目标格式。通过这种方式创建的数据可以用于显示标准的Adobe阅读软件产品。Adobe阅读软件7.0及以上版本支持文件内的三维交互式注释。这些注释允许用户显示三维模型。例如，从不同角度显示模型、或者通过点击鼠标来选择模型中的各个子部件等等。 写模块表示ECMA-363通用3D文件格式下的三维模式，它可以嵌入到PDF文件中。这种三维模型可以在支持交互式三维注释的PDF中显示。 上图为在Adobe阅读软件下显示的三维建筑模型，该模型是由DGN格式转换成的PDF格式。 工作空间展示 我创建的这个工作空间（如下图）只用了几个转换器，它在对栅格、DEMs、和带有表面的三维曲面的处理有了很大改进，尽可能地整合了不同类型的数据。该案例也同样展示了FME如何将不同的部分整合在一起得到一个不可思议的输出。 输出 在我解说细节之前，请运行附件中的工作空间并查看输出结果。 你可以看到（如上图）我是如何合并GIS/CAD的矢量数据（如道路、河流、公园）到一个image（栅格）中。在一个高程模型（DEM）上进行披覆，然后组合成一个三维建筑模型（BIM），实现区域的集成。 工作空间细节

一、引子 讲完了CPU，我带你一起来看一看计算机里的另外一个处理器，也就是被称之为GPU的图形处理器。过去几年里，因为深度学习的大发展，GPU一下子火起来了， 似乎GPU成了一个专为深度学习而设计的处理器。那GPU的架构究竟是怎么回事儿呢？它最早是用来做什么而被设计出来的呢？ 想要理解GPU的设计，我们就要从GPU的老本行图形处理说起。因为图形处理才是GPU设计用来做的事情。只有了解了图形处理的流程，我们才能搞明白， 为什么GPU要设计成现在这样；为什么在深度学习上，GPU比起CPU有那么大的优势。 二、GPU的历史进程 GPU是随着我们开始在计算机里面需要渲染三维图形的出现，而发展起来的设备。图形渲染和设备的先驱，第一个要算是SGI（Silicon Graphics Inc.）这家公司。 SGI的名字翻译成中文就是“硅谷图形公司”。这家公司从80年代起就开发了很多基于Unix操作系统的工作站。它的创始人Jim Clark是斯坦福的教授，也是图形学的专家。 后来，他也是网景公司（Netscape）的创始人之一。而Netscape，就是那个曾经和IE大战300回合的浏览器公司，虽然最终败在微软的Windows免费捆绑IE的策略下， 但是也留下了Firefox这个完全由开源基金会管理的浏览器。不过这个都是后话了。 到了90年代中期，随着个人电脑的性能越来越好，PC游戏玩家们开始有了