认识达内从这里开始

网页性能优化中除了需要关注网页的加载速度以外，同时对于代码的优化也是十分注意的。今天我们就一起来了解一下，移动端网页优化都有哪些要点。

一、网络加载

1.1 DNS预加载

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

1.2 资源预加载

利用preload，prefetch，preconnect属性我们可以在内部声明式的书写资源获取请求，提前加载非屏但又较重要的资源，避免在满足屏优先加载的情况下，反而忽略了其他次重要资源的加载

1.3 使用CDN资源，并且注意http缓存头的设定

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

1.4 对JS资源按照模块和屏需求进行优先加载，不需要的模块按需加载

移动端的网络资源有限，为了尽快让用户看到有意义的屏，我们需要尽可能的保持屏需要加载的资源越小越好

1.5 内联屏关键CSS

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

1.6 内联关键JS代码

内联关键代码也是为了让用户一时间感受到页面已经加载成功，但是内联代码不能将所有代码都内联至HTML中，因为这些代码每次都会伴随HTML下载下来，加大HTML文件的体积，也无法让代码在不同的网页间提供复用的功能

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

GZIP对于文本资源(JS，CSS文件)有较高的压缩效率，通常可以减少70%的体积

1.8 避免资源的重定向

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

1.9 异步延迟加载三方非关键代码

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

1.10 合理的使用本地缓存，避免把不必要的数据全部放到COOKIE当中

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

1.11 使用service worker，增加页面的离线体验和页面的加载体验

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

1.12 在条件允许的情况下，可以使用HTTP2.0协议

HTTP2.0协议可以提升网络链路的复用性，提升资源加载效率

二、HTML

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

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

2.2 CSS放到head中，JS到body尾部，JS,CSS都需要放在head中时，JS放在前面

1、CSS会阻塞页面的渲染，不阻塞DOM的解析;2、JS会阻塞DOM的解析，但是，浏览器会预先下载资源;3、浏览器在遇到script标签时会触发页面渲染，如果这时CSS尚未加载完成，页面将会等待CSS加载完成后在执行

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

减少网络传输的文件大小

2.4 尽量避免使用iframe

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

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!