切记：过度优化是万恶之源

一、从输入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: valuebody

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

前端性能监控

前端性能指标分析
关键性能指标统计
数据上报方式
性能分析工具

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~

开课吧大圣老师性能优化训练营笔记相关推荐

spark写入oracle 优化,spark读写数据库大表分区性能优化
spark读写数据库大表分区性能优化:经常会遇到spark读写数据库再做分析,像mysql或oracle. 在数据量很大的情况下,如果只有一个worker一个excutor一个task,那你excut ...
《嵌入式Linux内存使用与性能优化》笔记
<嵌入式Linux内存使用与性能优化>笔记这本书有两个关切点:系统内存(用户层)和性能优化. 这本书和Brendan Gregg的<Systems Performance>相 ...
Android性能优化典范笔记（1）-GPU绘制性能优化
Android性能优化典范笔记(1)-GPU绘制性能优化你还可以再Github上找到我的这篇文章:https://github.com/onlynight/ReadmeDemo/tree/maste ...
mysql性能优化-学习笔记
mysql性能优化-学习笔记
Java 中 10 大简单的性能优化
点击"终码一生",关注,置顶公众号每日技术干货,第一时间送达! Java 7 ForkJoinPool和 Java 8 的并行Stream有助于并行化东西,这在您将 Java 程 ...
【ELT.ZIP】OpenHarmony啃论文俱乐部——大数据框架性能优化系统
本文出自ELT.ZIP团队,ELT<=>Elite(精英),.ZIP为压缩格式,ELT.ZIP即压缩精英. 成员: 上海工程技术大学大二在校生合肥师范学院大二在校生清华大学大二在校生 ...
mysql性能优化学习笔记
mysql性能优化硬件对数据库的影响 CPU资源和可用内存大小服务器硬件对mysql性能的影响我们的应用是CPU密集型? 我们的应用的并发量如何? 数量比频率更好 64位使用32位的服务器版本 ...
数据库mysql性能优化-学习笔记
数据库mysql性能优化 1. 数据库设计范式 2. 常见关系数据库 3. MySQL 的版本 4. mysql存储计划 5 . mysql查询配置和设置配置 6 . mysql基本参数 7 .m ...
《Java程序性能优化》-笔记
第一章:性能调优概述 1.最有可能成为系统瓶颈的计算资源: 网络操作.磁盘I/O.异常(异常的捕获和处理非常消耗资源).数据库.锁竞争.CPU(计算性程序).内存 2.根据"木桶原理 ...

开课吧大圣老师性能优化训练营笔记

切记：过度优化是万恶之源

一、从输入url到页面显示发生了什么（万能面试题）**

二、前端到底是怎么上线代码的

三、简单粗暴的优化策略

开课吧大圣老师性能优化训练营笔记相关推荐

最新文章

热门文章