这么多前端优化点你都记得住吗？

2．首屏加载和按需加载，非首屏内容滚屏加载，包管首屏内容最小化

因为移动端收集速度相对较慢，收集资本竽暌剐限，是以为了尽快完成页面内容的加载，须要包管首屏加载资本最小化，非首屏内容应用滚动的方法异步加载。一般推荐移动端页面首屏数据展示延时最长不跨越 3 秒。今朝中国联通 3G 的收集速度为 338KB/s（2.71Mb/s），所以推荐首屏所有资本大年夜小不跨越 1014KB，即大年夜约不跨越 1MB。

3．模块化资本并行下载

一般认为，在移动端设置 Viewport 可以加快页面的衬着，同时可以避免缩放导致页面重排重绘。在移动端固定 Viewport 设置的办法如下。

在移动端资本加载中，尽量包管 JavaScript 资本并行加载，重要指的是模块化 JavaScript 资本的异步加载，例如 AMD 的异步模块，应用处行的加载方法可以或许缩短多个文件资本的加载时光。
4．inline 首屏必备的 CSS 和 JavaScript
平日为了在 HTML 加载完成时能使浏览器中有根本的样式，须要将页面衬着时必备的 CSS 和 JavaScript 经由过程 <script> 或 <style> 内联到页面中，避免页面 HTML 载入完成到页面内容展示这段过程中页面出现空白。
<!DOCTYPE html>
<html>
//不推荐
<head>
<meta charset="UTF-8">
<title>样例</title>
<meta >
<style>
对于一些「永远」不会变的图片可以应用强缓存的方法缓存在用户的浏览器上。
/*必备的首屏CSS*/
html,body{
margin:0;
相对于桌面端浏览器，移动端 Web 浏览器上有一些较为明显的特点：设备屏幕较小、新特点兼容性较好、支撑一些较新的 HTML5 和 CSS3 特点、须要与 Native 应用交互等。但移动端浏览器可用的 CPU 计算资本和收集资本极为有限，是以要做好移动端 Web 上的优化往往须要做更多的工作。起首，在移动端 Web 的前端页面衬着中，桌面浏览器端上的优化规矩同样实用，此外针对移动端也要做一些极致的优化来达到更好的效不雅。须要留意的是，并不是移动端的优化原则在桌面浏览器端就不实用，而是因为兼容性和差别性的原因，一些优化原则在移动端更具代表性。
padding:0;
background-color:#ccc;
}
</style>
</head>
<body>
</body>
5．meta dns prefetch 设置 DNS 预解析
设置文件资本的 DNS 预解析，让浏览器提前解析获取静态资本的主机 IP，避免比及请求时才提议 DNS 解析请求。平日在移动端 HTML 中可以采取如下方法完成。
<meta http-equiv="x-dns-prefetch-control" content="on" >
应用 iconfont 体积较小，并且是矢量图，是以缩放时不会掉真；

<link rel="dns-prefetch" href=http://news.51cto.com/art/201711/"//cdn.domain.com" >
6．资本预加载
对于移动端首屏加载后可能会被应用的资本，须要在首屏完成加载后尽快进行加载，包管在用户须要浏览时已经加载完成，这时刻如不雅再去异步请求就显得很慢。
7．合劳顿用 MTU 策略
平日情况下，我们认为 TCP 收集传输的最大年夜传输单位（Maximum Transmission Unit，MTU）为 1500B，即一个 RTT（Round-Trip Time，收集请求往返时光）内可以传输的数据量最大年夜为 1500 字节。是以，在前后端分别的开辟模式中，尽量包管页面的 HTML 内容在 1KB 以内，如许全部 HTML 的内容请求就可以在一个 RTT 内请求完成，最大年夜限度地进步 HTML 载入速度。
缓存类
1．合劳顿用浏览器缓存
除了膳绫擎说到的应用 Cache-Control、Expires、Etag 和 Last-Modified 来设置 HTTP 缓存外，在移动端还可以应用 localStorage 等来保存 AJAX 返回的数据，或者应用 localStorage 保存 CSS 或 JavaScript 静态资本内容，实现移动端的离线应用，尽可能削减收集请求，包管静态资本内容的快速加载。
2．静态资本离线筹划
对于移动端或 Hybrid 应用，可以设置离线文件或离线包机制让静态资本请求大年夜本地攫取，加快资本载入速度，并实现离线更新。关于这块内容，我们会在后面的┞仿节中重点讲解。
页面衬着类
3．测验测验应用 AMP HTML
AMP HTML 可以作为优化前端页面机能的一个解决筹划，应用 AMP Component 中的元素来代替原始的页面元素进行直接衬着。

<video width="400" height="300" src=http://news.51cto.com/art/201711/"//www.domain.com/videos/myvideo.mp4"
poster="path/poster.jpg">
<div fallback>
</div>
CSS 表达式或 CSS 滤镜的解析衬着速度是比较慢的，在有其他解决筹划的情况下应当尽量避免应用。
<source type="video/mp4" src=http://news.51cto.com/art/201711/"foo.mp4">
<source type="video/webm" src=http://news.51cto.com/art/201711/"foo.webm">
</video>

<amp-video width="400" height="300" src=http://news.51cto.com/art/201711/"//www.domain.com/videos/myvideo.mp4"
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
<source type="video/mp4" src=http://news.51cto.com/art/201711/"foo.mp4">
<source type="video/webm" src=http://news.51cto.com/art/201711/"foo.webm">
</amp-video>
4．测验测验应用 PWA 模式
图片类
1．图片紧缩处理
在移动端，平日要包管页面一一切用到的图片都是经由紧缩优化处理的，而不是以原图的情势直接应用的，因为那样很消费流量，并且加载时光更长。
3/5 首页上一页 1 2 3 4 5 下一页尾页

　　推荐阅读

　　从大概率看，你的隐私数据是时代进步的牺牲品！

Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践若何更好地保护小我隐私，是网平易近十分关怀的问题。在大年夜数据时代，人们在网上的一切行动，都在向计>>>详细阅读

本文标题：这么多前端优化点你都记得住吗？

地址：http://www.17bianji.com/lsqh/38705.html

1/2 1