前端基础进阶(15):详解 ES6 Modules

2017/07/02 · JavaScript
· es6

原文出处: 波同学   

图片 1

E S 6 M O D U L E S

对于新人朋友来说,想要自己去搞定一个ES6开发环境并不是一件容易的事情,因为构建工具的学习本身又是一个非常大的方向,我们需要花费不少的时间才能掌握它。

好在慢慢的开始有大神提供了一些非常简单易懂,学习成本非常低的解决方案来帮助大家学习。create-react-app就是这些解决方案中,个人认为最简单易懂的一种方式。

所以在学习ES6
modules之前,先跟大家介绍一下create-react-app的安装与使用。

尽管create-react-app的目的是用于开发react程序,但是我们仅仅只用来学习ES6是再合适不过了。当然你也可以借助vue-cli来学习,同样十分简单。

9 种改善 AngularJS 性能的方法

2017/07/20 · JavaScript
· AngularJS

原文出处: Justin
Spencer   译文出处:oschina   

AngularJS 是目前使用非常广泛的 web app
应用框架,随着它的受欢迎程度持续上升 ,期待已久的AngularJS 4.0
诞生了。尽管已经做了很多优化,但几乎每个 Angular
专家仍然在处理使用 AngularJS 中出现的各种各样的问题。

目前,企业使用Web技术用在他们各自项目上,在线业务因此受到了极大影响。因此,有必要深入挖掘影响企业成长的各种因素。

但是,有可能不正确地使用 AngularJS
方法会影响你的应用程序在市场上的排名,因此 AngularJS
性能优化成为每个AngularJS开发专家的重要需求。这就是为什么我们在这个博客中列出了九种提高
AngularJS 性能的方法的原因。

相关阅读:2017 年前 5 大 JavaScript
框架

最近,巴西计算机科学家进行了一项调查,他们发现有关引起AngularJS程序员性能问题的原因的有趣事实。对于AngularJS在现实世界中的性能并没有太多的信息。但是基于调查的研究为此提供了一些证据。

该调查得到下面结果:

图片 2

  • 45%的投票者表示是由于源代码问题影响的性能。
  • 只有 8% 的投票者承认实际上做了改变。
  • 一些受访者指责 AngularJS 的架构。
  • 其中有些则指责不必要的双向绑定。

在对 AngularJS 性能进行了如此多的讨论之后,现在可以看看九种可以改善
AngularJS 性能的方法了。

AngularJS 的性能可以简单地通过它的 digest 周期测量。digest
周期可以被作为一个循环。在这个周期中,Angular
通过所有的 $scopes来检查所有变量的改变。如果$scope.myVar
是定义在控制器(controller)中并且标记为观察,那么 Angular
 将会对myVar更新进行监视,这种监视每迭代循环一次就检查一次。

高性能滚动 scroll 及页面渲染优化

2016/05/18 · JavaScript
· 2 评论 ·
网页渲染

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

最近在研究页面渲染及web动画的性能问题,以及拜读《CSS
SECRET》(CSS揭秘)这本大作。

本文主要想谈谈页面优化之滚动优化。

主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none
优化滚动。因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读。

滚动优化的由来

滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize
这类会频繁触发的事件。简单的看看:

var i = 0; window.addEventListener(‘scroll’,function(){
console.log(i++); },false);

1
2
3
4
var i = 0;
window.addEventListener(‘scroll’,function(){
console.log(i++);
},false);

输出如下:

图片 3

在绑定 scroll 、resize
这类事件时,当它发生时,它被触发的频次非常高,间隔很近。如果事件中涉及到大量的位置计算、DOM
操作、元素重绘等工作且这些工作无法在下一个 scroll
事件触发前完成,就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的,就会持续触发
scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。

在滚动事件中绑定回调应用场景也非常多,在图片的懒加载、下滑自动加载数据、侧边浮动导航栏等中有着广泛的应用。

当用户浏览网页时,拥有平滑滚动经常是被忽视但却是用户体验中至关重要的部分。当滚动表现正常时,用户就会感觉应用十分流畅,令人愉悦,反之,笨重不自然卡顿的滚动,则会给用户带来极大不舒爽的感觉。

