前端性能优化整理

daisy
351 阅读28分钟

 从输入URL到浏览器显示页面发生了什么（面试题）

url->DNS域名解析获取IP->建立TCP连接->发起HTTP交易->解析响应->浏览器渲染

响应时间= DNS域名解析时间 + TCP 连接建立时间 + HTTP交易时间

详细过程整理

url: 流览器的书签、历史记录搜索

DNS:解析这个域名: 本地硬盘的 hosts 文件配置->发一个 DNS请求到本地DNS(域名分布系统)服务器(电信/移动提供)->查缓存记录，没有->DNS根服务器,给出域服务器的地址->向域服务器发出请求(.com域服务器)拿到你的域名的解析服务器的地址->发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中

DNS--网络协议

TCP--三次握手

HTTP/SSL

响应解析--SPA ,SSR同构

浏览器渲染 《how browser works》

DNS

网络协议

基于UDP的应用层协议主要有RPC、SNMP、TFTP等。基于TCP的应用层协议主要有TELNET、FTP、SMTP、HTTP

两种报文结构的首部大小不同，UDP：8字节，TCP：20-60字节

**TCP    **(可靠协议，三次握手)           HTTP、FTP、SSH基于TCP

** UDP**（不可靠，发出去基本不管）DNS基于UDP

为什么DNS使用UDP而不是TCP？

IP 寻址

DNS包比较小

滑动窗口协议

滑动窗口传输数据的速率都是根据窗口大小来调整的。可以把窗口理解为一个缓存，而且窗口大小跟MSS是没有任何关系的

预解析技术

DNS预解析dns-prefetch提升页面载入速度优化前端性能

预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验

思考：

1.分片

2.慢启动 让网络包的大小逐渐匹配网速

处理大数据的场景下，都可以借鉴tcp这个优化方法

基于TCP之上的http协议，如果你只是单纯发送一些数据，可以不走http,你可以基于tcp之上定制client 和server

000005hello

http基于TCP 定制了解析的逻辑

method 地址 http/版本
key:value
key:value

body

GET / http/1.1
host
cookie

@next代码的实战，静态资源的缓存

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

小应用：

开发完毕，html css js丢nginx就行

开发完毕，模板都在server(smarty,jsp),静态资源上cdn

大应用：

大公司里怎样开发和部署前端代码？

先上模板（html）还是先上cdn的问题

静态资源contentHash 更好的利用缓存

a_hash1.js  a_hash2.js  (基于md5)

先全量部署cdn静态资源，再灰度部署页面模板

(a?_v=1.0.0 版本号加时间戳加经纬度--不好)

文件冗余：定期删除，半年也就多100M

浏览器缓存逻辑，强缓存，协商缓存

响应解析

SPA SSR

响应报文返回

html在拿到后怎么处理

1.SPA 返回一个空的html,所有逻辑都在js里(vue react默认的)

2.同构 (提高首屏渲染速度+SEO ) (nuxt/ next)

   2.1 需要node环境，应用首屏需要在node里执行渲染一下返回给浏览器

   2.2 后续就是单页的逻辑

(component,数据管理redux，router) 两个入口 entry_client ，entry_server , build两个包，给首屏和后续使用

浏览器解析html css 执行js

1.解析html(AST) dom tree

2. 解析 CSS css tree，css  的选择器优化

3.合并成render tree

4. 浏览调用操作系统渲染

重绘回流

从输入url到页面渲染的时间怎么变短，每一步都有对应的参数指标

同构： 一套代码同时指向client和server

简单粗暴的优化策略

一、文件加载的更少 -文件压缩 cdn

缓存，CDN图片优化--收益最大的优化

  • png 颜色丰富 logo

  • jpeg 大图、轮播图 色彩要求低

  • gif 体积最小 ，发网络请求的占位符，埋点信息

  • webP 兼容性一般 ，适合移动端 chrome

  • 压缩工具

  • 懒加载/渐近加载 ： 先加载站位-》低像素3kb-》实际100kb 用户体验好

  • 谷歌自带性能评分工具：lighthouse 

    npminstall−glighthousenpm install -g lighthouse lighthouse url $ open ./

3. 静态文件优化

  • 代码执行的更少- 节流防抖、 算法优化 数组增删改查优化、vue3的
  1. 节流防抖
  2. 按需执行
  3. 回流和重绘
  4. 框架优化（vue3的静态标记）
  5. html css js 优化 ：减少dom；尽量避免通配符，正则选择器等

4. 浏览器优化

5. 文件合并压缩等雅虎军规常规操作

虚拟滚动

过度优化是万恶之源，要跟业务相关，格式都有自己特点

composition-api.vuejs.org/zh/api.html…

avatar
文章
阅读
粉丝