注意: 最好是在修改之后进行前后对比，在使用了优化方法之后和没使用的时候，因为就算使用了优化方式，也不一定会起到性能优化的效果，需要据场景而定。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: 颜色类型丰富的图片，应该选择位数高的pngpng8: 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库