滚动与页面渲染的关系

为什么滚动事件需要去优化?因为它影响了性能。那它影响了什么性能呢?额……这个就要从页面性能问题由什么决定说起。

我觉得搞技术一定要追本溯源,不要看到别人一篇文章说滚动事件会导致卡顿并说了一堆解决方案优化技巧就如获至宝奉为圭臬,我们需要的不是拿来主义而是批判主义,多去源头看看。

从问题出发,一步一步寻找到最后,就很容易找到问题的症结所在,只有这样得出的解决方法才容易记住。

说教了一堆废话,不喜欢的直接忽略哈,回到正题,要找到优化的入口就要知道问题出在哪里,对于页面优化而言,那么我们就要知道页面的渲染原理:

浏览器渲染原理我在我上一篇文章里也要详细的讲到,不过更多的是从动画渲染的角度去讲的:《【Web动画】CSS3
3D 行星运转 && 浏览器渲染原理》 。

想了想,还是再简单的描述下,我发现每次 review
这些知识点都有新的收获,这次换一张图,以 chrome 为例子,一个 Web
页面的展示,简单来说可以认为经历了以下下几个步骤:

图片 4

  • JavaScript:一般来说,我们会使用 JavaScript 来实现一些视觉变化的效果。比如做一个动画或者往页面里添加一些 DOM 元素等。
  • Style:计算样式,这个过程是根据 CSS 选择器,对每个 DOM 元素匹配对应的 CSS 样式。这一步结束之后,就确定了每个 DOM 元素上该应用什么 CSS 样式规则。
  • Layout:布局,上一步确定了每个 DOM 元素的样式规则,这一步就是具体计算每个 DOM 元素最终在屏幕上显示的大小和位置。web 页面中元素的布局是相对的,因此一个元素的布局发生变化,会联动地引发其他元素的布局发生变化。比如, 元素的宽度的变化会影响其子元素的宽度,其子元素宽度的变化也会继续对其孙子元素产生影响。因此对于浏览器来说,布局过程是经常发生的。
  • Paint:绘制,本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等,也就是一个 DOM 元素所有的可视效果。一般来说,这个绘制过程是在多个层上完成的。
  • Composite:渲染层合并,由上一步可知,对页面中 DOM 元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,然后显示在屏幕上。对于有位置重叠的元素的页面,这个过程尤其重要,因为一旦图层的合并顺序出错,将会导致元素显示异常。

这里又涉及了层(GraphicsLayer)的概念,GraphicsLayer
层是作为纹理(texture)上传给 GPU 的,现在经常能看到说 GPU
硬件加速,就和所谓的层的概念密切相关。但是和本文的滚动优化相关性不大,有兴趣深入了解的可以自行
google 更多。

简单来说,网页生成的时候,至少会渲染(Layout+Paint)一次。用户访问的过程中,还会不断重新的重排(reflow)和重绘(repaint)。

其中,用户 scroll 和 resize
行为(即是滑动页面和改变窗口大小)会导致页面不断的重新渲染。

当你滚动页面时,浏览器可能会需要绘制这些层(有时也被称为合成层)里的一些像素。通过元素分组,当某个层的内容改变时,我们只需要更新该层的结构,并仅仅重绘和栅格化渲染层结构里变化的那一部分,而无需完全重绘。显然,如果当你滚动时,像视差网站(戳我看看)这样有东西在移动时,有可能在多层导致大面积的内容调整,这会导致大量的绘制工作。

防抖(Debouncing)和节流(Throttling)

scroll 事件本身会触发页面的重新渲染,同时 scroll 事件的 handler
又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作,例如 DOM
操作就不应该放在事件处理中。

针对此类高频度触发事件问题(例如页面 scroll ,屏幕
resize,监听用户输入等),下面介绍两种常用的解决方法,防抖和节流。

防抖(Debouncing)

防抖技术即是可以把多个顺序地调用合并成一次,也就是在一定时间内,规定事件被触发的次数。

通俗一点来说,看看下面这个简化的例子:

