Web
一、性能优化
1.1 性能优化指标
1.2 从全链路角度分析一下性能优化
二、资源加载
2.1 浏览器资源加载优先级别有哪些呢?
一个资源的加载优先级分为五个级别,分别是:
- Highest
- High
- Medium
- Low : 异步/延迟/动态插入的脚本(无论在什么位置)
- Lowest
三、浏览器进程
3.1 浏览器开启 2 个 Tab,它们是属于一个进程还是两个
四、浏览器渲染原理
4.1 输入 URL 之后的过程(页面渲染流程)?
4.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
-
-