移动端网页性能优化自查表

时间 2019-11-08

标签移动网页性能优化查表栏目无线繁體版

原文原文链接

1、网络加载

一、DNS预加载php

经过dns-prefetch属性可让浏览器提早解析资源或接口对应的服务器IP地址，避免在请求中发起DNS解析请求，节省请求时间css

二、资源预加载html

利用preload，prefetch，preconnect属性咱们能够在<head>内部声明式的书写资源获取请求，提早加载非首屏但又较重要的资源，避免在知足首屏优先加载的状况下，反而忽略了其余次重要资源的加载前端

三、使用CDN资源，而且注意http缓存头的设定webpack

HTTP缓存包括强缓存（Cache-Control，Expire）和协议缓存（Last-modified, Etag）两种。其中，协议缓存资源每次都会像服务端发送请求来判断资源是否过时，未过时则返回304，在网络极其卡顿的状况下，这个304请求有可能堵塞整个页面的资源加载git

四、对JS资源按照模块和首屏需求进行优先加载，不须要的模块按需加载github

移动端的网络资源有限，为了尽快让用户看到有意义的首屏，咱们须要尽量的保持首屏须要加载的资源越小越好web

五、内联首屏关键CSS算法

将首屏关键样式内联至页面中，保证最快速度看到带有基本样式的首屏，避免用户端出现较长时间的白屏时间编程

六、内联关键JS代码

内联关键代码也是为了让用户第一时间感觉到页面已经加载成功，可是内联代码不能将全部代码都内联至HTML中，由于这些代码每次都会伴随HTML下载下来，加大HTML文件的体积，也没法让代码在不一样的网页间提供复用的功能

七、检查服务端下发的资源是否使用GZIP压缩

GZIP对于文本资源（JS，CSS文件）有较高的压缩效率，一般能够减小70%的体积

八、避免资源的重定向

增大加载时间，用户体验较差

九、异步延迟加载第三方非关键代码

移动端网络资源有限，为了让这些不重要的代码不影响首屏渲染，能够延迟一小段时间在加载

十、合理的使用本地缓存，避免把没必要要的数据所有放到COOKIE当中

每一次AJAX请求都会将当前域名中的全部COOKIE值传递给服务端

十一、使用service worker，增长页面的离线体验和页面的加载体验

页面发送请求时，会先通过SW的脚本，这样可让咱们经过编程的方式来制定咱们须要缓存的文件，同时，缓存在service worker中的文件，可让用户离线访问

十二、在条件容许的状况下，可使用HTTP2.0协议

HTTP2.0协议能够提高网络链路的复用性，提高资源加载效率

2、HTML

一、注重标签的语义化，保持用最简洁的标签完成所需的功能

标签的语义化提升代码的可维护性，在页面加载CSS失败时也不至于很难看。同时，须要保持标签最小化，无心义的标签能够利用伪类表示

二、CSS放到head中，JS到body尾部，JS,CSS都须要放在head中时，JS放在前面

一、CSS会阻塞页面的渲染，不阻塞DOM的解析；二、JS会阻塞DOM的解析，可是，浏览器会预先下载资源；三、浏览器在遇到script标签时会触发页面渲染，若是这时CSS还没有加载完成，页面将会等待CSS加载完成后在执行

三、HTML代码压缩，去除注释、空白符

减小网络传输的文件大小

四、尽可能避免使用iframe

iframe 内资源的下载进程会阻塞父页面静态资源的下载与 CSS 及 HTML DOM 的解析

3、CSS

一、压缩CSS代码，排除重复的CSS样式

减小网络传输的文件大小

二、根据组件打包CSS文件

按需加载，减小网络传输的文件大小

三、避免使用CSS的@import语法

可能阻塞页面的加载

四、使用Sass、Stylus、Less等预编译语言时，编码CSS嵌套不超过3层

提升解析css的效率

五、使用autoprefixer给CSS代码自动增长前缀