// 简单的防抖动函数 function debounce(func, wait, immediate) { //
定时器变量 var timeout; return function() { // 每次触发 scroll handler
时先清除定时器 clearTimeout(timeout); // 指定 xx ms
后触发真正想进行的操作 handler timeout = setTimeout(func, wait); }; };
// 实际想绑定在 scroll 事件上的 handler function realFunc(){
console.log(“Success”); } // 采用了防抖动
window.addEventListener(‘scroll’,debounce(realFunc,500)); //
没采用防抖动 window.addEventListener(‘scroll’,realFunc);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 简单的防抖动函数
function debounce(func, wait, immediate) {
// 定时器变量
var timeout;
return function() {
// 每次触发 scroll handler 时先清除定时器
clearTimeout(timeout);
// 指定 xx ms 后触发真正想进行的操作 handler
timeout = setTimeout(func, wait);
};
};
 
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
console.log("Success");
}
 
// 采用了防抖动
window.addEventListener(‘scroll’,debounce(realFunc,500));
// 没采用防抖动
window.addEventListener(‘scroll’,realFunc);

上面简单的防抖的例子可以拿到浏览器下试一下,大概功能就是如果 500ms
内没有连续触发两次 scroll 事件,那么才会触发我们真正想在 scroll
事件中触发的函数。

上面的示例可以更好的封装一下:

// 防抖动函数 function debounce(func, wait, immediate) { var timeout;
return function() { var context = this, args = arguments; var later =
function() { timeout = null; if (!immediate) func.apply(context, args);
}; var callNow = immediate & !timeout; clearTimeout(timeout); timeout =
setTimeout(later, wait); if (callNow) func.apply(context, args); }; };
var myEfficientFn = debounce(function() { // 滚动中的真正的操作 }, 250);
// 绑定监听 window.addEventListener(‘resize’, myEfficientFn);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 防抖动函数
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate & !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
 
var myEfficientFn = debounce(function() {
// 滚动中的真正的操作
}, 250);
 
// 绑定监听
window.addEventListener(‘resize’, myEfficientFn);

节流(Throttling)

防抖函数确实不错,但是也存在问题,譬如图片的懒加载,我希望在下滑过程中图片不断的被加载出来,而不是只有当我停止下滑时候,图片才被加载出来。又或者下滑时候的数据的
ajax 请求加载也是同理。

这个时候,我们希望即使页面在不断被滚动,但是滚动 handler
也可以以一定的频率被触发(譬如 250ms
触发一次),这类场景,就要用到另一种技巧,称为节流函数(throttling)。

节流函数,只允许一个函数在 X 毫秒内执行一次。

与防抖相比,节流函数最主要的不同在于它保证在 X
毫秒内至少执行一次我们希望触发的事件 handler。

与防抖相比,节流函数多了一个 mustRun 属性,代表 mustRun
毫秒内,必然会触发一次 handler ,同样是利用定时器,看看简单的示例:

// 简单的节流函数 function throttle(func, wait, mustRun) { var timeout,
startTime = new Date(); return function() { var context = this, args =
arguments, curTime = new Date(); clearTimeout(timeout); //
如果达到了规定的触发时间间隔,触发 handler if(curTime – startTime >=
mustRun){ func.apply(context,args); startTime = curTime; //
没达到触发间隔,重新设定定时器 }else{ timeout = setTimeout(func, wait);
} }; }; // 实际想绑定在 scroll 事件上的 handler function realFunc(){
console.log(“Success”); } // 采用了节流函数
window.addEventListener(‘scroll’,throttle(realFunc,500,1000));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 简单的节流函数
function throttle(func, wait, mustRun) {
var timeout,
startTime = new Date();
 
return function() {
var context = this,
args = arguments,
curTime = new Date();
 
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔,触发 handler
if(curTime – startTime >= mustRun){
func.apply(context,args);
startTime = curTime;
// 没达到触发间隔,重新设定定时器
}else{
timeout = setTimeout(func, wait);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
console.log("Success");
}
// 采用了节流函数
window.addEventListener(‘scroll’,throttle(realFunc,500,1000));

上面简单的节流函数的例子可以拿到浏览器下试一下,大概功能就是如果在一段时间内
scroll 触发的间隔一直短于 500ms ,那么能保证事件我们希望调用的 handler
至少在 1000ms 内会触发一次。

使用
rAF(requestAnimationFrame)触发滚动事件

上面介绍的抖动与节流实现的方式都是借助了定时器 setTimeout
,但是如果页面只需要兼容高版本浏览器或应用在移动端,又或者页面需要追求高精度的效果,那么可以使用浏览器的原生方法
rAF(requestAnimationFrame)。

requestAnimationFrame

window.requestAnimationFrame()
这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数。这个方法接受一个函数为参,该函数会在重绘前调用。

rAF 常用于 web
动画的制作,用于准确控制页面的帧刷新渲染,让动画效果更加流畅,当然它的作用不仅仅局限于动画制作,我们可以利用它的特性将它视为一个定时器。(当然它不是定时器)

通常来说,rAF 被调用的频率是每秒 60 次,也就是 1000/60 ,触发频率大概是
16.7ms 。(当执行复杂操作时,当它发现无法维持 60fps
的频率时,它会把频率降低到 30fps 来保持帧数的稳定。)

简单而言,使用 requestAnimationFrame 来触发滚动事件,相当于上面的:

throttle(func, xx, 1000/60) //xx 代表 xx ms内不会重复触发事件 handler

1
throttle(func, xx, 1000/60) //xx 代表 xx ms内不会重复触发事件 handler

简单的示例如下:

var ticking = false; // rAF 触发锁 function onScroll(){ if(!ticking) {
requestAnimationFrame(realFunc); ticking = true; } } function
realFunc(){ // do something… console.log(“Success”); ticking = false;
} // 滚动事件监听 window.addEventListener(‘scroll’, onScroll, false);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var ticking = false; // rAF 触发锁
 
