第18篇—移动端性能优化-CSDN博客

性能优化的几个重要指标

页面加载
图片优化
CSS优化
脚本优化

H5性能考量

浏览器性能
- 传统网站性能检测的几种方式
  - 借助传统的开发者工具查看网络请求，也就是说使用浏览器的开发者工具
  - 使用侵入式的JavaScript代码检测DOM事件的发生
  - 使用第三方的服务工具，例如： webPagetest Pingdom
- 以上的这几种测试方式的测量指标都是比较单一的，基本只是起到流量计算和计时的作用，对于其他一些指标，如电池的状态等方面的测试没有检测体现，而且按照传统的方式是很难实现的
- 为了解决这个问题，W3c推出了一套性能测试API标准，目前各浏览器对这套标准的支持都是非常成熟的，这套标准的目的是简化开发者对网站性能进行精确分析与控制的过程，最终实现性能的提高
- 例如：Navigation Timing API(导航计时),能够帮助网站开发者检测真实用户数据，例如：带宽、延迟或主页的整体加载时间
网络性能
- 为用户节省流量是移动开发中需要考虑的问题，在前端技术中，需要一些既能节省带宽又能让页面体验良好的策略。
- 常见的网路性能问题有以下几种：
  - DNS问题：
    - DNS被劫持或者失效
    - DNS解析慢或者失败
  - TCP连接问题：DNS成功后获得目的IP地址，便可以发起TCP连接，因此TCP连接的成功和耗时也成为网络性能的一个因素。TCP连接中常见的问题有TCP端口被封以及TCP连接超时
  - 传输负载过大：传的多就传的慢，如果没有做特别的优化，传输负载可能会比实际需要的大的多，对于整体网络耗时影响非常大，因此需要特别注意控制页面体积大小，避免负载过大
  - 复杂的国内外网络情况，国内运营商互联和海外访问国内带宽低，传输慢的问题也是非常棘手的。
开发效率
- 开发效率可以从几个方面考虑：更好的代码复用，简洁的页面，模块化
- 库和框架的选型：常见的库：Animate.css、jquery、Vue.js、React.js、underscore.js、Bootstrap、backbone.js、Font Awesome（字体图标库）、zepto.js(主要针对于移动端，和jquery非常相似)、jade | ejs、normalize.css、compass(Sass的工具库)、Angular
- 构建工具
  - webpack:模块打包器，目前使用最广泛的一个
  - gulp.js:基于流的自动化构建工具
- JavaScript/CSS模块发开发：分而治之是软件工程中重要的思想，是复杂系统开发和维护的基石
- 组件化开发：组件化开发具有较高的通用性，无论是前端喧嚷的单页面还是后端模板渲染的多页面应用，组件开发思想都是可以使用的。

加载优化

对于一个移动端产品功能和加载速度是用户体验中不可或缺的一部分，最佳打开时间1-2s。对于网站的开发者来说，提升用户体验是整个网站的核心价值，其中提高网站的加载速度是最基本的用户体验。
减少http请求从下面两方面入手
- 域名收敛：一般情况下一个页面产生的域名解析数不能超过5个
- 减少请求数
  - 将脚本和样式表合并，这就是开发思想中的治，发布的时候需要将多个模块合并成单一的文件，这有webpack帮我们实现
  - CSS Sprites: CSS图片合成技术，将多个小图片可以合并成一个合成图，通过背景定位的方式定位到需要的图片
