前端性能

用户输入URL到显示到网页发生了什么

前端的性能如何监测

性能优化小记

微信小程序Liberate: 小程序复用之前H5积累的库？

指标
1. 白屏时间： 用户从点击开始，到能看到页面有展现内容为止。
1. 老师的统计方式
2. 目前主流的方式
2. 首屏时间：用户看到了设备首屏幕，全部渲染完成
1. 老师的的统计方式
2. 新的统计方式
3. 用户可操作时间
4. 页面总下载时间
1. onload -serverGetTime
5. 80分位点
1. 80%的的性能

	connectEnd: 1654435682722
	connectStart: 1654435682722
	domComplete: 1654435683227
	domContentLoadedEventEnd: 1654435683043
	domContentLoadedEventStart: 1654435683043
	domInteractive: 1654435682840
	domLoading: 1654435682782
	domainLookupEnd: 1654435682722
	domainLookupStart: 1654435682722
	fetchStart: 1654435682722
	loadEventEnd: 1654435683227
	loadEventStart: 1654435683227
	navigationStart: 1654435682658
	redirectEnd: 1654435682722
	redirectStart: 1654435682665
	requestStart: 1654435682726
	responseEnd: 1654435682776
	responseStart: 1654435682774
	secureConnectionStart: 0
	unloadEventEnd: 0
	unloadEventStart: 0
- network

74

性能优化
缓存: 不访问服务器直接访问本地

• cache-control :多少秒内缓存是有效的 >Expires， 浏览器站主导地位
• Expires：服务端站主导
  Etag + if-None-Match(fllow)

service worker

self.addEventListener('install',event)

chahe:https://developer.mozilla.org/zh-CN/docs/Web/API/Cache
event.waitUntil(
caches.open(chchesDir)
.then(cahe =>{
const resouceTask = staticAssets.map(uri)
})
)

app.shell

servereorker +app shell

前端性能优化基础
浏览器渲染过程

https://www.w3.org/TR/navigation-timing/
DNS详解
DNS 域名系统 将域名转换为IP

顶级域名 ： baidu.com
域名资源记录
SOA
A 记录
CNAME 记录(别名记录)
NS记录： 用于返回保存下一级信息的服务器记录（服务器记录）
MX
IPv6主机记录（AAAA）
域名服务l器
域名解析t
用户主机----> 本地DNS--->Root Server(TLD Server, Name Servr)
TCP三次握手

image.png

image.png
前端开发高级调试

断点以及捕捉事件绑定

断点
寻找事件监听
DOM元素断点
Audits 和Chrome性能插件

Audits
performanceTracer
Page Speed
performance.timing
Timeline掌控帧渲染模式

网页动画能够做到每秒60帧

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

达到重绘但是不影响重排，并且能够让GPU 参与

image.png

image.png

image.png

3D view
性能优化启示录H5版

image.png

image.png

性能优化如何做

网络

CDN

• 是什么：内容分发网络是利用靠近每一位用户的服务器，更快，更可靠地将文件发送给用户分发网络
• CDN优点：
  • 提速：会给用户指派较近，较顺畅的服务器节点，将数据传输给用户
  • 低成本：服务器被放到不同地点，减少了互联的流量，也降低了带宽成本
  • 高可用：当某个服务器故障时，自动调用邻近地区的服务器
• CDN回源
• 是什么: 浏览器访问CDN集群上静态文件时，文件缓存过期，直接穿透CDN集群而访问源站机器的行为
  CDN 缓存：
• 三级缓存：浏览器本地缓存，CDN边缘节点缓存，CDN源站缓存
• 缓存设置：缓存时间设置过短，CDN边缘节点经常缓存经常失效，导致频繁回流，增大了源站负载，访问也慢；缓存时间设置过长，文件更新慢，用户本地缓存不能及时的更新
• 不同静态资源类型缓存时间
  -HTML： 3分钟
  • JS，CSS： 10分钟， 1天， 30天
    CDN灰度发布
• 原理：在部分地区，部分地区的部分运营上优先发布静态资源，验证通过后，在进行全量发布
• 实施：
  • 域名：域名方面，设置特殊VIP解析至要灰度的城市
  • 运营商: 源站机器方面，给灰度的城市，运营商配置单独的源站机器；灰度城市运营商解析至这些特有机器上

DNS

• 定义：域名系统是将网站域名和IP地址相互映射的一个分布式数据库，能够更方便的访问互联网
• 客户端
  • android:
    • 支持HTTP/2, HTTP/2通过使用多路复用技术在一个单独的TCP连接上支持并发，通过在一个连接上一次性发送多个强求来发送或接收数据
    • 连接池复用
    • GZIP
    • 响应缓存可以完全避免网络重复请求
    • 如果服务器配置了多个IP地址，当第一个IP连接失败的时候，Okhttp会自动尝试下一个IP
  • IOS:
    • App 启动时，缓存所有可能用到的域名IP，同时异步处理，客户端无需得到缓存结果
    • 如果Cache中有此域名的缓存，直接返回缓存的IP
    • 如果缓存中没有此域名，则重新向 HTTPDNS Service进行申请，结果会在此回调中返回
  • 浏览器：
    • 浏览器并发数限制，分布设置成多个域名
    • 户访问：Java PHP等API接口
    • 页面和样式：HTML/js/css
    • 图片：jpg，png, gif

减少Cookie

• 策略:主站首页设计白名单，定期删除白名单
• 好处： 减少页面间传输大小，对Cookie进行有效管理
  减少HTTP请求数
• css sprite
• 图片使用DATA URI， Web Font
• JS/CSS 文件合并
• JS/CSS请求Combo
• 接口合并
• 接口存储LocalStorage
• 静态资源存储LocaStorage