服务端渲染 SSR ，客户端渲染 CSR ，静态站点生成 SSG
服务端渲染（SSR）就是在浏览器请求页面 URL 的时候，服务端将我们需要的 HTML 文本组装好，并返回给浏览器，这个 HTML 文本被浏览器解析之后，不需要经过 JavaScript 脚本的下载过程，即可直接构建出我们所希望的 DOM 树并展示到页面中，对首屏加载有要求可以使用。
页面中的大部分DOM元素都是通过Javascript插入的，也就是说，在执行JavaScript脚本之前，HTML 页面已经开始解析并且构建 DOM 树了，JavaScript脚本只是动态的改变 DOM 树的结构，使得页面成为希望成为的样子，这种渲染方式叫动态渲染，客户端渲染 CSR。
SSG技术搭建出的网站，每个页面对应的HTML文档在项目build打包构建时就已经生成好了，用户请求的时候服务端不需要再发送其它请求和进行二次组装，直接将该HTML文档响应给客户端即可，客户端与服务端之间的通信也就变得更加简单，HTML文档既然是在项目打包时就已经生成好了，那么所有用户看到的都只能是同一个页面，就像是一个静态网站一样。
图片处理
使用SVG图片，字体图标，来代替图片。webp格式的图片，它具有更优的图像数据压缩算法，能带来更小的图片体积。图片延迟加载，图片出现在浏览器的可视区域时，才去加载真正的图片。CSS3 效果代替图片。
使用缓存
使用cach-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。强缓存过期时，会使用last-modified或etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应
通过更新页面中引用的资源链接地址，让浏览器主动放弃缓存，加载新资源，具体做法是把资源地址 URL 的修改与文件内容关联起来，也就是说，只有文件内容变化，才会导致相应 URL 的变更（文件内容改变导致hash值改变），从而实现文件级别的精确缓存控制。
网络连接
使用CDN
CDN全称是Content Delivery Network，即内容分发网络，它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度
当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址
资源预加载
preload 作为元素 <link> 的属性 rel的值，表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源，这样做的好处就是让在当前页面中可能被访问到的资源提前加载但并不阻塞页面的初步渲染，进而提升性能。
preconnect是提示浏览器用户可能需要来自目标域名的资源，因此浏览器可以通过抢先启动与该域名的连接来改善用户体验，简单来说就是提前告诉浏览器，在后面的 js 代码中可能会去请求这个域名下对应的资源，你可以先去把网络连接建立好，到时候发送对应请求时也就更加快速。
DNS-prefetch，DNS 预获取是尝试在请求资源之前解析域名，这可能是后面要加载的文件，也可能是用户尝试打开的链接目标，当浏览器从（第三方）服务器请求资源时，必须先将该跨域域名解析为 IP 地址，然后浏览器才能发出请求，预解析域名就是为了在真正发请求的时候减少延迟，从而在一定程度上提高性能。
prefetch 是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器会事先获取和缓存对应资源，优化用户体验。
defer，async，异步加载，主要是script标签
HTTP
HTTP协议上的GZIP编码来压缩文件，Accept-Encoding：gzip。通过打包工具压缩文件
减少重绘重排
改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排，改变字体颜色等，只会导致重绘。
Web Workers
Web Worker 线程独立于主线程之外，它可以执行任务而不干扰用户界面。适用于那些处理纯数据，或者与浏览器 UI 无关的长时间运行脚本。
