前端性能优化

HTTP相关

指标：请求个数

• 浏览器对同一个域名有连接数限制，不同浏览器内核、不同版本的请求数不尽相同，大部分的并发请求数是6个
• 控制http请求的数量，减少http请求时间，达到减少网页加载和呈现的时间，能带来更好的用户体验

优化方案:

• **CSS Sprite : **将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分
• **HTML 图像地图 : **小图合并大图，从html代码的方式来控制显示区域
• **js CSS 合并 : **将多个小的js、CSS合并成一个大的js、CSS文件，间接达到减少http请求的目的

---

指标：组件是否压缩

• 增加CPU压缩解压缩时间来减少网络传输消耗，并且通常网络资源较cpu资源更紧张，所以对合适的对象设置压缩能个取得良好的收益

优化方案

• **压缩方法：**在http请求中设置所接受到压缩方式，在Server端对Response资源进行压缩再传给浏览器。一般使用GZIP设置content-Encoding字段
• **压缩对象：**从http请求返回资源中的html，js，CSS，xml等都可以设置压缩，通常通过去掉空格和回车来压缩，再经过GZIP压缩，能达到良好的压缩效果

指标：图片格式和大小是否合适

• **图片格式：**显示效果较好的图片格式中，有webp、jpg和png24/32这几种常见的图片格式。一般来说，webp的图片最小，但在iOS或者android4.0以下的系统中可能会有兼容性问题需要解决。
• **图片尺寸：**这获取图片尺寸时候应该考虑图片具体的展示场景，如当前移动设备中常用个尺寸规格为480×800、600×1024、720×1280，800×1280等，从原图来保证图片能够被呈现，而不是通过代码对图片放大或缩小。
• **图片压缩：**对于jpg，png格式图片来说本身就已经经过了压缩，这对于稀缺的带宽资源是不够的，我们还需要更加优化的压缩算法，通过一系列的图片压缩工具如TinyPNG, Smush.it可以得到更好的压缩且图片质量不变。

指标：CSS放在顶部

• 如果网页是动态生成的，那么在head代码完成后可以页面输出，这样浏览器就会更快地解析出来head中的内容，开始下载CSS文件资源。
• CSS放在底部则会引起重新绘制，用户侧感受到“闪屏”的不好体验。

指标：JS放在底部

• JS在下载的时候会引起两个问题：
• 阻止网页内容的展示并阻止其他资源下载。各种资源的下载是并行的，下载js时候，并行下载机制失效。
• js中可能包括document.write等改变页面布局的操作，渲染引擎会等待js下载完成再开始渲染。用户页面加载时间会因为等待而变得更长

指标：JS &CSS压缩

指标：是否添加缓存

• Cache-Control
• “no-cache”指示请求或响应消息不能缓存（HTTP/1.0用Pragma的no-cache替换）
• “no-store”用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

指标：避免非200返回值

• 状态码：
• 1xx：请求收到，这些状态代码表示临时的响应。
• 2xx：操作成功，这类状态代码表明服务器成功地接受了客户端请求。
• 3xx：重定向，客户端浏览器必须采取更多操作来实现请求。
• 4xx：客户端错误，发生错误，客户端似乎有问题。
• 5xx：服务器错误，服务器由于遇到错误而不能完成该请求。

指标：使用CDN

• CDN内容分发网络（Content Delivery Network）：将源站内容发布到最接近用户的“边缘”节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器能力带来的访问延迟高问题，提供一系列加速解决方案。

---

时间相关

• **白屏时间：**用户首次看到网页有内容的时间，即第一次渲染流程完成时间。
• **首屏时间：**是指用户看到第一屏，即整个网页顶部大小为当前窗口的区域，显示完整的时间。
• **首资源下载时间：**从开始下载到第一个资源均下载完成的时间，不包括页面绘制时间。
• **总资源下载时间：**从开始下载到所有资源均下载完成的时间，不包括页面绘制时间。
• **用户可操作时间：**从页面开始加载到用户操作可响应的时间。

---

WebView相关

• **内存：**加载页面前后内存变化，可间接反映H5中资源数量和大小，如dom数量，图片大小。
• **CPU：**当页面中资源样式复杂，强调视觉效果时，观察CPU占用率来反映H5绘制质量。如果CPU长期处于高占用率，可考虑降低高计算量的视觉效果等手段。
• **FPS：**帧率尤其在有视频和动画效果的H5中，应该重点关注，防止严重的卡顿流出。