充分利用缓存
- 使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长cache，长cache资源的更新可以使用不同时间戳来更新。合理设置资源的过期时间，尤其对一些静态的不需要改变的资源，将其缓存时间设置的长一些
- 使用CDN
- 添加缓存头：浏览器通过缓存减少HTTP的请求数量，使得web页面加载更快，对于实时性不高的资源，服务器通过向其设置缓存头部信息，告诉客户端的浏览器可以使用缓存再浏览器本地的组件。
压缩
- 较少资源大小不仅可以减小存储空间，还可以在网络传输文件时较少传输时间，加快网页显示速度，因此要对HTML CSS JavaScript等资源进行代码压缩
- 文本数据压缩：文本数据（HTML CSS JavaScript）的优化与压缩分为3个阶段，即发布准备（去除注释，合并css 去除不被执行的JavaScript代码）、编译期压缩(合并文件，去除空格，混淆)和传输期压缩(gzip)。注意点：gzip是使用无损压缩算法的一种，最早用于Unix系统的文件压缩，它属于服务器端代码压缩，一般纯文本内容可压缩到原大小的40%
- 图片压缩：常见的图片格式.jpeg/.jpg .png .gif webp
- 优化JavaScript加载性能
  - 一个页面从开始到呈现完毕主要经历的四个阶段
  - 无阻塞加载：关键在于页面加载完成后才加载JavaScript代码，这也就以为着window对象的onload事件触发后再下载脚本，defer和async也是可以的方案，但是太老的浏览器不支持这两个属性，需要注意的是在使用async的情况下，js脚本一但下载好就会立即执行，如果js脚本有前后的依赖性，很可能会出错，因此使用过程要小心。
- 首屏加载优化、按需加载
  - 首屏加载因遵循一个“秒出法则”
  - 按需加载的两种实现方式
    - 懒加载：通过相关的懒加载库来实现
    - 响应式加载：通过JavaScript或者媒体查询来判断分辨率，从而实现不同尺寸的图片等对应资源进行加载引入
- 预加载：通过用户行为判断用户下一步可以进行的操作，提前在首屏渲染结束之后预加载相应的资源，实现方式：预加载一个页面：<link rel = "prefetch" href= "www.example.com">，预加载一个图片：<link rel="prefetch" href="image.jpg">。和预加载对应的另一种技术是DNS与解析技术（DNS Prefetch）当用户浏览网页时，浏览器会在加载网页的域名进行解析缓存，这样在用户点击网页中的连接的时候就无需再次进行DNS解析，减少用户等待实现，提高用户体验
其他加载优化
- 优化cookie
  - 众所周知，http是一个无状态协议，所以客户端每次发出请求时，下一次请求无法得知上一次请求所包含的状态数据，如何把一个用户的状态关联起来，cookie是解决这个问题的方法之一，下图是服务器与浏览器之间cookie的处理与传递
  - 通过上图我们可以看出，cookie在访问对应域名下的时候会通过http请求发送到服务器，所以通过合理的设计cookie，减少cookie的体积，能够减少http请求报文的大小，提高响应速度
  - 我们知道一个问题，浏览器发起http请求的时候，都会把cookie也附加上一次发送过去，我们有没有什么办法可以解决，不需要cookie的时候，不要让它发送过去。解决办法就是用专门的主机存储相应的文件。例如用专门的主机存储相关的资源，例如：图片均使用gw.example.coom存储，而JavaScript资源使用g.example.com存储，ajax请求使用api.m.example.com存储，这样在访问这些资源的时候就不会发送多余的cookie
- 避免重定向
  - 重定向是用于将用户从一个URL重新路由到另一个URL。
  - 301：永久重定向，这个状态码表示用户请求的资源被移动到了另外的位置，客户收到此响应后，需要发起另外一个请求去下载所需的资源
  - 302：临时重定向：也需要发起另外一个请求去下载所需的资源
  - 304：Not Modify：主要用于当浏览器在器缓存中保留了一个组件的副本，同时组件已经过期，这是浏览器就会生成一个条件get请求，如果服务器的组件并没有修改过，则会返回304状态码，同时不携带主体，告知浏览器可以重用这个副本，减少响应大小
  - 下图是冲定向对页面的影响

CSS优化

CSS优化目的：不仅仅是减小CSS文件的大小，还能让CSS代码更优条理，更高效，编写好的CSS代码有助于提升网页的渲染速度。实际上，浏览器渲染引擎需要解析的CSS规则越少，性能越好。
页面的渲染过程：
避免在HTML标签中写style属性，一般情况下都是HTML了，CSS分开写，否则会增加HTML的体积，注意点：如果所期望用户只访问一次该页面，例如对于一些临时活动来说绝不会期望有回访客出现，那么使用内联样式能够帮助减少http请求，但这回增加HTML的体积