切记:过度优化是万恶之源
一、从输入url到页面显示发生了什么(万能面试题)**
宏观层面:
- DNS其实也是一个网络协议
把域名变成ip地址,
dns解析后获取到目标地址的ip,我们会基于这个ip地址发起一个TCP的链接 - TCP
TCP三次握手、慢启动、滑动窗口、超时重发···
TCP稳定传输,不会丢包 - HTTP/SSL
跟缓存相关的是在HTTP里完成的,还有HTTPS一些是SSL - 响应解析(SPA,SSR)
如果是SPA,后端直接丢一个空的html,加载一个js、一个css,js执行完成之后,里面会有vue或react…剩下是框架执行的逻辑,框架会解析你的路由,设置你的整个应用的主体,最后调用浏览器把它渲染出来
如果是SSR,那么你的首屏渲染出来的就是有一个完整dom结构的框架,SSR是做首屏渲染的,同构是做后续的交互的 - 浏览器渲染 how browser works
网络协议
url => dns获取ip => 建立tcp => 发起http => 解析响应 => 浏览器渲染
TCP(可靠协议) | UDP (不可靠,发出去基本就不管了) |
---|---|
HTTP, FTP, SSH | DNS |
IP寻址 |
dns-prefresh标签
带来的反思是什么
- tcp分片
- 慢启动,让网络包的大小逐渐匹配网速
处理大数据的场景下,都可以借鉴tcp这个优化的方法
基于TCP之上的http协议,如果你只是单纯的发送一些数据,可以不走http,你可以基于tcp之上自己定制client和server
00005hello
http基于TCP,定制了解析的逻辑
method 地址 http/版本
key: value
key: value
body
GET / http/1.1
host
cookie
@next代码的实战,静态资源的缓存 前端强相关,工程化
二、前端到底是怎么上线代码的
小应用:开发完毕,html,css,JavaScript丢nginx就ok了
开发完毕,模板都在server(smarty,jsp),静态资源上cdn
先上模板(html),还是线上cdn
静态资源contentHash更好的利用缓存
a_hash1.js a_hash2.js a_hash3.js(文件内容改变会生成新的文件不会覆盖老的代码)
a?v=1
a?t=时间戳
a?_g=经纬度
文件冗余:定期删除静态资源
浏览器缓存的逻辑:强缓存、协商缓存
响应解析
响应报文返回
拿到html之后,怎么处理
- spa 返回的是一个空的html 逻辑都在js里(vue react默认的)
- 同构(首屏渲染速度+SEO) (nuxt,next)
1)需要nodejs环境,应用首屏,现在node里执行渲染一下,返回浏览器
首屏渲染速度提高,有利于SEO
2)后续就是单页的逻辑
(component,数据管理,router)两个入口entry_client,entry_server,build两个包,给首屏和后续使用
浏览器解析html css 执行js
- 解析html(AST) dom tree
- 解析css csstree,css的选择器优化
- 合并成render tree
- 浏览器调用操作系统渲染
- 重绘回流
从输入url到页面渲染的时间怎么变短,每一步都有相应的参数指标
@next性能优化的实战 指标
三、简单粗暴的优化策略
1)文件加载的更少:打包压缩gzip vue3内置了一个包 文件合并缓存 cdn
- 缓存(基本已经是最优了),CDN
- 图片优化(JPEG,GIF,PNG,Webp)
合理选择图片的格式,执行起来最简单,收益最大的一个操作
1)JPEG:大一点的图,色彩要求不那么高的
2)PNG:支持的颜色比较丰富,而且支持透明背景,或者是小logo
3)GIF:可以达到体积最小的格式,特别适合做信息分析统计发往的请求的占位符,埋点信息的统计
4)Webp:体积还是色彩丰富程度都比其他的好,但是兼容性一般,兼容不了那么多浏览器,手机可以支持
5)压缩工具,不同尺寸
6)渐进加载(先加载占位 => 低像素 => 实际)
懒加载,
- 静态文件优化
- 浏览器优化
- 文件合并压缩等雅虎军规常规操作
谷歌提供的一个整体的性能监测报告
2)代码执行的更少:节流防抖 算法优化
手动控制首屏请求并发数,无线滚动可以利用虚拟滚动
-
节流防抖:基本操作,面试经常手写
-
按需执行
-
回流重绘:跟浏览器的机制和css的一些属性是强相关的
-
框架优化(比如vue3的静态标记)
-
html、css、JavaScript
代码(基操) -
减少dom
-
尽量避免通配符,正则选择器等
-
css的加载顺序是从右向左
…
浏览器 -
解析html dom
-
解析css css tree
-
合并dom和css tree,render tree
-
计算不聚信息
-
绘制,显示页面
渲染模式 -
服务器直接渲染模板
-
spa
-
同构
-
性能监控指标
-
FP,FCP,FMP,TTI…
-
性能优化实操(指标优化)
-
Lighthouse
前端性能监控
- 前端性能指标分析
- 关键性能指标统计
- 数据上报方式
- 性能分析工具