function onScroll(){
  if(!ticking) {
    requestAnimationFrame(realFunc);
    ticking = true;
  }
}
 
function realFunc(){
// do something…
console.log("Success");
ticking = false;
}
// 滚动事件监听
window.addEventListener(‘scroll’, onScroll, false);

上面简单的使用 rAF
的例子可以拿到浏览器下试一下,大概功能就是在滚动的过程中,保持以 16.7ms
的频率触发事件 handler。

使用 requestAnimationFrame
优缺点并存,首先我们不得不考虑它的兼容问题,其次因为它只能实现以 16.7ms
的频率来触发,代表它的可调节性十分差。但是相比 throttle(func, xx, 16.7)
,用于更复杂的场景时,rAF 可能效果更佳,性能更好。

总结一下

  • 防抖动:防抖技术即是可以把多个顺序地调用合并成一次,也就是在一定时间内,规定事件被触发的次数。
  • 节流函数:只允许一个函数在 X
    毫秒内执行一次,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用。
  • rAF:16.7ms 触发一次 handler,降低了可控性,但是提升了性能和精确度。

简化 scroll 内的操作

上面介绍的方法都是如何去优化 scroll 事件的触发,避免 scroll
事件过度消耗资源的。

但是从本质上而言,我们应该尽量去精简 scroll 事件的 handler
,将一些变量的初始化、不依赖于滚动位置变化的计算等都应当在 scroll
事件外提前就绪。

建议如下:

避免在scroll 事件中修改样式属性 / 将样式操作从 scroll
事件中剥离**

图片 5

输入事件处理函数,比如 scroll / touch
事件的处理,都会在 requestAnimationFrame 之前被调用执行。

因此,如果你在 scroll
事件的处理函数中做了修改样式属性的操作,那么这些操作会被浏览器暂存起来。然后在调用 requestAnimationFrame 的时候,如果你在一开始做了读取样式属性的操作,那么这将会导致触发浏览器的强制同步布局。

滑动过程中尝试使用
pointer-events: none 禁止鼠标事件

大部分人可能都不认识这个属性,嗯,那么它是干什么用的呢?

pointer-events 是一个
CSS 属性,可以有多个不同的值,属性的一部分值仅仅与 SVG
有关联,这里我们只关注 pointer-events: none 的情况,大概的意思就是禁止鼠标行为,应用了该属性后,譬如鼠标点击,hover
等功能都将失效,即是元素不会成为鼠标事件的 target。

