一、资源传输优化
使用压缩
Gzip，如下所示： 对传输资源进行体积压缩，可高达 90%配置
Nginx启用
Gzip启用
Keep Alive，如下所示： 一个持久的
TCP连接，节省了连接创建时间
Nginx默认开启
Keep AliveHTTP资源缓存，
HTTP缓存是
client、cache、server之间，提高重复访问时资源加载的速度。
HTTP缓存，如下所示：
Cache-Control/ExpriesLast-Modified + If-Modified-SineEtag + If-None-MatchService Workers，如下所示： 加速重复访问离线支持延长了首屏时间，但是页面总加载时间减少兼容性只能在
localhost或
https下使用
HTTP/2的优势，如下所示： 二进制传输请求响应多路复用
Server push搭建
HTTP/2服务，如下所示：
HTTPS适合较高的请求量 服务端渲染
SSR的好处，如下所示： 加速首屏加载更好的
SEO对于
React SSR，可以使基于
Next.js实现
SSR。对于是否使用
SSR，-如下所示： 架构大型、动态页面、面向公众用户搜索引擎排名很重要
二、渲染优化
从
PNG到
IconFont，如下所示： 多个图标到一套字体，减少获取时的请求数量和体积矢量图形，可伸缩直接通过
CSS修改样式，颜色、大小等 从
IconFont到
SVG，如下所示： 保持了图片能力，支持多色彩独立的矢量图形
XML语法，搜索引擎
SEO和无障碍读屏软件读取
Flexbox的优势，如下所示： 更高性能的实现方案容器有能力决定子元素的大小、顺序、对齐、间隔等双向布局
Flexbox的使用，如下所示：
Flex container容器
Flex items元素 优化资源加载的顺序，资源优先级，如下所示： 浏览器默认安排资源加载的优先级使用
preload、prefetch调整优先级
preload和
prefetch适用场景，如下所示：
preload，提前加载较晚出现，但对当前页面非常重要的资源
prefetch，提前加载后继路由需要的资源，优先级低 预渲染页面，预渲染的作用，如下所示： 大型单页应用的性能瓶颈，
JS下载+解析+执行
SSR的主要问题，牺牲
TTFB来补救
First Paint，实现复杂
Pre-rendering打包时提前渲染页面，没有服务端参与 使用
React-Snap，如下所示： 配置
postbuild使用
ReactDOM.hydrate()内联样式，避免明显的
FOUC样式闪动
Windowing窗口化提高列表性能，
windowing的作用，如下所示： 加载大列表、大表单的每一行严重影响性能
Lazy loading仍然会让
DOM变得过大
windowing只渲染可见的行，渲染和滚动的性能都会提升 对于使用
react-window，如下所示： 配置一个一维列表
List配置一个二维列表
Grid配置滚动到指定元素 使用骨架组件减少布局移动，
Skeleton/Placeholder的作用，如下所示： 占位提升用户感知性能 使用
react-placeholder，如下所示： 预置的
placeholders自定义的
placehlder三、Web 加载和渲染原理
对于从输入
URL到页面加载显示完成都发生了什么，如下所示：
UI thread：搜索
or URL-> 搜索引擎
or请求的站点
Network thread：
DNS查找
IP，建立
TLS连接，如果收到 301 再来，然后设置
UA等信息，发送
GET请求，
Web server上的应用处理请求，读取
Response，分析数据类型，安全检查，通知
UI数据准备就绪
Render process：由
UI thread到
Network thread，再到
Main threadMain thread：解析文本构建
DOM，边解析
DOM边加载子资源，
JS阻塞解析
async/defer。然后解析
CSS，计算
computed styles，构造布局树位置和大小
Raster Thread、Compositor Thread：创建绘制记录，确定绘制的顺序，将页面拆分图层，构建图层树，复合线程象素化图层，创建一个复合帧 首屏加载及优化，如下所示：
Web增量加载的特点决定了首屏性能不会完美过长的白屏影响用户体验和留存首屏，相当于初次印象首屏，用户加载体验的3个关键时刻，测量指标，
First Contentful Paint(FCP)、Largest Contentful Paint(LCP)、Time to Interactive(TTI)若资源体积太大，可以使用资源压缩、传输压缩、代码拆分、
Tree shaking、HTTP/2、缓存等若首页内容太多，可以使用路由/组件/内容
lazy-loading、预渲染/
SSR、
Inline CSS等若加载顺序不合适，可以使用
prefetch、preload等
Javascript内存管理，
JS是怎样管理内存的，内存泄露会严重影响性能，什么情况下会造成内存泄露，如下所示： 变量创建时自动分配内存，不使用时自动释放内存，
GC内存释放的主要问题是如何确定不再需要使用的内存所有的
GC都是近似实现，只能通过判断变量是否还能在局部变量，函数执行完，没有闭包引用，就会被标记回收全局变量，直至浏览器卸载页面时释放引用计数，无法解决循环引用的问题标记清除，
MARK到
SWEEP避免意外的全局变量产生避免反复运行引发大量闭包避免脱离的
DOM元素
