前端优化策略

PC 浏览器前端优化策略

互连网加载类

1.缩减 HTTP 财富请求次数

在前者页面中,平日指出尽量合并静态能源图形、JavaScript 或 CSS
代码,收缩页面请求数和财富请求消耗,那样可以裁减页面第一回访问的用户等待时间。通过打造工具合并七喜图、CSS、JavaScript
文件等都以为了削减 HTTP
能源请求次数。其余也要尽量幸免重复的能源,防止增添多余请求。

2.减小 HTTP 请求大小

除却压缩 HTTP 财富请求次数,也要硬着头皮减小各样 HTTP
请求的轻重。如减弱没须求的图形、JavaScript、CSS 及 HTML
代码,对文本举行压缩优化,只怕使用 gzip
压缩传输内容等都得以用来减小文件大小,减少网络传输等待时延。前面我们采纳营造工具来压缩静态图片能源以及移除代码中的注释并裁减,目的都以为着收缩HTTP 请求的轻重缓急。

3.将 CSS 或 JavaScript 放到外部文件中,幸免采用 <style>或 <script>标签直接引入

在 HTML
文件中援引外部资源得以有效行使浏览器的静态财富缓存,但有时在活动端页面
CSS 或 JavaScript 相比较简单的意况下为了削减请求,也会将 CSS 或 JavaScript
直接写到 HTML 里面,具体要基于 CSS 或 JavaScript
文件的尺寸和业务的情状来分析。即便 CSS 或 JavaScript
文件内容较多,业务逻辑较复杂,提出松开外部文件引入。

  1. <link rel="stylesheet" href="//cdn.domain.com/path/main.css" >

  2. ...

  3. <script src="//cdn.domain.com/path/main.js"></script>

4.幸免页面中空的 href 和 src

当 <link>标签的 href
属性为空,或 <script>、 <img>、 <iframe>标签的 src
属性为空时,浏览器在渲染的经过中仍会将 href 属性或 src
属性中的空内容开展加载,直至加载失败,那样就打断了页面中此外能源的下载进度,而且最后加载到的内容是没用的,因而要尽量防止。

  1. <!--不推荐-->

  2. <img src="" alt="photo" >

  3. <a href="">点击链接</a>

5.为 HTML 指定 Cache-Control 或 Expires

为 HTML 内容设置 Cache-Control 或 Expires 可以将 HTML
内容缓存起来,防止频仍向服务器端发送请求。后边讲到,在页面 Cache-Control
或 Expires
底部有效时,浏览器将一贯从缓存中读取内容,不向劳动器端发送请求。

  1. <meta http-equiv="Cache-Control" content="max-age=7200">

  2. <meta http-equiv="Expires" content="Mon,20Jul201623:00:00GMT">

6.成立设置 Etag 和 Last-Modified

理所当然设置 Etag 和 Last-Modified
使用浏览器缓存,对于未修改的文本,静态财富服务器会向浏览器端重回304,让浏览器从缓存中读取文件,裁减 Web
财富下载的带宽消耗并降低服务器负荷。

  1. <meta http-equiv="last-modified" content="Sun,05 Nov 2017 13:45:57 GMT">

7.调减页面重定向

页面每便重定向都会延伸页面内容重回的等候延时,五次重定向大约要求 200
毫秒不等的大运支出(无缓存),为了确保用户尽快看到页面内容,要尽量防止页面重定向。

8.拔取静态财富分域存放来充实下载并行数

浏览器在同样时刻向同三个域名请求文件的互相下载数是少数的,因而可以应用多少个域名的主机来存放不一致的静态能源,增大页面加载时能源的竞相下载数,减弱页面能源加载的时刻。日常依照多少个域名来分别存储
JavaScript、CSS 和图纸文件。

  1. <link rel="stylesheet" href="//cdn1.domain.com/path/main.css" >

  2. ...

  3. <script src="//cdn2.domain.com/path/main.js"></script>

9.施用静态财富 CDN 来存储文件

尽管条件允许,可以动用 CDN
网络加快同壹个地理区域内再度静态财富文件的响应下载速度,收缩财富请求时间。

10.利用 CDN Combo 下载传输内容