可以就近 F12 打开开发者工具面板,给
<body>标签添加上 pointer-events: none
样式,然后在页面上感受下效果,发现所有鼠标事件都被禁止了。

那么它有什么用呢?

pointer-events: none 可用来提高滚动时的帧频。的确,当滚动时,鼠标悬停在某些元素上,则触发其上的
hover 效果,然而这些影响通常不被用户注意,并多半导致滚动出现问题。对
body 元素应用 pointer-events: none ,禁用了包括
hover 在内的鼠标事件,从而提高滚动性能。

.disable-hover { pointer-events: none; }

1
2
3
.disable-hover {
    pointer-events: none;
}

大概的做法就是在页面滚动的时候, 给 添加上 .disable-hover
样式,那么在滚动停止之前,
所有鼠标事件都将被禁止。当滚动结束之后,再移除该属性。

可以查看这个
demo
页面。

上面说 pointer-events: none 可用来提高滚动时的帧频
的这段话摘自 pointer-events-MDN ,还专门有文章讲解过这个技术:

使用pointer-events:none实现60fps滚动

这就完了吗?没有,张鑫旭有一篇专门的文章,用来探讨 pointer-events: none
是否真的能够加速滚动性能,并提出了自己的质疑:

pointer-events:none提高页面滚动时候的绘制性能?

结论见仁见智,使用 pointer-events: none
的场合要依据业务本身来定夺,拒绝拿来主义,多去源头看看,动手实践一番再做定夺。

其他参考文献(都是好文章,值得一读):

  • 实例解析防抖动(Debouncing)和节流阀(Throttling)
  • 无线性能优化:Composite
  • Javascript高性能动画与页面渲染
  • Google
    Developers–渲染性能
  • Web高性能动画

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

1、确保自己的本地环境已经安装了node与npm

通常安装的方式就是去node的官方网站下载安装,在安装node的时候,npm也会一起被安装。

下载地址:

1. 用 Batarang 工具来对 Watcher 进行基准测试

对于使用 Angular 的团队来说, Batarang
 是一个不错的开发工具,它可以减少你在调试上的压力。尽管可能有很多新特性,但它们主要还是来帮助你描述和追踪你的 AngularJS
的性能。此外,它是通过监控树来决定哪个范围不被销毁的,例如,通过查看内存使用量是否有增加来决定是否销毁。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 6
图片 7

1 赞 8 收藏 2
评论

2、安装一个好用的命令行工具

在windows环境下,系统默认的cmd非常难用,所以我个人比较推荐大家使用git.bash
或者 cmder。

git 下载地址:
在git安装目录下会有一个bash工具,找到安装目录直接使用即可。

cmder下载地址:

在mac上就方便很多了,你可以直接使用系统自带的terminal工具,就非常好用。但是一般我推荐大家使用iterm2,并安装oh
my
zsh插件。具体的配置大家可以自己去折腾,网上的教程应该足够帮助你搞定这一切了。

  • iterm2 下载地址
  • oh my zsh 主题选择

图片 8

另外还强烈推荐一款超高颜值的终端工具 hyperTerm

这款工具的特色就是颜值高,第一感觉就是惊艳,大家不妨一试。

图片 9

  • hyperTerm 下载地址

2. 使用 Native JavaScript 或 Lodash

Lodash 通过简单地重写一些基本逻辑,而不是依靠内置的 AngularJS
方法来提高应用程序性能。如果你的应用程序中没有包含
Lodash,那么你可能需要重新编写 Native JavaScript 中的所有代码了。

关于作者:chokcoco

图片 10

经不住流年似水,逃不过此间少年。

个人主页 ·
我的文章 ·
63 ·
   

图片 11

3、安装create-react-app

在命令行工具中使用查看版本的方式确保node与npm都安装好之后,我们就可以安装create-react-app了。

> node -v // 输出node版本号 > npm -v // 输出npm版本号

1
2
3
4
5
> node -v
// 输出node版本号
 
> npm -v
// 输出npm版本号

使用npm全局安装create-react-app

> npm install create-react-app -g

1
> npm install create-react-app -g

然后我们就可以使用create-react-app来创建我们的第一个项目。

