前端性能与优化

前端性能优化是什么

什么是Web性能

简单来说就是你的网站够不够快
- 打开速度
- 动画效果
- 列表滚动
- 页面切换
MDN 对于Web性能的定义： Web性能是网站或应用程序的客观度量和可感知的用户体验
- 减少整体加载时间：减小文件体积，减少HTTP请求，使用预加载
- 是网站尽快可用：只加载首屏内容，其它内容根据需要进行懒加载
- 平滑和交互性：使用CSS替代JS动画，减少UI重绘
- 感知表现：你的页面可能不能做的更快，但是你可以让用户感觉更快，耗时操作要给用户反馈（加载动画，性能测试，性能监控持续优化）
- 性能测定：性能指标，性能测试，性能监控持续优化

为什么关注Web性能

用户留存
网站的转化率
体验与传播
搜索排名
客户投诉
提升工作绩效

怎么进行Web性能优化

性能指标，多快才算快
使用专业的工具可量化地评出网站或应用的性能表现
立足于网站页面响应的声明周期，分析出造成较差性能表现的原因
进行技术改造，可行性分析等具体的优化实施
迭代优化

性能指标

RAIL性能模型
基于用户体验的核心指标
新一代的新能指标 Webvitals

我们已经知道性能的重要性，但当我们讨论性能的时候，让一个网页变得更快，具体是指那些？
事实上性能是相对的：

对于一个用户而言，一个网站可能速度很快（在具有功能强大的设备和快速网络上），而对于另个一用户而言，一个站点可能会较慢（在具有低端设备的慢速网络上）
两个站点可能在完全相同的时间内完成加载，但一个站点加载速度会更快（如果它逐步加载内容，而不是等到最后显示任何内容）
一个网站可能会出现快速加载但后来慢慢地响应用户的交互

所以在讨论性能的时候，精确的，可量化的指标很重要。
但是仅仅因为一个度量标准是基于客观标准并且可以定量的度量的，并不意味着这些度量是有用的。
对于Web 开发人员来说，如何衡量一个Web页面的性能一直是一个难题。

最初，我们使用Time to First Byte、 DomContentLoaded 和Load 这些衡量文档加载速度的指标，但他们并不能反映用户的视觉体验。

为了衡量用户视觉体验，Web标准中定义了一些性能指标，这些性能指标被各大浏览器标准实现，例如First Paint 和 First Paint 和First Conentful Paint. 还有一些Web孵化器社区组织（WICG）提出的性能指标，如：Larget Contentful Paint, Time to Interactive, First input Delay, First CPU Idle。另外还有Google 提出的First Meaningful Paint, Speed Index, 百度提出的First Screen Paint。

这些指标并不是毫无关联，而是在以用户为中心的目标中不断演进出来的，有的已经不再建议使用，有的被各种测试工具实现，有的则可以作为通用标准由各大浏览器提供的可用于生产环境测量的API

RAIL

https://web.dev/rail/

Resopnse 响应: 为了让用户感觉是实时交互的建议在50毫秒内处理事件，100毫秒响应用户输入。
Animation 动画：在展示动画的时候为了让用户感觉动画流畅建议用10毫秒生成一帧，留6毫秒给浏览器渲染。
Idle 空闲：最大限度增加空闲时间以提高页面在 50 毫秒内响应用户输入的几率。
Load 加载：在中端设备的首次加载应在5秒或更短是时间完成用户可交互。

FCP

https://web.dev/fcp/

首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，"内容"指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素。

LCP

https://web.dev/lcp/
FID 首次输入延迟，

最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间, 用以估算页面的主要内容对用户可见时间。

会影响LCP的元素。