自动帮助咱们添加浏览器头，避免意想不到的浏览器兼容性问题

六、尽可能少使用css通配符，特别是多层嵌套的末尾使用通配符

CSS的解析过程是从右往左逆向匹配，使用CSS通配符会增长解析的计算量

七、不要滥用高消耗的样式

box-shadow、border-radius、filter这些属性绘制前都须要浏览器进行大量的计算

4、动画

一、简单动画尽可能只使用transform、opacity、transition等属性完成

width、height、top、left、right、bottom、margin等属性的变动都会触发页面的重排，在移动端环境中频繁的重排会致使动画卡顿

二、较复杂动画可使用css帧动画

在移动端兼容性好、性能好、更具备可操控性

三、js动画不要使用setTimeout、setInterval，使用requestAnimationFrame

setTimeout和setInterval在动画执行存在性能问题，且没法准确的控制帧数

四、对将要使用动画的部分，开启GPU硬件加速（注意不要滥用）

对开启GPU硬件加速的标签，浏览器将把他提高到一个单独的图层，并经过GPU进行预处理

五、使用will-change属性（注意不要滥用）

will-change的做用告诉浏览器哪些属性将要变化，让他能够提早作好准备

5、JavaScript

一、JS代码压缩，代码分模块加载

减小代码大小，根据页面需求按需加载资源，最下化用户须要加载的资源大小加快页面展现的速度

二、处理长列表或者大量DOM元素时，不要绑定太多的事件监听函数

节省内存和减小监听事件的注册

三、利用throttle和debounce函数去处理频发触发，可是不须要频发执行的函数，例如scroll,touchmove

避免频繁的无效的操做，避免页面的卡顿

四、利用setTimeout代替setInterval

setInterval可能存在指令堆积的问题，致使页面卡顿

五、尽可能避免大批量的重排重绘

页面的重排重绘很耗性能，尤为是重排

6、图片

一、使用工具压缩图片

移动端网络条件有限，图片越大加载时间越长，合理使用工具压缩图片，能够兼顾图片质量和图片大小

二、使用较高压缩比格式的文件webp

减小文件传输的大小，避免出现图片尺寸使用不当的问题，小icon用大图

三、使用雪碧图

减小http请求数，不过当咱们的http协议升级至1.1，2.0以后，雪碧图减小http请求数的效果并不明显

四、图片懒加载

避免用户提早加载过多无用的资源，浪费用户流量

五、根据不一样的屏幕像素比加载不一样尺寸的图片

在较大像素比的屏幕下加载小尺寸的图片，图片会模糊；在较小像素比的屏幕下加载大尺寸的图片，会浪费用户流量和cdn流量

六、小于2KB的图片能够尝试使用base64格式去替换

将图片转换成base64格式能够减小http请求数量，可是，不能对较大尺寸的图片使用base64格式，由于base64算法会提高三分之一的文件大小

7、字体

一、压缩字库大小，避免加载过多无用的资源，推荐工具字蛛

咱们只须要页面须要的字体文件便可，不须要浪费流量加载用户不须要的资源

二、优化字体的展现策略

使用font-display属性能够避免在字体加载过程当中，不显示文字的问题

三、当特殊文字量较少且内容固定时，能够尝试使用图片代替

快速完美的还原界面

8、其余

一、对于整个页面资源需求量较大时，可使用骨架屏或者增长loading效果

增强用户体验，加速首屏体验，经过有意义的ui让用户提早获得反馈

二、lighthouse性能跑分

Google推出的网页性能跑分工具，能够较全面的了解网站的性能

三、经过Chrome的控制面板code coverage部分，找到未使用代码的比例

帮助咱们快速找到首屏未使用的代码

四、经过构建工具中使用Scope Hoisting

这里以webpack举例，使用Scope Hoisting后打包的文件，文件体积更小，代码运行时建立的函数做用域更少，提高JS的启动速度