共计 1683 个字符，预计需要花费 5 分钟才能阅读完成。
注意: 最好是在修改之后进行前后对比，在使用了优化方法之后和没使用的时候，因为就算使用了优化方式，也不一定会起到性能优化的效果，需要据场景而定。
http 请求过程当中潜在的性能优化点
静态资源一般放到 cdn 加快静态资源的获得，但是当我们 cdn 的域名和页面的域名相同的时候，请求会带上不许不需要的 cookies，所以两者的域名不能一样。
dns 缓存，减少 访问 dns 的时间。
对于接口，我们可以减少 http 请求的数量和大小。
浏览器缓存。
页面渲染过程优化。
使用服务端渲染。
资源压缩与合并
在真实的开发中都是使用构建工具 (webpack、gulp 等) 来完成下面的事情
html 压缩
去掉空格、注释、回车、换行。
使用在线网网站进行压缩(实际公司中不适用)。
使用 nodejs 提供的 html-minifier。
后端模板引擎渲染压缩。
css 压缩
去掉空格、注释、回车、换行无效代码删除语义合并。
使用在线网网站进行压缩(实际公司中不适用)。
使用 nodejs 提供的 html-minifier。
使用 clean-cs 对 css 进行压缩。
js 压缩与混乱
无效字符的删除、剔除注释、代码语义的缩减和优化(如变量名缩短)、代码保护(将 Js 代码混乱，使其不可读)。
使用在线网站进行压缩。
使用 html-minifier。
使用 uglifyjs2 对 js 进行压缩。
文件合并
文件合并可以减少网络请求, 而且浏览器能够同时并发请求有限，当请求过多的时候可能需要等待，文件合并可以减少请求，避免等待。但是存在首屏渲染问题 (第一次请求时间长)、缓存失效(单个文件的缓存失效会导致合并当中其他文件的缓存失效) 的问题。所以有如下的合并建议。
公共库合并: 公共库一般不会变，我们可以将它们进行合并。
不同页面的合并: 针对单页应用，只有当我们跳转到那个页面的时候，才去请求这个页面的资源，将这个页面涉及的资源进行合并。
那么怎么进行文件合并呢? 如下:
使用在线网站进行文件合并。
使用 nodejs 实现文件合并。
图片优化
每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要
jgp 有损压缩
png: 颜色类型丰富的图片，应该选择位数高的 png
png8: 256 色，支持透明
png24: 2^24 色 不支持透明
png32: 2^24 色 支持透明
不同格式图片常用的业务场景
jpg 有损压缩，压缩率高，不支持透明：大部分不需要透明图片的业务场景
png 支持透明，浏览器兼容好: 大部分需要透明图片的业务场景
webp 压缩程度更好，在 ios webview 有兼容性问题: 安卓全部
svg 矢量图，代码内嵌，相对较小，图片样式相对简单的场景: 图片样式相对简单的业务场景
图片压缩
可使用 tinypng 这个网站来压缩
css 雪碧图
把网站上用到的一些图片整合到一张单独的图片当中，从而减少大量的 http 请求的数量。缺点是图片会变大
第一步是将图片合并到一张图片上
第二步是使用在线网站，上传图片，选中指定的图片，然后会有相应的 css。
Image inline
将图片内嵌到 html 当中, 减少网站的 http 请求数量，如使用 base6 的方式插入图片, 一般网站当中一些小的图标可以用它，实际根具情况而定
使用矢量图
使用 svg 进行矢量图的绘制，图片的质量和速度都特别好，使用得也比较多。
寄予页面渲染过程的优化
https://segmentfault.com/a/11…
并发
浏览器对于一个域名的并发请求数量是有限的，所以我们需要设置多个域名，比如 cdn 设置多个域名
懒加载和预加载
懒加载
一般都是对于图片来说，当图片进入可视区域的时候再加载图片
将 url 地址放置到 img 标签当中，当进入可视区的时候，将其取出来设置
预加载
图片等静态资源在使用之前的提前请求
资源使用到的时候从缓存当中加载
有三种方式:
直接在页面上把 img 标签放到前面, 然后 display: none;
var image = new Image(); image.src = xxxx; 使其下载下来，后面使用的时候后会直接去缓存拿
使用 XMLHttpRequset, url 为 image.src 的 url, 可以使用它更加精细的对预加载的过程进行控制
使用 preload.js 库
