1.42 页面统计数据中，常用的 PV、UV 指标分别是什么？
PV(页面访问量)
即页面浏览量或点击量，用户每1次对网站中的每个网页访问均被记录1个PV。
用户对同一页面的多次访问，访问量累计，用以衡量网站用户访问的网页数量。
UV(独立访客)
是指通过互联网访问、浏览这个网页的自然人。访问您网站的一台电脑客户端为一个访客。
00:00-24:00内相同的客户端只被计算一次。
1.43 一台设备的dpr，是否是可变的？
devicePixelRatio，中文名称是设备像素比。这个概念在移动开发的时候会被特别关注，因为它关系到了整个画面的观感、布局甚至是清晰度。在JavaScript BOM中，它是window全局对象下的一个属性，它的定义如下：
dpr = 设备像素 / CSS像素
也有文章把设备像素称为物理像素，把CSS像素称为独立像素（DIPs），但所指的都是同样概念：
(1) 首先说设备像素。举手机的例子来说，设备像素也就是在手机广告上经常会看到的19201080像素或1280720像素，也就是常说的分辨率为1080p或720p。它所指的是设备上有多少个能够显示一种特定颜色的最小区域，在任何设备中这个数值都是不会变的。
(2) 再说CSS像素，它的一种更广义的叫法是独立像素。CSS像素是为web开发者所打造的，是在CSS和JavaScript中使用的一个抽象的层，我们在CSS中定义的width: 100px;、font-size: 16px;等属性都是指CSS像素。而相对于CSS像素，设备像素这个概念在前端中几乎用不上（除了screen.width/height）。
那么，从定义来看，dpr的意义就是：在一个设备（的每个方向）上，每个CSS像素会被多少个实际的物理像素来显示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1K453lNx-1683893094352)(C:\Users\32063\AppData\Roaming\Typora\typora-user-images\image-20230512093200340.png)]
上图中，一个蓝色方块代表一个设备像素，一个黄色方块代表一个CSS像素。我们可以通过这张图来理清dpr的概念：
如图左，一个设备像素覆盖了多个CSS像素，dpr < 1，对应用户的缩小操作；
如图右，一个CSS像素覆盖了多个设备像素，dpr > 1，对应用户的放大操作。
由于用户的缩放操作会改变dpr，所以设备dpr是在默认缩放为100%的情况下定义的。
1.44 html和css中的图片加载与渲染规则是什么样的？
Web浏览器先会把获取到的HTML代码解析成一个DOM树，HTML中的每个标签都是DOM树中的一个节点，包括display: none隐藏的标签，还有JavaScript动态添加的元素等。浏览器会获取到所有样式，并会把所有样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式。
浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree），渲染树类似于DOM树，但两者别还是很大的：渲染树能识别样式，渲染树中每个节点（NODE）都有自己的样式，而且渲染树不包含隐藏的节点（比如display:none的节点，还有内的一些节点），因为这些节点不会用于渲染，也不会影响节点的渲染，因此不会包含到渲染树中。一旦渲染树构建完毕后，浏览器就可以根据渲染树来绘制页面了。
简单的归纳就是浏览器渲染Web页面大约会经过六个过程：
解析HTML，构成DOM树
解析加载的样式，构建样式规则树
加载JavaScript，执行JavaScript代码
DOM树和样式规则树进行匹配，构成渲染树
计算元素位置进行页面布局
绘制页面，最终在浏览器中呈现
是不是会感觉这个和我们图像加载渲染没啥关系一样，事实并非如此，因为img、picture或者background-image都是DOM树或样式规则中的一部分，那么咱们套用进来，图片加载和渲染的时机有可能是下面这样：
解析HTML时，如果遇到img或picture标签，将会加载图片
解析加载的样式，遇到background-image时，并不会加载图片，而会构建样式规则树
加载JavaScript，执行JavaScript代码，如果代码中有创建img元素之类，会添加到DOM树中；如查有添加background-image规则，将会添加到样式规则树中
DOM树和样式规则匹配时构建渲染树，如果DOM树节点匹配到样式规则中的backgorund-image，则会加载背景图片
计算元素（图片）位置进行布局
开始渲染图片，浏览器将呈现渲染出来的图片
上面套用浏览器渲染页面的机制，但图片加载与渲染还是有一定的规则。因为，页面中不是所有的（或picture）元素引入的图片和background-image引入的背景图片都会加载的。那么就引发出新问题了，什么时候会真正的加载，加载规则又是什么？
先概括一点：
Web页面中不是所有的图片都会加载和渲染！
根据前面介绍的浏览器加载和渲染机制，我们可以归纳为：
、和设置background-image的元素遇到display:none时，图片会加载但不会渲染
、和设置background-image的元素祖先元素设置display:none时，background-image不会渲染也不会加载，而img和picture引入的图片不会渲染但会加载
、和background-image引入相同路径相同图片文件名时，图片只会加载一次
样式文件中background-image引入的图片，如果匹配不到DOM元素，图片不会加载
伪类引入的background-image，比如:hover，只有当伪类被触发时，图片才会加载.
1.45 mete标签中的viewport 有什么用？
什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做**“视区”**。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
1<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
1.46 前端该如何选择图片的格式
图片的类型目前就分为两种：
- 位图
- 矢量图
位图
所谓位图就是用像素点拼起来的图也叫点阵图，平时我们用到的png、jpg等图片就是位图。
矢量图
矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形对应的函数进行运算，将运算结果图形的形状和颜色显示给你看。
无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，它也不会像位图那样会失真。
常见的就是svg格式的。
图片的压缩类型
- 无压缩
- 有损压缩
- 无损压缩
无压缩
无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。例如BMP格式的图片。
有损压缩
指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量（即图片被压糊了），并且这种损失是不可逆的。
常见的有损压缩手段是按照一定的算法将临近的像素点进行合并。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的体积。例如jpg格式的图片使用的就是有损压缩。
无损压缩
在压缩图片的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。
压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的体积。例如png、gif使用的就是无损压缩。
图片位数
图片位数通常分为8、16、24、32
- 图片位数越大，能表示的颜色越多，同时占用的体积也约大。例如8位图片支持256种颜色，即2的8次方。
- 图片位数越大，颜色过渡也就越细腻，携带的色彩信息可以更加丰富。
- 32位跟24位的区别就是多了一个Alpha通道，用来支持半透明，其他的跟24位基本一样。
常见的图片的格式
GIF
GIF的全称是Graphics Interchange Format，可译为图形交换格式，是在1987年由Compu Serve公司为了填补跨平台图像格式的空白而发展起来的。
GIF采用的是Lempel-Zev-Welch（LZW）压缩算法，最高支持256种颜色。由于这种特性，GIF比较适用于色彩较少的图片，比如卡通造型、公司标志等等。如果碰到需要用24位真彩色的场合，那么GIF的表现力就有限了。
GIF格式图片最大的特性是帧动画，相比古老的bmp格式，尺寸较小，而且支持透明(不支持半透明，因为不支持 Alpha 透明通道 )和动画。
优点：
体积小
支持动画
缺点：
由于采用了8位压缩，最多只能处理256种颜色
JPEG/JPG
JPEG是Joint Photographic Experts Group(联合图像专家组)的缩写，文件后辍名为"．jpg"或"．jpeg"，是常用的图像文件格式，由一个软件开发联合会组织制定，是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤。尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量明显降低，如果追求高品质图像，不宜采用过高压缩比例。
优点：
采用有损压缩，压缩后体积更小
支持24位真彩色
支持渐进式加载
缺点：
有损压缩会损坏图片的质量
不支持透明/半透明
渐进式jpeg(progressive jpeg)
渐进式jpg文件包含多次扫描，这些扫描顺寻的存储在jpg文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。
PNG
png，即便携式网络图形是一种无损压缩的位图片形格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小。
png支持8位、24位、32位3种，我们通常叫它们png8、png24、png32。
优点：
无损压缩
支持透明、半透明
最高支持24位真彩色图像以及8位灰度图像，从而彻底地消除锯齿边缘。
缺点：
与jpg的有损耗压缩相比，png提供的压缩量较少
不支持动画，如需支持动画还得使用apng
APNG
APNG（Animated Portable Network Graphics）是一个基于PNG（Portable Network Graphics）的位图动画格式。实际上就是多张png组成的动图。MAC电脑打开可以看到组成apng的每一张图。
优点：
- 支持png的所有优点
- 支持动画
缺点：
- 浏览器支持情况较差
WEBP
WebP是由Google最初在2010年发布，目标是减少文件大小。它能同时支持无损压缩和有损压缩。
它几乎集成了以上所有图片的优点，并且能够拥有更高的压缩率，但是浏览器支持率还不够理想。
SVG
SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（例如：由直线和曲线组成的路径）、图象、文本。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换、剪切路径、alpha蒙板、滤镜效果、模板对象和其它扩展。
SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。
SVG与上面图片不同的是它是矢量图，无论你怎么放大，它都不会失真；同时，SVG文件通常要比比JPEG和PNG格式的文件要小很多。
优点：
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 可以与 JavaScript 技术一起运行
SVG 文件是纯粹的 XML
缺点：
渲染成本相对于其他格式图片比较高，对于性能有影响。
需要学习成本，因为SVG是一种用XML定义的语言。
如何选择图片的格式