找到一个你要存放项目的根目录,假设叫做develop,运行以下指令。

> create-react-app es6app

1
> create-react-app es6app

create-react-app会自动帮助我们在develop目录下创建一个叫做es6app的文件夹,这就是我们新创建的项目。

当项目创建完成之后,在命令行工具中,我们会看到如图所示的提示。这些提示告诉了我们如何运行项目npm start
,如何打包项目npm run build等,这里我就不再赘述。

图片 12

项目创建完毕之后,进入该文件夹。

> cd es6app // 查看文件夹里的内容 > ls

1
2
3
4
> cd es6app
 
// 查看文件夹里的内容
> ls

我们会发现里面有一个叫做package.json的文件,这个文件里包含了项目所需要的所有依赖。当我们第一次运行项目之前,还需要安装该文件里的依赖包。

> npm install

1
> npm install

安装完毕之后,我们就可以启动该项目了。

> npm start

1
> npm start

图片 13

项目启动之后

一般来说,启动之后会自动在浏览器中打开。

图片 14

项目首次启动的页面

create-react-app已经自动帮助我们实现了热更新,因此当我们修改代码时,浏览器会自动更新。当然,如果我们仅仅只是修改页面样式时,热更新将会非常方便,但是如果你正在进行单页面的组件开发,可能热更新能够提供的帮助非常有限。

3. Chrome开发工具Profiler,用于识别性能瓶颈

这是一个方便的工具,可让你选择要创建哪个配置文件类型。记录分配时间点、获取堆快照并记录所分配的配置文件用于内存剖析。在这个性能优化之后,你的应用程序将在不到两秒钟内完全呈现,用户可以随意与之进行交互。

4、认识项目

只要我们按照构建工具的规则进行开发,那么构建工具会自动帮助我们将代码进行整合,因此在该项目中开发时,我们并不需要自己来使用script或者link标签来引入js与css,所以认识create-react-app的规则就变得很重要。

初次创建的项目下,会有3个文件夹。

  • node_modules
    项目依赖包存放位置。当我们运行npm install安装package.json中的依赖包时,该文件夹会自动创建,所有的依赖包会安装到该文件夹里。
  • public
    主要的作用是html入口文件的存放。当然我们也可以存放其他公用的静态资源,如图片,css等。其中的index.html就是我们项目的入口html文件
  • src
    组件的存放目录。在create-react-app创建的项目中,每一个单独的文件都可以被看成一个单独的模块,单独的image,单独的css,单独js等,而所有的组件都存放于src目录中,其中index.js则是js的入口文件。虽然我们并没有在index.html中使用script标签引入他,但是他的作用就和此一样。

当然,如果我们要进一步进行react的学习,那么肯定需要了解多一点的规则,但是在学习react之前,我们还是先把ES6
modules的知识搞定在说吧,所以,接下来你要做的事情就是,删掉src目录里的除了index.js之外的所有文件,并清空index.js,我们从0开始学习ES6
modules。

为了确保程序仍然能够正常运行,我们在index.js中随便写点代码测试一下

const app = document.querySelector(‘#root’) app.innerHTML =
‘啊,全部被清空啦,准备工作终于做完了,可以开始学习ES6啦’

1
2
const app = document.querySelector(‘#root’)
app.innerHTML = ‘啊,全部被清空啦,准备工作终于做完了,可以开始学习ES6啦’

图片 15

一切正常,程序变得普通了,我们更容易理解

那么我们就可以在这个环境下学习ES6的所有知识了,当然也包括ES6 modules。

4. 尽量减少观察者

AngularJS 完全围绕在它的 digest cycle 中。每当触发 digest cycle
时,它将循环遍历每个绑定以检测模型变动。通过减少观察者的数量,可以减少每个
digest cycle 中消耗的时间。它还可以减少应用程序的内存占用。

ES6 modules

5. ng-if比ng-show更佳

ng-show 指令在特定元素上切换 CSS 显示属性,而ng-if指令实际上从 DOM
中删除元素,并在需要时重新创建它。此外, ng-switch 指令是 ng-if
的替代方案,它们具有相同的性能。

发表评论

电子邮件地址不会被公开。 必填项已用*标注