第18篇—移动端性能优化

性能优化的几个重要指标

• 页面加载
• 图片优化
• 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的体积
• 引发布局和绘制过程的有一下几方面的缘由:
  • 元素的追加、修改和删除
  • 使用动画
  • 修改样式
  • 修改元素的class属性值
  • hover伪类选择器所触发的元素状态的改变
  • 有用户在input元素中的输入而引发的文字节点的改变
  • 使用offsetWidth、offsetHeight或getComponentedStyle取的样式属性值
  • 文字字体的改变
  • 窗口尺寸的表明
  • 元素透明度的改变
  • 页面或元素内的滚动
• 在移动端中，用户对页面上的操做更加频繁，因此减小布局过程和绘制过程的触发次数是很是重要

图片优化

• 使用CSS3代替图片
  • 使用CSS3代替图片，咱们在开发中可能常常会碰到圆角、阴影、渐变填充等，这些都是可使用纯粹的HTML CSS SVG IconFont等来实现，咱们不妨在使用读片的时候多问本身一句，此处真的须要图片才能实现须要的结果吗？
  • 减小图片能减小http的请求成熟，同时较少页面的大小，更容易维护。
  • 虽然CSS3能够减小http的请求，可是增长了浏览器的处理复合。下面是几个常见CSS3处理时间

    

• 使用Data URL代替图片
  • Data URL给了咱们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不同，在DataURL协议中，图片被转换成base64编码的字符串形式，并存储在URL中
• 使用CSS sprite 或者字体图标
• 使用SVG代替图片
  • IconFont与SVG的对比

    

• 压缩图片格式
  • 若是页面须要显示的效果只能经过图片来表示，那么选择合适的图片格式是图片优化的第一步，下面是一些常见的图片格式

    

• 使用srcset