浏览器
一、考察知识点、性能优化
1.1 性能优化指标
二、考察知识点、资源加载
2.1 浏览器资源加载优先级别有哪些呢?
一个资源的加载优先级分为五个级别，分别是：
- Highest
- High
- Medium
- Low : 异步/延迟/动态插入的脚本（无论在什么位置）
- Lowest
三、考察知识点、浏览器渲染原理
3.1 输入 URL 之后的过程?
3.2 background-image 是怎么加载图片的? 与 img 标签相比, 哪种方式先加载? 哪种方式性能更好?
-
<img />: 是Html标签, 浏览器在解析HTML代码时，遇到<img>标签会直接请求对应的图片，并将其插入到文档流中。因此，图片会和其他HTML元素一起加载，如果图片过大或数量过多，会导致网页加载缓慢。如果引入了一个很大的图片, 那么在这个图片下载完成之前,<img />后的内容都不会显示。-
加载操作: 可以设置
loading属性来指定图片的加载方式（如lazy可以延迟加载图片） -
适用场景:
-
<img />标签可以添加alt属性, 能更好的SEO, 有着更好的语义化;也可以被一些读屏软件识别。一般来说，如果图片是周围的文字内容的一部分，比如logo，图表，人等，那么用img -
<img />内容支持打印。所以如果有打印网页的需求,且希望将图片的内容也打印出来, 那么需要使用<img />
-
-
-
background-image: 是Css属性, 会等到DOM结构加载完成后, 具体的话就是当浏览器解析到这个样式时,不会立即请求图片,而是等到元素在文档流中展现时才会请求。如果引入了一个很大的图片, 等到DOM结构加载完成之后,才开始加载背景图片, 所以background-image不会影响网页内容的显示。这样可以减少在页面渲染之前请求的图片数量，提高页面的加载速度。但如果同时加载多张背景图片，也会影响页面性能。-
适用场景:
-
background-image图片内容不是内容的一部分, 属于UI设计装饰性的图片, 所以建议使用background-image -
background-image内容不支持打印。所以如果有打印网页的需求,但是不希望将图片的内容也打印出来, 那么需要使用background-image
-
-