此文项目代码：https://github.com/bei-yang/I-want-to-be-an-architect
码字不易，辛苦点个star，感谢！

引言

---

此篇文章主要涉及以下内容：

1. 性能优化宏观概念
2. 代码少执行
3. 缓存

前端性能优化

---

文件获取优化

加载文件css、js

http协议的细节

从输入url到页面渲染完毕，发生了什么

站在前端的角度，回答如下：

1. 用户输⼊入www.baidu.com
2. 浏览器器通过DNS，把url解析为IP
3. 和IP地址建⽴立TCP链接 发送HTTP请求
4. 服务器器接收请求，查库，读⽂文件等，拼接好返回的HTTP响应
5. 浏览器器收到首屏html，开始渲染
6. 解析html为dom
7. 解析css 为css-tree
8. dom+ css ⽣生成render-tree 绘图
9. 加载script的js⽂文件
10. 执⾏行行js

所谓性能优化，就是上面的步骤加一起，事件尽可能的短：

• 少加载文件

• 少执行代码

  
  

DNS

大厂怎么上线前端代码

代码执行优化

节流、防抖

重绘、回流

vue、react（ssr）常见优化（代码执行更少，dom操作更少）

浏览器是如何渲染页面的

网络协议

---

1. ip协议（寻址）47.95.70.218
2. ip协议之上，使用tcp来确保数据的完整有序
   • 三次握手
   • 滑动窗口
   • 慢启动
   • 四次挥手
   • 分包
   • 重发
3. tcp协议之上，我们使用http协议来作为网页传输的协议（应用层）
   http是怎么聊天的
   1. 建立连接
   • 服务器：你在吗
   • 我在
   • 那我要给你发数据了
   2. 请求格式