```元素
内嵌在<svg>元素内的<image>元素
<video>元素（使用封面图像）
通过url()函数（而非使用CSS 渐变）加载的带有背景图像的元素包含文本节点或其他行内级文本元素子元素的块级元素。

为了提供良好的用户体验，网站应该努力将最大内容绘制控制在2.5 秒或以内。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的第 75 个百分位数，且该阈值同时适用于移动和桌面设备。

FID

https://web.dev/fid/

从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。

输入延迟是因为浏览器的主线程正在忙于做其他事情，所以不影响用户。发生这种情况的一个常见的原因是浏览器忙于解析和执行应用程序加载的大量计算的JavaScript。
第一次输入延迟通常发生在第一次绘制FCP和可持续交互时间TTI之间，因为页面已经呈现了一些内容，但还不能可靠地交互。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FID</title>
</head>
<body>
    <h1>First  Input Delay</h1>
    <input type="text">
    <a href="https://web.dev">点击链接</a>
    <oprtion value="">a</oprtion>
    <oprtion value="">b</oprtion>
    <oprtion value="">c</oprtion>
</body>
<script>
    setTimeout(()=>{
        for (let  i = 0; i < 10000000000; i++){}
 
    },0)
</script>
</html>

国内某些社区论坛在跳转第三方网站时异常慢，最初我以为是自己的网络问题，在了解了FID这个概念后，我认为可能是他们为了某些绩效故意增加了FID的时间。

例如，在对用户交互进行响应前，以下所有 HTML 元素都需要等待主线程上正在进行的任务完成运行：

文本字段、复选框和单选按钮 (<input> 、 <textarea>)
下拉选择列表（<select>）
链接 (<a>)
TTI

https://web.dev/tti/

TTI 指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间

CLS

性能如何量化

浏览器DevTools 测试工具
灯塔
WebPageTest

用户输入URL到界面的完全展示到底发生了什么（从前端的生命周期谈性能优化）

截止目前来讲，前端的性能优化主要是指Web性能优化，即围绕“用户输入URL到界面的完全展示到底发生了什么”这个问题进行针对性优化
可以把这个过程概括为 3个阶段：客户端发起请求，服务端数据处理，
客户端发起请求
用户在浏览器输入 URL，经过本地缓存确认是否已经存在这个网站，如果没有，接着会由 DNS 查询从域名服务器获取这个 IP 地址，接下来就是客户端通过 TCP 的三次握手和TLS协商向服务器发起 HTTP 请求建立连接的过程。

扼要地介绍一下优化方面的思路
从发出请求到收到响应的优化，比如DNS查询， HTTP长连接， HTTP 2， HTTP压缩， HTTP缓存
关键渲染路径优化：是否存在不必要的重绘和回流
加载过程的优化，比如延迟加载，是否有有必要在首屏展示的非关键信息，占用了页面加载的时间
资源优化,比如图片、视频等不同的格式类型会有不同的使用场景，在使用的过程中是否恰当
构建优化，比如压缩合并，基于Webpack构建优化方案等

前端的性能如何监测

性能优化小记

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

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

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

缓存
不访问服务器，直接访问本地（cache first），浏览器主导
cache-Control
express

访问服务器，服务器做出决断，是直接返回304 还是200+内容，服务器主导
Etag +IF-None-Match;(Follw服务器的返回code 200?304?)
If-Modified -Since(requests头中) +last-modify（response头中）（fillow对服务器的返回code 200？ 304？）

service worker

 self.addEventListener('install',event =>{
console.log('i have been installed');
});
self.addEventListener('active',event =>{
console.log(' i  have been active');
})

 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

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

image.png

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

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

面向切面开发

index.html

 <script type="text/javascript" src="./aop.js"></script>

aop.js

 function test(){
    alert(2);
    return "me test";
};
Function.prototype.before = function (fn){
    var __self= this;
    return function (){
    if (fn.apply(this.arguments)==false){
        return false;
    }
       return  __self.apply(__self,arguments);
    }
};
Function.prototype.after= function (fn){
    // after 先执行本身this, 再执行回调
    var __self = this;
 
    return function (){
        var result = __self.apply(__self,arguments);
        if(result ==false){
            return false;
        };
        fn.apply(this,arguments);
        return result;
    }
 
};
test.after(function () {
    alert(3);
}).before(function(){
    alert(1);
})();
}

前端性能优化基础
浏览器渲染过程
DNS解析
TCP三次握手
HTTP缓存机制
CDN与集群

浏览器渲染

前端架构与性能优化那些事
刚毕业时可以短时间内选择做B端，但是不要长期做B端，人生工作的前五年尽量不要一直做B端，因为B端项目对性能要求不高且用户必须使用
学徒
压缩合并
一个CDN一般安排5个HTTP请求
gizp 压缩比例在30%左右
webpack gizp之前30kb就不让往前提，如何在nginx上开启gzip压缩
文件在服务端就压缩成gzip
brotli---> 知乎 init.js

 keep alive: http2  多路复用,解决了一个用户占多个服务器请求，造成服务器资源浪费
 
spedy   ----http3
 
离线缓存
 
    Application
        Mainifest: 文件资源有效期无法控制，只能以修改文件名的形式进行更新
        Service Worked： 跟Mainifest作用一样，且可以控制缓存有效期（前端必会点）
    Stroage
        IndexDB : 文档数据库  容量更大
        Session  Storage:  5M
        Local Storage:5M 可以iframe的形式扩容 iframe---cdn-----Postmesage,    低端设备容量超过2.5M后就会卡      Local Storage  会明显减低
        WebSQL： 关系型数据库
 
        浏览器命令行输入  
 
            localStroage
        Q 重

自己实现了 HTTP 协商缓存

缓存优先级
雅虎军规太老了

 //网络类型  虽然不准但是可以用来根据用户网速来加载响应的图片，也可以用来做减版的内容   
navigator.connection
 
————WISE_INFO

通常大公司的同家的公司会在自家的软件上添加后门来获取用户的一些信息，
百度自有的wise 服务，你身边的IP通常是固定的，公司把IP当做关键字段来对应用户的一些身份定位信息--->不在常用地点登录
BFF ---> PHP (2011年PHP做中间层)
JS文件太大了----》把所有的计算逻辑后移，怎么把JS代码翻译成PHP

SPA
我之前面试说SPA绕不开history API，被面试官不以为然，我嗤之以鼻
pushstate
/#a/b

index.html ---> vue.min.js 、 Vue全家桶 ---> runtime.js （webpack核心） --->main.js ---> fetch --->虚拟dom dom diff
dom diff 解决低略的dom操作
大型团队都没有上SSR 因为团队没有能力维护----》
HTML CSS JavaScript 谁先加载谁，谁又能影响谁
渲染是一回事，解析又是另一回事

dom的解析不需要等待js，但是渲染必须要等待js
CSS 会影响js, 因为前端开发者可能会使用就JavaScript去操作css
CSS 会不会影响dom reading
可能会也可能不会
如果在js 在CSS后面则会，因为下面的js可能操作CSS
CSS 阻塞

渲染中的性能优化

什么是重绘
什么是冲排
如何规避

开发一款mini性能监控平台统计(Web项目核心的构建工具只能编译TS，切不需要太多的配置)
开发一个SDK 基础构建包
webpack parcel snowpack esbuild swc vite
webpack 最核心的是用就JavaScript写的
amd.js ,cmd.js, common.js esmodule node
选择 microbundle, 不需要任何的配置
准备上线代码分割成2部分，1部分是原文件 GitHub issues
2 部分直接推到
API Extract tsdocs t.docs
microbundle 生成我们需要的模块化代码
parcel、snowpack 测试开发环境
api-extractor 帮我合成并生成分散的
sourcemap 如果直接被带到了线上，将给公司带来惨痛打击，之前抖音上线了多闪直接把sourcemap上线

sourcemap 是什么

商用代码一定不要上线否则损失巨大，上线 sourcemap生成的；代码大两边
婚礼纪
sentry

 <script>
 
</script>

如何记录用户错误信息

WebRTC理论：出错后让用户再次复现该方法适合脑残粉
视频一帧一帧的图片 html2canvas
[xpath]
html/div[3]/ul .....
无头浏览器 ---> 还原xpath ---> png ---> 合成
代理用户的全部操作
鼠标没有（假的，小圆点）

4-1： html 转换成虚拟dom(唯一ID)
4-2: MutationObserver dom 丝丝变化
4-3：动了dom还原成真实dom
4-5: 表单的少量监听
window.add

rrweb-master

fifate

microbundle 生成我们需要的模块化代码
parcel/snowpack 测试开发环境
api-extractor 帮我合成并生成分散的 d.ts --->index.d.ts --->dist 目录去
typedoc 遵循Tsdoc 规范生成的代码文档gitbopok
性能监控的基本api 错误监控api 还原 sourcemap 回溯用户操作
压缩用数据 --->远程？？

server json 洗数据的过程
1*1 gif a.gif?data=xxx.666.7777
fetch

职场狗人太多了！！！

学习路径 github YouTube 什么库或为什么火，看一些开源库的issue
google 性能大会

为什么前端的单页应用如此垃圾
职场前5年：进大厂赚钱，交朋友

为什么说单页的应用在现在前端开发中占据大量比例
如何让前端干费：让他去写Vue/写小程序

1.spa ---> index.html ---->壳子

2.
min.js 5个jS 是经验值 html 如果加载了 6+ defer async
vue.main.js ---- vue-touter.min.js -- vuex ---> axios ---> ele ui
runtimes.js ----> common.js(业务共用+ 小lib date.js ) ----> main.js(白屏核心问题)

fecth --->虚拟dom ----->dom diff（无用）-------> 不可操作---->事件引擎
mpa 用户等待时间非常render --->大！！ bigpipe
可见可操作 a 链接任何JS 加载JS
SPA + mpa 假路由 historyfallback api/data index/test (分开对待) 404 --->系统首页跳转 vue-router（不常用）
pre-render 无头浏览器
单页性能：SEO ajax 百度支持的不是特别好
升级版本： SPA + MPA 最大优势
直出
bigpipe
判断后端请求头 index/test
直接刷新---》 koa.render/
站内点击 ----》{
html:"",
js:"",
css:""
}vue-router 拦截到pushstate 改变理由， fetch 请求
node.js + vue.js (a.vue / b.vue )

正常的async
html ---------->a.js-------->b.js--------> html
不同的浏览器 async 支持程度不一样
diff :纯异步
a.js b.js
html--------------------------------------

[Isomorphic JavaScript]

spa
mpa
假spa + mpa
真spa + mpa 网络层

页面中的性能

performance
shoope
Lighthouse
loading
scripting
rendering
painting
system idle
total

网页渲染流程 firefox 3d 分层
1-1 获取dom分层
1-2 对每个图层节点结算样式Recalculate Style
1-3 为每个节点生成图形和位置 Layout
1-4 每个节点绘制到图层（即将成为纹理）位图中 Pant
1-5 绘制好的这个图交给GPU 纹理 GPU对他进行旋转缩放
1-6 符合多个图层到页面生成最终的图像 Composite Layers
Composite Layers 它的流程
2-1: 图层通过CPU绘制好的时候，主线程会把图层commit到合成线程
2-2：合成线程根据Viewport 图层进行分块 title 图块大小，256256 ， 512512的
2-3: CPU将小的titles 生成位图，栅格化来生成位图 raster
2-4: 所有的图块被光栅化后，合成线程DrawQuad,然后在交给浏览器进程
2-5：浏览器里面有个viz组件，专门用来接收DrawQuard 将这些页面内容绘制到内存中最终Chrome的应用程序看见页面
2-6：当gpu 接收到CPU传递的位图旋转缩放，先绘制一张低分辨率图出来，继续绘制，OK后就替换掉
Layout
独立成层
根元素 position, transform, 半透明， CSS滤镜， canvas， video， overflow

哪些GPU参与
CSS3D， Video webgl transform css滤镜 will-change:transform

重排必定造成重绘
重绘不一定造成重排

box-sizing : border-box 尽量不引起重排
offset scroll client width/height 会在造成盒模型变大
csstriggers.com

requestAnimationFrame(function(){

})

渲染流程

BFC独立成块

FMP 现在已经被废弃
TTI 读官方文档 web.dev

工作中要学会看火焰图

leader 让弄测试，才下定决心搞storybook

前端性能优化基础
浏览器渲染过程
DNS解析
TCP三次握手
HTTP缓存机制
CDN与集群

浏览器渲染

 keep alive: http2  多路复用,解决了一个用户占多个服务器请求，造成服务器资源浪费
 
spedy   ----http3
 
离线缓存
 
    Application
        Mainifest: 文件资源有效期无法控制，只能以修改文件名的形式进行更新
        Service Worked： 跟Mainifest作用一样，且可以控制缓存有效期（前端必会点）
    Stroage
        IndexDB : 文档数据库  容量更大
        Session  Storage:  5M
        Local Storage:5M 可以iframe的形式扩容 iframe---cdn-----Postmesage,    低端设备容量超过2.5M后就会卡      Local Storage  会明显减低
        WebSQL： 关系型数据库
 
        浏览器命令行输入  
 
            localStroage
        Q 重

自己实现了 HTTP 协商缓存

缓存优先级
雅虎军规太老了

 //网络类型  虽然不准但是可以用来根据用户网速来加载响应的图片，也可以用来做减版的内容   
navigator.connection
 
————WISE_INFO

SPA
我之前面试说SPA绕不开history API，被面试官不以为然，我嗤之以鼻
pushstate
/#a/b

渲染中的性能优化

什么是重绘
什么是冲排
如何规避

开发一款mini性能监控平台统计(Web项目核心的构建工具只能编译TS，切不需要太多的配置)
开发一个SDK 基础构建包
webpack parcel snowpack esbuild swc vite
webpack 最核心的是用就JavaScript写的
amd.js ,cmd.js, common.js esmodule node
选择 microbundle, 不需要任何的配置
准备上线代码分割成2部分，1部分是原文件 GitHub issues
2 部分直接推到
API Extract tsdocs t.docs
microbundle 生成我们需要的模块化代码
parcel、snowpack 测试开发环境
api-extractor 帮我合成并生成分散的
sourcemap 如果直接被带到了线上，将给公司带来惨痛打击，之前抖音上线了多闪直接把sourcemap上线

sourcemap 是什么

商用代码一定不要上线否则损失巨大，上线 sourcemap生成的；代码大两边
婚礼纪
sentry

如何记录用户错误信息

WebRTC理论：出错后让用户再次复现该方法适合脑残粉
视频一帧一帧的图片 html2canvas
[xpath]
html/div[3]/ul .....
无头浏览器 ---> 还原xpath ---> png ---> 合成
代理用户的全部操作
鼠标没有（假的，小圆点）

4-1： html 转换成虚拟dom(唯一ID)
4-2: MutationObserver dom 丝丝变化
4-3：动了dom还原成真实dom
4-5: 表单的少量监听
window.add

rrweb-master

fifate

microbundle 生成我们需要的模块化代码
parcel/snowpack 测试开发环境
api-extractor 帮我合成并生成分散的 d.ts --->index.d.ts --->dist 目录去
typedoc 遵循Tsdoc 规范生成的代码文档gitbopok
性能监控的基本api 错误监控api 还原 sourcemap 回溯用户操作
压缩用数据 --->远程？？

server json 洗数据的过程
1*1 gif a.gif?data=xxx.666.7777
fetch

职场狗人太多了！！！

学习路径 github YouTube 什么库或为什么火，看一些开源库的issue
google 性能大会

为什么前端的单页应用如此垃圾
职场前5年：进大厂赚钱，交朋友

为什么说单页的应用在现在前端开发中占据大量比例
如何让前端干费：让他去写Vue/写小程序

1.spa ---> index.html ---->壳子

fecth --->虚拟dom ----->dom diff（无用）-------> 不可操作---->事件引擎
mpa 用户等待时间非常render --->大！！ bigpipe
可见可操作 a 链接任何JS 加载JS
SPA + mpa 假路由 historyfallback api/data index/test (分开对待) 404 --->系统首页跳转 vue-router（不常用）
pre-render 无头浏览器
单页性能：SEO ajax 百度支持的不是特别好
升级版本： SPA + MPA 最大优势
直出
bigpipe
判断后端请求头 index/test
直接刷新---》 koa.render/
站内点击 ----》{
html:"",
js:"",
css:""
}vue-router 拦截到pushstate 改变理由， fetch 请求
node.js + vue.js (a.vue / b.vue )

正常的async
html ---------->a.js-------->b.js--------> html
不同的浏览器 async 支持程度不一样
diff :纯异步
a.js b.js
html--------------------------------------

[Isomorphic JavaScript]

spa
mpa
假spa + mpa
真spa + mpa 网络层

页面中的性能

performance
shoope
Lighthouse
loading
scripting
rendering
painting
system idle
total

网页渲染流程 firefox 3d 分层
1-1 获取dom分层
1-2 对每个图层节点结算样式Recalculate Style
1-3 为每个节点生成图形和位置 Layout
1-4 每个节点绘制到图层（即将成为纹理）位图中 Pant
1-5 绘制好的这个图交给GPU 纹理 GPU对他进行旋转缩放
1-6 符合多个图层到页面生成最终的图像 Composite Layers
Composite Layers 它的流程
2-1: 图层通过CPU绘制好的时候，主线程会把图层commit到合成线程
2-2：合成线程根据Viewport 图层进行分块 title 图块大小，256256 ， 512512的
2-3: CPU将小的titles 生成位图，栅格化来生成位图 raster
2-4: 所有的图块被光栅化后，合成线程DrawQuad,然后在交给浏览器进程
2-5：浏览器里面有个viz组件，专门用来接收DrawQuard 将这些页面内容绘制到内存中最终Chrome的应用程序看见页面
2-6：当gpu 接收到CPU传递的位图旋转缩放，先绘制一张低分辨率图出来，继续绘制，OK后就替换掉
Layout
独立成层
根元素 position, transform, 半透明， CSS滤镜， canvas， video， overflow

哪些GPU参与
CSS3D， Video webgl transform css滤镜 will-change:transform

重排必定造成重绘
重绘不一定造成重排

box-sizing : border-box 尽量不引起重排
offset scroll client width/height 会在造成盒模型变大
csstriggers.com

requestAnimationFrame(function(){

})

渲染流程

BFC独立成块

FMP 现在已经被废弃
TTI 读官方文档 web.dev

工作中要学会看火焰图

leader 让弄测试，才下定决心搞storybook

一个完善的线上产品，必须有完善的运维体系，才能保证稳定运行，包括服务器监控，报警，以及网络安全预防。
收获什么

为系统增加监控和安全预防
出了问题要第一时间报警，！！！
主要内容
-异常处理和安全预防
监控和报警
关键词
运维,监控,报警,心跳监测，安全
学习方法
要亲手操作
统一异常处理
代码错误的统一处理
dev和测试环境，我们期望尽量详细。具体的暴露出代码的异常，好帮助我们尽快排查、解决问题。
但是线上环境错综复杂，我们无法枚举出会有什么样的异常情况，所以最好的方式就是：统一的异常处理。为每次请求都加一个try ... catch包裹起来，以中间件的方式来实现，代码参考src/middlewares/error.js

预防内存泄漏
在pm2配置中增加max_memory_restart:'300M',这样内存使用超过300M就会自动重启
关于内存泄漏

如果观察pm2重启频繁，那要去排查一下内存泄漏的问题
如果观察pm2重启不频繁，那可以不用着急解决，先观察着再说
安全预防
常见的Web攻击
SQL注入,XSS,CSRF, 网络攻击
SQL注入
使用sequelizer可以防止，不用可以去解决
只要不裸写SQL语句，常见的数据库工具，都可以解决SQL注入的问题
XSS攻击
通过vue和react可以防止， H5也可以通过vue ssr防止
vue 中药输出原生html
优化请求头
使用helement优化请求头

预防网络攻击
DDos： 1. 购买第三方服务 2. 把自己的网站托管到大型网站上去github

短信验证码接口

短信验证码对每天验证码上上限有限制
监控报警

系统出了问题，我一定是第一个知道的人，而不是等着被用户发现
本章产出

为系统指定一套监控和报警机制，让系统时刻在我们的掌控之中
主要内容
心跳监测--->对接口自动定时"体检"
报警---> 出问题第一时间发邮件
alinode 服务器监控---> 实时监测CPU内存，硬盘的健康情况
注意事项
该部分全部免费，可亲自动手练习
学会主动阅读文档，拥抱变化
心跳监测
代码参考heart-beat-check/
pm2配置和package.json的scripts
deploy.sh中运行npm run heart-beat-check

10 min检测一次
定时任务
crontab
nodejs 工具

报警
报警范围

心跳监测
统一异常处理
核心流程

src/vendor/sendMail.js

src/alarm/index.js

为什么要做前端监控

前端监控什么

前端监控怎么做

日志采集 + 日志存储 + 统计分析 + 监控告警
日志采集
对不同类型的日志做公共字段的提取

监控系统代码实例

自己搭建一个监控系统

创业
安装mysql
安装redis
安装nginx

前端性能优化基础

如何告诉别人自己做了性能优化

在XX场景下，遇到了XX性能问题，围绕XX样的性能指标，采取了XX性能优化手段，最后取得了XX样的结果。

为什么前端性能优化被看做是"进阶"知识

性能优化没有体系化的知识
性能监控平台没有参考，需要自己去开发
性能优化的教训需要自己去经历，没有人去分享自己在这方面造成的错误成本
没办法让老板/公司在这方面投入资源

性能优化涉及到哪些知识点

定义性能
性能指标设定--->性能标准确定--->收益评估--->诊断清单--->优化手段--->性能立项--->性能实践
实现性能
指标分解--->指标采集---> SDK 封装---> 统计埋点--->上报--->数据预处理
实施性能检测
性能数据处理后台和性能可视化展现前台两部分。

用户输入URL到页面完全展示发生了什么
浏览器渲染过程
DNS解析
TCP三次握手
HTTP缓存机制
CDN与集群

浏览器渲染

 keep alive: http2  多路复用,解决了一个用户占多个服务器请求，造成服务器资源浪费
 
spedy   ----http3
 
离线缓存
 
    Application
        Mainifest: 文件资源有效期无法控制，只能以修改文件名的形式进行更新
        Service Worked： 跟Mainifest作用一样，且可以控制缓存有效期（前端必会点）
    Stroage
        IndexDB : 文档数据库  容量更大
        Session  Storage:  5M
        Local Storage:5M 可以iframe的形式扩容 iframe---cdn-----Postmesage,    低端设备容量超过2.5M后就会卡      Local Storage  会明显减低
        WebSQL： 关系型数据库
 
        浏览器命令行输入  
 
            localStroage
        Q 重

自己实现了 HTTP 协商缓存

缓存优先级
雅虎军规太老了

 //网络类型  虽然不准但是可以用来根据用户网速来加载响应的图片，也可以用来做减版的内容   
navigator.connection
 
————WISE_INFO

SPA
我之前面试说SPA绕不开history API，被面试官不以为然，我嗤之以鼻
pushstate
/#a/b

渲染中的性能优化

什么是重绘
什么是冲排
如何规避

开发一款mini性能监控平台统计(Web项目核心的构建工具只能编译TS，切不需要太多的配置)
开发一个SDK 基础构建包
webpack parcel snowpack esbuild swc vite
webpack 最核心的是用就JavaScript写的
amd.js ,cmd.js, common.js esmodule node
选择 microbundle, 不需要任何的配置
准备上线代码分割成2部分，1部分是原文件 GitHub issues
2 部分直接推到
API Extract tsdocs t.docs
microbundle 生成我们需要的模块化代码
parcel、snowpack 测试开发环境
api-extractor 帮我合成并生成分散的
sourcemap 如果直接被带到了线上，将给公司带来惨痛打击，之前抖音上线了多闪直接把sourcemap上线

sourcemap 是什么

商用代码一定不要上线否则损失巨大，上线 sourcemap生成的；代码大两边
婚礼纪
sentry

 <script>
 
</script>

如何记录用户错误信息

WebRTC理论：出错后让用户再次复现该方法适合脑残粉
视频一帧一帧的图片 html2canvas
[xpath]
html/div[3]/ul .....
无头浏览器 ---> 还原xpath ---> png ---> 合成
代理用户的全部操作
鼠标没有（假的，小圆点）

4-1： html 转换成虚拟dom(唯一ID)
4-2: MutationObserver dom 丝丝变化
4-3：动了dom还原成真实dom
4-5: 表单的少量监听
window.add

rrweb-master

fifate

microbundle 生成我们需要的模块化代码
parcel/snowpack 测试开发环境
api-extractor 帮我合成并生成分散的 d.ts --->index.d.ts --->dist 目录去
typedoc 遵循Tsdoc 规范生成的代码文档gitbopok
性能监控的基本api 错误监控api 还原 sourcemap 回溯用户操作
压缩用数据 --->远程？？

server json 洗数据的过程
1*1 gif a.gif?data=xxx.666.7777
fetch

职场狗人太多了！！！

学习路径 github YouTube 什么库或为什么火，看一些开源库的issue
google 性能大会

为什么前端的单页应用如此垃圾
职场前5年：进大厂赚钱，交朋友

为什么说单页的应用在现在前端开发中占据大量比例
如何让前端干费：让他去写Vue/写小程序

1.spa ---> index.html ---->壳子

fecth --->虚拟dom ----->dom diff（无用）-------> 不可操作---->事件引擎
mpa 用户等待时间非常render --->大！！ bigpipe
可见可操作 a 链接任何JS 加载JS
SPA + mpa 假路由 historyfallback api/data index/test (分开对待) 404 --->系统首页跳转 vue-router（不常用）
pre-render 无头浏览器
单页性能：SEO ajax 百度支持的不是特别好
升级版本： SPA + MPA 最大优势
直出
bigpipe
判断后端请求头 index/test
直接刷新---》 koa.render/
站内点击 ----》{
html:"",
js:"",
css:""
}vue-router 拦截到pushstate 改变理由， fetch 请求
node.js + vue.js (a.vue / b.vue )

正常的async
html ---------->a.js-------->b.js--------> html
不同的浏览器 async 支持程度不一样
diff :纯异步
a.js b.js
html--------------------------------------

[Isomorphic JavaScript]

spa
mpa
假spa + mpa
真spa + mpa 网络层

页面中的性能

performance
shoope
Lighthouse
loading
scripting
rendering
painting
system idle
total

网页渲染流程 firefox 3d 分层
1-1 获取dom分层
1-2 对每个图层节点结算样式Recalculate Style
1-3 为每个节点生成图形和位置 Layout
1-4 每个节点绘制到图层（即将成为纹理）位图中 Pant
1-5 绘制好的这个图交给GPU 纹理 GPU对他进行旋转缩放
1-6 符合多个图层到页面生成最终的图像 Composite Layers
Composite Layers 它的流程
2-1: 图层通过CPU绘制好的时候，主线程会把图层commit到合成线程
2-2：合成线程根据Viewport 图层进行分块 title 图块大小，256256 ， 512512的
2-3: CPU将小的titles 生成位图，栅格化来生成位图 raster
2-4: 所有的图块被光栅化后，合成线程DrawQuad,然后在交给浏览器进程
2-5：浏览器里面有个viz组件，专门用来接收DrawQuard 将这些页面内容绘制到内存中最终Chrome的应用程序看见页面
2-6：当gpu 接收到CPU传递的位图旋转缩放，先绘制一张低分辨率图出来，继续绘制，OK后就替换掉
Layout
独立成层
根元素 position, transform, 半透明， CSS滤镜， canvas， video， overflow

哪些GPU参与
CSS3D， Video webgl transform css滤镜 will-change:transform

重排必定造成重绘
重绘不一定造成重排

box-sizing : border-box 尽量不引起重排
offset scroll client width/height 会在造成盒模型变大
csstriggers.com

requestAnimationFrame(function(){

})

渲染流程

  BFC独立成块

前端性能优化如何总结

注意总结，截图保存证据
2.注意格式：什么场景下，出现了什么性能问题，围绕什么样的性能指标采取了哪些性能优化手段取得了什么结果

FMP 现在已经被废弃
TTI 读官方文档 web.dev

工作中要学会看火焰图

leader 让弄测试，才下定决心搞storybook

posted @ 2022-07-02 19:30 李老师家的狗阅读(541) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 海报编辑器开发

· HTML CSS JavaScript 基础

· 前端常用性能优化方向

· 【笔记摘要】前端性能

· Web性能优化地图

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称：李老师家的狗
园龄： 6年4个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

李老师家的狗

前端性能与优化

前端性能优化是什么

什么是Web性能

为什么关注Web性能

怎么进行Web性能优化

性能如何量化

用户输入URL到界面的完全展示到底发生了什么（从前端的生命周期谈性能优化）

前端的性能如何监测

性能优化小记

servereorker +app shell

image.png

性能优化如何做

网络

面向切面开发

10 min检测一次
定时任务
crontab
nodejs 工具

为什么要做前端监控

前端监控什么

前端监控怎么做

监控系统代码实例

自己搭建一个监控系统

前端性能优化基础

如何告诉别人自己做了性能优化

为什么前端性能优化被看做是"进阶"知识

性能优化涉及到哪些知识点

前端性能优化如何总结

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>FID</title>
	</head>
	<body>
	<h1>First Input Delay</h1>
	<input type="text">
	<a href="https://web.dev">点击链接</a>
	<oprtion value="">a</oprtion>
	<oprtion value="">b</oprtion>
	<oprtion value="">c</oprtion>
	</body>
	<script>
	setTimeout(()=>{
	for (let i = 0; i < 10000000000; i++){}

	},0)
	</script>
	</html>

	self.addEventListener('install',event =>{
	console.log('i have been installed');
	});
	self.addEventListener('active',event =>{
	console.log(' i have been active');
	})

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

	function test(){
	alert(2);
	return "me test";
	};
	Function.prototype.before = function (fn){
	var __self= this;
	return function (){
	if (fn.apply(this.arguments)==false){
	return false;
	}
	return __self.apply(__self,arguments);
	}
	};
	Function.prototype.after= function (fn){
	// after 先执行本身this, 再执行回调
	var __self = this;

	return function (){
	var result = __self.apply(__self,arguments);
	if(result ==false){
	return false;
	};
	fn.apply(this,arguments);
	return result;
	}

	};
	test.after(function () {
	alert(3);
	}).before(function(){
	alert(1);
	})();
	}

	keep alive: http2 多路复用,解决了一个用户占多个服务器请求，造成服务器资源浪费

	spedy ----http3

	离线缓存

	Application
	Mainifest: 文件资源有效期无法控制，只能以修改文件名的形式进行更新
	Service Worked：跟Mainifest作用一样，且可以控制缓存有效期（前端必会点）
	Stroage
	IndexDB : 文档数据库容量更大
	Session Storage: 5M
	Local Storage:5M 可以iframe的形式扩容 iframe---cdn-----Postmesage, 低端设备容量超过2.5M后就会卡 Local Storage 会明显减低
	WebSQL：关系型数据库

	浏览器命令行输入

	localStroage
	Q 重

	//网络类型虽然不准但是可以用来根据用户网速来加载响应的图片，也可以用来做减版的内容
	navigator.connection

	————WISE_INFO

李老师家的狗

前端性能与优化

前端性能优化是什么

什么是Web性能

为什么关注Web性能

怎么进行Web性能优化

性能如何量化

用户输入URL到界面的完全展示到底发生了什么（从前端的生命周期谈性能优化）

前端的性能如何监测

性能优化小记

servereorker +app shell

image.png

性能优化如何做

网络

面向切面开发

10 min检测一次 定时任务 crontab nodejs 工具

为什么要做前端监控

前端监控什么

前端监控怎么做

监控系统代码实例

自己搭建一个监控系统

前端性能优化基础

如何告诉别人自己做了性能优化

为什么前端性能优化被看做是"进阶"知识

性能优化涉及到哪些知识点

前端性能优化如何总结

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

10 min检测一次
定时任务
crontab
nodejs 工具