CDN Combo 是在 CDN
服务器端将七个文件请求打包成1个文书的款式来回到的技术,那样可以兑现
HTTP 连接传输的三次性复用,减弱浏览器的 HTTP
请求数,加快能源下载速度。例就好像一个域名 CDN 服务器上的 a.js,b.js,c.js
就足以按如下方式在贰个伸手中下载。

  1. <script src="//cdn.domain.com/path/a.js,b.js,c.js"></script>

11.应用可缓存的 AJAX

对此重回内容一致的伸手,没须求每一次都一直从服务端拉取,合理利用 AJAX
缓存能加速 AJAX 响应速度并减轻服务器压力。

  1. $.ajax({

  2. url : url,

  3. type : 'get',

  4. cache : true, //推荐使用缓存

  5. data : {},

  6. success (){//...},

  7. error (){//...}

  8. });

12.使用 GET 来完成 AJAX 请求

利用 XMLHttpRequest 时,浏览器中的 POST 方法会发起一次 TCP
数据包传输,首头阵送文书头,然后发送 HTTP 正文数据。而选择 GET
时只发送尾部,所以在拉取服务端数据时利用 GET 请求成效更高。

  1. $.ajax({

  2. url : url,

  3. type : 'get', //推荐使用get完成请求

  4. data : {},

  5. success (){//...},

  6. error(){//...}

  7. });

13.减小 Cookie 的分寸并开展 Cookie 隔离

HTTP 请求平时暗中同意带上浏览器端的 Cookie
一起发送给服务器,所以在非需要的动静下,要尽量收缩 Cookie 来减小 HTTP
请求的轻重缓急。对于静态能源,尽量接纳差别的域名来存放,因为 Cookie
专擅认同是无法跨域的,那样就完事了不一致域名下静态能源请求的 Cookie 隔离。

14.缩小 favicon.ico 并缓存

便利 favicon.ico 的再度加载,因为相似三个 Web 应用的 favicon.ico
是很少改变的。

15.推介应用异步 JavaScript 能源

异步的 JavaScript
能源不会堵塞文档解析,所以同意在浏览器中先期渲染页面,延后加载脚本实施。例如
JavaScript 的引用可以如下设置,也可以动用模块化加载机制来兑现。

  1. <script src="main.js" defer></script>

  2. <script src="main.js" async></script>

使用 async 时,加载和渲染后续文档成分的进度和 main.js
的加载与实践是互相的。使用 defer 时,加载后续文档元素的长河和 main.js
的加载是相互的,可是 main.js
的实施要在页面全体因素解析已毕之后才起来推行。

16.革除鸿沟渲染的 CSS 及 JavaScript

对此页面中加载时间过长的 CSS 或 JavaScript
文件,须求进行客观拆分或延后加载,保障重点路径的财富能高效加载成功。

17.防止应用 CSS import 引用加载 CSS

CSS
中的 @import 可以从另3个体制文件中引入样式,但相应幸免那种用法,因为如此会增多
CSS 财富加载的最首要路径长度,带有 @import 的 CSS 样式必要在 CSS
文件串行解析到 @import 时才会加载其它的 CSS 文件,大大延后 CSS
渲染落成的年华。

  1. <!--不推荐-->

  2. <style>

  3. @import "path/main.css";

  4. </style>

  5.  

  6. <!--推荐-->

  7. <link rel="stylesheet" href="//cdn1.domain.com/path/main.css" >

页面渲染类

1.把 CSS 财富引用放到 HTML 文件顶部

一般推荐将有着 CSS 资源尽早内定在 HTML
文档 <head> 中,那样浏览器可以先行下载 CSS 并尽快完毕页面渲染。

2.JavaScript 能源引用放到 HTML 文件底部

JavaScript 财富放到 HTML 文档底部可以免患 JavaScript
的加载和分析执行对页面渲染造成堵塞。由于 JavaScript
能源暗许是分析阻塞的,除非被标记为异步或然经过其余的异步格局加载,否则会阻塞
HTML DOM 解析和 CSS 渲染的长河。

3.尽量事先设定图片等大小

在加载大批量的图纸成分时,尽量预先限定图片的尺码大小,否则在图纸加载进度中会更新图片的排版音信,爆发多量的重排

4.永不在 HTML 中直接缩放图片

在 HTML
中一向缩放图片会导致页面内容的重排重绘,此时或者会使页面中的其余操作暴发卡顿,由此要尽量收缩在页面中一向开展图纸缩放。

5.回落 DOM 成分数量和纵深

HTML 中标签元素越多,标签的层级越深,浏览器解析 DOM
并绘制到浏览器中所花的日子就越长,所以应竭尽维持 DOM
成分简洁和层级较少。

  1. <!--不推荐-->

  2. <div>

  3. <a href="javascript:void(0);">

  4. <img src="./path/photo.jpg" alt="图片">

  5. </a>

  6. </div>

  7.  

  8. <!--推荐-->

  9. <img src="./path/photo.jpg" alt="图片" >

6.尽量防止在接纳器末尾添加通配符

CSS 解析匹配到
渲染树的进程是从右到左的逆向匹配,在采取器末尾添加通配符至少会扩展一倍多计算量。

7.回落使用关系型样式表的写法

直白动用唯一的类名即可最大限度的晋升渲染引擎绘制渲染树等成效

8.尽量压缩使用 JS 动画

JS 直接操作 DOM 极不难招惹页面的重排

9.CSS 动画片使用 translate、scale 代替 top、height

尽只怕采纳 CSS3 的 translate、scale 属性代替 top、left 和
height、width,防止多量的重排统计

10.尽量避免拔取 <table>、 <iframe>

<table> 内容的渲染是将 table 的 DOM
渲染树任何生成完并一遍性绘制到页面上的,所以在长表格渲染时很耗质量,应该尽量幸免使用它,可以考虑接纳列表成分 <ul> 代替。尽量接纳异步的章程动态拉长iframe,因为 iframe 内能源的下载进程会堵塞父页面静态能源的下载与 CSS 及
HTML DOM 的剖析。

11.幸免运营耗时的 JavaScript

长日子运作的 JavaScript 会阻塞浏览器营造 DOM 树、DOM
渲染树、渲染页面。所以,任何与页面初次渲染毫不相关的逻辑作用都应有延迟加载执行,那和
JavaScript 能源的异步加载思路是一致的。

12.防止采纳 CSS 表明式或 CSS 滤镜

CSS 表明式或 CSS
滤镜的辨析渲染速度是相比慢的,在有别的消除方案的情形下应该尽量幸免使用。

  1. //不推荐

  2. .opacity{

  3. filter : progid : DXImageTransform.Microsoft.Alpha( opacity = 50 );

  4. }

移动端浏览器前端优化策略

相对于桌面端浏览器,移动端 Web
浏览器上有一些相比显然的风味:设备屏幕较小、新特点包容性较好、帮助部分较新的
HTML5 和 CSS3 个性、要求与 Native 应用交互等。但活动端浏览器可用的 CPU
计算财富和网络能源极为有限,由此要做好活动端 Web
上的优化往往要求做越来越多的事体。首先,在移动端 Web
的前端页面渲染中,桌面浏览器端上的优化规则一样适用,其余针对移动端也要做一些极其的优化来达到更好的意义。须要留意的是,并不是移动端的优化原则在桌面浏览器端就不适用,而是由于包容性和差距性的由来,一些优化原则在移动端更具代表性。

网络加载类

1.首屏数据请求提前,避免 JavaScript 文件加载后才请求数据

为了尤其进步页面加载速度,可以考虑将页面的数码请求尽可能提前,防止在
JavaScript
加载成功后才去央求数据。平常数据请求是页面内容渲染中第①路径最长的一对,而且不大概互相,所以若是能将数据请求提前,可以极大程度上减弱页面内容的渲染完结时间。

2.首屏加载和按需加载,非首屏内容滚屏加载,保证首屏内容最小化

由于移动端网络速度绝对较慢,网络财富有限,由此为了尽快形成页面内容的加载,必要确保首屏加载财富最小化,非首屏内容使用滚动的艺术异步加载。一般推荐活动端页面首屏数据彰显延时最长不当先3 秒。方今中国电信 3G 的互联网速度为
338KB/s(2.71Mb/s),所以推举首屏全体能源大小不超过 1014KB,即大概不超越1MB。

3.模块化能源互相下载

在移动端能源加载中,尽量确保 JavaScript 能源互相加载,主要指的是模块化
JavaScript 能源的异步加载,例如 英特尔的异步模块,使用并行的加载形式可以缩小多个文本能源的加载时间。

4.inline 首屏必备的 CSS 和 JavaScript

数见不鲜为了在 HTML
加载成功时能使浏览器中有大旨的样式,需求将页面渲染时必备的 CSS 和
JavaScript 通过 <script> 或 <style> 内联到页面中,防止页面 HTML
载入完结到页面内容突显那段进程中页面出现空白。

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>样例</title>

  6. <meta >

  7. <style>

  8. /*必备的首屏CSS*/

  9. html,body{

  10. margin:0;

  11. padding:0;

  12. background-color:#ccc;

  13. }

  14. </style>

  15. </head>

  16. <body>

  17. </body>

  18. </html>

5.meta dns prefetch 设置 DNS 预解析

设置文件财富的 DNS 预解析,让浏览器提前解析获取静态能源的主机
IP,防止等到请求时才发起 DNS 解析呼吁。平日在运动端 HTML
中得以应用如下方式成就。

  1. <!--cdn域名预解析-->

  2. <meta http-equiv="x-dns-prefetch-control" content="on" >

  3. <link rel="dns-prefetch" href="//cdn.domain.com" >

6.能源预加载

对于活动端首屏加载后或然会被拔取的财富,须求在首屏完结加载后尽快开展加载,有限支撑在用户需求浏览时一度加载成功,那时候假如再去异步请求就显得很慢。

7.合理使用 MTU 策略

平日状态下,大家认为 TCP 网络传输的最大传输单元(马克西姆um Transmission
Unit,MTU)为 1500B,即2个 PRADOTT(Round-Trip
Time,网络请求往返时间)内足以传输的数据量最大为 1500
字节。因而,在前后端分离的付出格局中,尽量确保页面的 HTML 内容在 1KB
以内,那样全方位 HTML 的始末请求就可以在一个 PRADOTT
内请求完毕,最大限度地提升 HTML 载入速度。

缓存类

1.靠边施用浏览器缓存

除去上边说到的使用 Cache-Control、Expires、Etag 和 Last-Modified 来安装
HTTP 缓存外,在移动端还可以运用 localStorage 等来保存 AJAX
重临的数目,或然选用 localStorage 保存 CSS 或 JavaScript
静态财富内容,完结活动端的离线应用,尽或然裁减网络请求,保障静态财富内容的很快加载。

2.静态能源离线方案

对于移动端或 Hybrid
应用,可以安装离线文件或离线包机制让静态能源请求从本地读取,加速能源载入速度,并落到实处离线更新。关于这块内容,大家会在末端的章节中主要讲解。

3.品尝使用 AMP HTML

AMP HTML 可以当作优化前端页面质量的三个消除方案,使用 AMP Component
中的成分来代替本来的页面成分举办直接渲染。

  1. <!--不推荐-->

  2. <video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4"

  3. poster="path/poster.jpg">

  4. <div fallback>

  5. <p>Your browser doesn’t support HTML5 video</p>

  6. </div>

  7. <source type="video/mp4" src="foo.mp4">

  8. <source type="video/webm" src="foo.webm">

  9. </video>

  10.  

  11. <!--推荐-->

  12. <amp-video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4"

  13. poster="path/poster.jpg">

  14. <div fallback>

  15. <p>Your browser doesn’t support HTML5 video</p>

  16. </div>

  17. <source type="video/mp4" src="foo.mp4">

  18. <source type="video/webm" src="foo.webm">

  19. </amp-video>

4.品尝选择 PWA 形式

PWA(Progressive Web Apps)是 谷歌 提出的用前沿的 Web 技术为网页提供
App 般使用体验的一文山会海方案。

图片类

1.图形压缩处理

在移动端,平日要有限支撑页面中全部应用的图片都以因此压缩优化处理的,而不是以原图的花样间接使用的,因为那样很用度流量,而且加载时间更长。

2.用到较小的图样,合理运用 base64 内嵌图片

在页面使用的背景图片不多且较小的情事下,可以将图片转化成 base64
编码嵌入到 HTML 页面或 CSS 文件中,那样能够减去页面的 HTTP
请求数。要求专注的是,要力保图片较小,一般图片大小当先 2KB 就不推荐应用
base64 嵌入呈现了。

  1. .class-name{

  2. background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');

  3. }

3.行使更高压缩比格式的图样

行使具有较高压缩比格式的图片,如
webp(须要规划降级包容方案)等。在同等图片画质的状态下,高压缩比格式的图样体量更小,可以更快完毕文件传输,节省网络流量。

  1. <img src="//cdn.domain.com/path/photo.webp" alt="webp格式图片" >

4.图纸懒加载

为了确保页面内容的最小化,加快页面的渲染,尽只怕节约移动端互连网流量,页面中的图片能源推介使用懒加载已毕,在页面滚动时动态载入图片。

  1. <img data-src="//cdn.domain.com/path/photo.jpg" alt="懒加载图片" >

5.使用 MediaQuery 或 srcset 依据不相同屏幕加载不同大小图片

在介绍响应式的章节中大家驾驭到,针对不相同的运动端显示器尺寸和分辨率,输出不一样大小的图纸或背景图能保险在用户体验不下落的前提下节省互联网流量,加速局地机型的图样加载速度,那在移动端格外值得推介。

6.采纳 iconfont 代替图片图标

在页面中尽量接纳 iconfont 来顶替图片图标,那样做的便宜有以下多少个:

  • 行使 iconfont 体量较小,而且是矢量图,因而缩放时不会失真;

  • 能够方便地修改图片大小尺寸和突显颜色。

然则急需专注的是,iconfont 引用不一样 webfont
格式时的包容性写法,根据经验推荐尽量遵从以下依次书写,否则不易于包容到全数的浏览器上。

  1. @font-face{

  2. font-family:iconfont;

  3. src:url("./iconfont.eot");

  4. src:url("./iconfont.eot?#iefix")  format("eot"),

  5. url("./iconfont.woff")  format("woff"),

  6. url("./iconfont.ttf")  format("truetype");

  7. }

7.定义图片大小限制

加载的单张图纸一般指出不当先30KB,防止大图片加载时间长而围堵页面其余能源的下载,由此推荐在 10KB
以内。如果用户上传的图纸过大,提议安装告警系统,支持大家着眼询问全体网站的图样流量情形,做出进一步的精雕细刻。

8.强缓存策略

对此一些「永远」不会变的图片可以利用强缓存的不二法门缓存在用户的浏览器上。

脚本类

1.尽量使用 id

选取器采用页面 DOM 成分时尽量使用 id 拔取器,因为 id 选用器速度最快。

2.成立缓存 DOM 对象

对于须求重复使用的 DOM
对象,要优先设置缓存变量,防止每便使用时都要从整个 DOM 树中另行寻找。

  1. //不推荐

  2. $('#mod.active').remove('active');

  3. $('#mod.not-active').addClass('active');

  4.  

  5. //推荐

  6. let $mod=$('#mod');

  7. $mod.find('.active').remove('active');

  8. $mod.find('.not-active').addClass('active');

3.页面成分尽量使用事件代理,防止直接事件绑定

使用事件代理可防止止对每种成分都开展绑定,并且可以幸免出现内存败露及要求动态添欧成分的风云绑定难点,所以尽或然不要直接接纳事件绑定。

  1. //不推荐

  2. $('.btn').on('click',function(e){

  3. console.log(this);

  4. });

  5.  

  6. //推荐

  7. $('body').on('click','.btn',function(e){

  8. console.log(this);

  9. });

4.使用 touchstart 代替 click

出于移动端屏幕的布置, touchstart 事件和 click 事件触发时间之间存在 300
阿秒的延时,所以在页面中并未落到实处 touchmove 滚动处理的情事下,可以动用
touchstart 事件来代表成分的 click
事件,加快页面点击的响应速度,升高用户体验。但同时大家也要留心页面重叠元素touch 动作的点击穿透难点。

  1. //不推荐

  2. $('body').on('click','.btn',function(e){

  3. console.log(this);

  4. });

  5.  

  6. //推荐

  7. $('body').on('touchstart','.btn',function(e){

  8. console.log(this);

  9. });

5.防止 touchmove、scroll 三番五次事件处理

亟待对 touchmove、scroll
那类恐怕总是触发回调的轩然大波设置事件节流,例如设置每隔 16ms(60
帧的帧间隔为 16.7ms,因而得以合理合法地设置为 16ms
)才举行三遍事件处理,幸免频仍的风浪调用导致移动端页面卡顿。

  1. //不推荐

  2. $('.scroller').on('touchmove','.btn',function(e){

  3. console.log(this);

  4. });

  5.  

  6. //推荐

  7. $('.scroller').on('touchmove','.btn',function(e){

  8. let self=this;

  9. setTimeout(function(){

  10. console.log(self);

  11. },16);

  12. });

6.幸免使用 eval、with,使用 join 代替连接符+,推荐应用 ECMAScript6 的字符串模板

那个都是一些基础的安全脚本编撰难题,尽只怕采用较高功能的特征来形成这一个操作,避免不标准或不安全的写法。

7.尽量行使 ECMAScript6+的表征来编程

ECMAScript6+
一定水准上进一步安全高速,而且部分特征执行进程更快,也是鹏程专业的急需,所以推举使用
ECMAScript6+ 的新特色来已毕前边的开销。

渲染类

1.应用 Viewport 固定显示器渲染,可以加速页面渲染内容

相似认为,在移动端设置 Viewport
可以加快页面的渲染,同时可避防止缩放导致页面重排重绘。在移动端固定
Viewport 设置的主意如下。

  1. <!--设置viewport不缩放-->

  2. <meta >

2.避免各类款式重排重绘

页面的重排重绘很耗品质,所以必然要尽恐怕减弱页面的重排重绘,例如页面图片大小变化、成分地方变动等那个情况都会促成重排重绘。

3.使用 CSS3 动画,开启 GPU 加速

采用 CSS3 动画时方可安装 transform:translateZ(0) 来打开移动装备浏览器的
GPU 图形处理加快,让动画片进程更为流畅,但须求专注的是,在 Native WebView
下 GPU 加快有几率发生 App Crash。

  1. -webkit-transform:translateZ(0);

  2. -ms-transform:translateZ(0);

  3. -o-transform:translateZ(0);

  4. transform:translateZ(0);

4.制造采用 Canvas 和 requestAnimationFrame

分选 Canvas 或 requestAnimationFrame
等更高效的动画落成形式,尽量幸免使用 setTimeout、setInterval
等方法来直接处理三番五次动画。

5.SVG 代替图片

有的状态下得以考虑采纳 SVG 代替图片落成动画,因为使用 SVG
格式内容更小,而且 SVG DOM 结构有利于调整。

6.不滥用 float

在 DOM 渲染树生成后的布局渲染阶段,使用 float
的要素布局总括对比耗品质,所以尽量减弱 float 的应用,推荐应用固定布局或
flex-box 弹性布局的方法来促成页面成分布局。

7.不滥用 web 字体或过多 font-size 注解

过多的 font-size 声明会追加字体的轻重总结,而且也尚未必要的。

8.做好脚本容错

剧本容错可以幸免「非不荒谬环境」的推行错误影响页面的加载和不相干职能的拔取

架构协议类

1.品尝运用 SPDY 和 HTTP2

在规则允许的气象下得以考虑采用 SPDY
协议来拓展文件财富传输,利用一连复用加速传输进度,缩小能源加载时间。HTTP2
在将来也是足以考虑尝试的。

2.利用后端数据渲染

动用后端数据渲染的点子得以加快页面内容的渲染显示,防止空白页面的出现,同时可以化解移动端页面
SEO
的难题。假设条件允许,后端数据渲染是一个很正确的推行思路。后边的章节会详细介绍后端数据渲染的有关内容。

3.用到 NativeView 代替 DOM 的习性逆风局

能够尝试使用 NativeView 的 MNV* 开发格局来避免 HTML DOM
品质慢的题材,最近利用 MNV*
的支出形式已经得以将页面内容渲染体验做到类似客户端 Native
应用的经验了。但需求防止 js Framework 和 native Framework 的再三互动。

总结

本篇内容是在微信公众号上面看到的,保存到此地希望越多关怀这一块的人可以看到。