Webstorm上面通过babel将es6转化为es5 - 简书
Webstorm上面通过babel将es6转化为es5
1.首先创建一个新的文件夹(名为do);
2.然后再根目录下面新建一个package.json,只需要写明两个属性即name和version，这个没有必须要和下面我写的一致，可以自行定义。
"name":"test-project",
"version":"1.0.0"
3.此时打开webstorm的终端(Terminal)，快捷键为Alt+F12,安装babel-cli。
npm install --save-dev babel-cli
4.安装完babel-cli后，可以看到新生成了一个node_modules文件和一个package-lock.json文件，同时发现package.json文件中多出了
"devDependencies": {
"babel-cli": "^6.24.1"
这样一行代码，此代码说明babel-cli已安装成功，形成了依赖。
5.然后再Settings-&Languages & Frameworks中选择Javascript选项，同时将versin版本选择为ECMAScript6即可。这时候在js文件中使用es6的语法已经不会显示红色的报错信息了。
6.再在搜索框中搜索File Watcher，点图中的加号按钮，选择babel就会弹出一个New Watcher窗口，就可以在这里配置了。在配置之前我们还需要在终端安装Babel的preset以正确识别ES6代码，命令如下：
npm install --save-dev babel-preset-es2015
安装完后同时在package.json文件中会多出
"babel-preset-es2015": "^6.24.1"
这样一行代码，说明babel-preset-es2015也成功安装上了。
然后再在根目录下面新建一个名为.babelrc文件，内容如下：
"presets": [
7.现在还剩下最终一步，
（1）首先在Program这项里面放入babel.cmd文件的入径(C:\Users\v_czjzhang\software\Nodejs\babel.cmd)
（2）在Arguments里面，将这段代码
$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015
粘贴覆盖之前的代码，然后点击OK，应用即可。
此时你在根目录下面创建一个名为test.js，在里面写es6的语法，会发现根目录下面会同步多出来一个名为dist的文件，它里面也有名为test.js的文件，这个文件就是es6通过babel编译过来的es5文件，如图所示
可以看到es6文件被编译成es5文件了，而且是默认严格模式。
So，美滋滋！
随着时间的推移，浏览器对ES6支持度已经越来越高了，超过90%的 ES6 语法特性都实现了。虽然有些浏览器对ES6的支持程度已经很高了（Chrome59 97%，Safari10 99%），但是很多人使用的IE对ES6的支持任然很不理想（IE11 11%），所以在实际工程应...
一、ES6 参考 http://es6.ruanyifeng.com/ ECMAScript当前所有提案
Github.com/tc39/ecma262 二、支持能力 http://kangax.github.io/compat-table/es6/ https://gi...
前言 webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用的最多，不过对于很多人来说，vue-cli...
Babel 入门指南 :warning: 注意：Babel 可以与很多构建工具（如 Browserify、Grunt、Gulp 等）进行集成。由于本教程选择 Webpack ，所以只讲解与 Webpack 的集成。想了解如何与其它工具集成，请参考：官方文档 - insta...
如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6（ES2015）的新特性了，设置已经支持了async／await这样的更高级的特性。只是在使用的时候需要在node后面加上参数：--harmony。但是，即使如此node也还是没有支持全部的ES...
哝，一个月前说好要一起努力。买了好几本书也买了笔记，借口挑了好多笔也挑了一些文具。兴冲冲捧起书看了那几页，假装自己努力。可是今天呢？还有好多没有看。哦不是只看了，寥寥几页。理由是什么呢，有好多好多。然后明知道自己懒惰，却又放弃。讨不讨厌这样的自己，讨不讨厌这样的时光，在需要...
一晃元宝就已经三个半月大了。 整三个月的时候，给她打了猫三联的预防针。隔一周又打了第二针。一针100块。据老板介绍，等到大一些了就可以打狂犬疫苗。我是打算在他五个月大的时候给她打疫苗，六个月大去做绝育。正好中间隔开一段时间。 元宝已经充分暴露了小猫咪的天性，到处扑腾。经过这...
我和你虽然从来没有见过面,关于你的一切都是从她那里知道的。但在她口中我知道你是个可爱的小家伙,你也是她们家的一份子。吃饭的时候,会专门为你留个位子。你生气时就会跑到厕所把卷纸弄得满地都是我其实你就是个小淘气,不过却个可爱的小淘气。我想平时你也会撒娇吧,一定很可爱吧。我听她说...
晨读感悟写不出来？不要问自己能不能写出东西来，而应该问问自己为什么写不出东西来，知道为什么，根据原因找对策，可以假设自己即将失去自己的工作，只能靠写晨读感悟来挽回工作，那写还是不写呢？当然是写！找到原因就去解决问题，为什么写不出来，也许是因为读的书太少，肚子里没有墨水，或者...
基本 常见正则文本 |代码|说明||:---|:---:|---:||.|匹配除换行以外的任意字符||\w|匹配字母或数字或下划线或汉字||\s|匹配任意的空白符||\d|匹配数字||\b|匹配单词的开始或结束||^|匹配字符串的开始||$|匹配字符串的结束| |反义|说明...您所在的位置： &
网页重绘和回流以及解决方法
时间： 编辑：likelooker 来源：CnBlogs
浏览器呈现网页的处理流程图：
具体处理步骤：
1.浏览器把获取到的HTML代码解析成一棵DOM树，HTML中的每个标签（tag）都是DOM树中的一个节点，根节点就是我们常用的document对象。DOM树里包含了HTML所有标签，包括display：none隐藏，还有用JS动态添加的元素等；
2.浏览器把所有样式（用户定义的css和用户代理）解析成样式结构体，在解析过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而Firefox会去掉_开头的样式；
3.DOM树和样式结构体组合后构建render tree（渲染树），render tree类似于DOM树，但区别很大，render tree 能识别样式，render tree的每一个节点都有自己的样式，而且render tree中不包含隐藏的节点（比如display：none的节点，还有head节点），因为这些节点不会用于呈现，而且不会影响呈现。
注意：visibility：hidden隐藏的元素还是会包含到render tree中，因为visibility：hidden会影响布局（layout），会占有空间。根据css2的标准，render tree中的每个节点都称为Box（Box demensions）,理解页面元素为一个具有填充，边距，边框和位置的盒子。
4.一旦render tree构建完成后，浏览器就可以根据render tree来绘制页面了。
重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility，outline，背景色属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
回流是更明显的一种改变，可以理解为render tree需要重新计算。每个页面至少需要一次回流，就是在页面加载的时候。
注意：回流必将引起重绘，但重绘不一定引起回流。
1.调整窗口大小（Resizing the windown）;
2.改变字体（changing the font）;
3.增加或移除样式表（adding or removing a stylesheet）；
4.内容变化，比如用户在input输入框中输入文字（content changes ,such as a user typing text in an input box）；
5.激活css伪类，比如：hover（IE中为兄弟节点伪类的激活）（activation of css pseudo classes such as :hover (in IE the activation of the pseduo class of a silibing)）;
6.操作class属性（manipulating the class attribute）；
7.脚本操作DOM（a script& manipulating the DOM）；
8.计算offsetWidth和offsetHeight属性（calculating offsetWidth and offsetHeight）；
9.设置style属性的值（setting a property of the style attribute）。
如何减少回流和重绘
1.直接改变className,如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；
// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px";// 比较好的写法
el.className += " className1";
// 比较好的写法
el.style.cssText += ";
left: " + left + "
top: " + top + "";
&2.让操作的元素进行&离线处理&，处理完后一次更新；
使用DocumentFragment进行缓存操作，引发一次回流和重绘；
使用display：none属性，只引发两次回流和重绘；
使用cloneNode（true or false）和replaceChild技术，引发一次回流和重绘。
3.不要经常访问会引起浏览器flush队列的属性，如果你确定要缓存，利用缓存；
// 不好的写法
for(循环) {
el.style.left = el.offsetLeft + 5 + "px";
el.style.top = el.offsetTop + 5 + "px";
// 这样写好点
var left = el.offsetLeft,
top = el.offsetTop,
for (循环) {
left += 10;
top += 10;
s.left = left + "px";
s.top = top + "px";
&4.让元素脱离动画流，减少回流的render tree的规模；
$("#block1").animate({left:50});
$("#block2").animate({marginLeft:50});
5.尽可能在DOM树的最末端改变class（可限制回流的范围）；
6.避免设置多层内联样式（将样式合并在一个外部类，仅产生一次回流）；
7.动画效果应用到position属性为absolute或fixed的元素上（动画效果应用到position属性为absolute或fixed的元素上，它们不影响其他元素的布局，所它他们只会导致重新绘制，而不是一个完整回流。这样消耗会更低。）；
8.牺牲平滑度换取速度（Opera还建议我们牺牲平滑度换取速度，其意思是指您可能想每次1像素移动一个动画，但是如果此动画及随后的回流使用了 100%的CPU，动画就会看上去是跳动的，因为浏览器正在与更新回流做斗争。动画元素每次移动3像素可能在非常快的机器上看起来平滑度低了，但它不会导 致CPU在较慢的机器和移动设备中抖动。）；
9.避免使用table数据（在布局完全建立之前，table经常需要多个关口，因为table是个和罕见的可以影响在它们之前已经进入的DOM元素的显示的元素。）；
10.避免使用css的JavaScript表达式（因为他们每次重新计算文档，或部分文档、回流。正如我们从所有的很多事情看到的：引发回流，它可以每秒产生成千上万次。）。
实例测试一：
测试代码不改变元素的规则，大小，位置。只改变颜色，所以不存在回流，仅测试重绘，代码如下：
&script type="text/javascript"&
var s = document.body.
if (document.body.currentStyle) {
computed = document.body.currentS
computed = document.defaultView.getComputedStyle(document.body, '');
function testOneByOne(){
s.color = 'red';;
tmp = computed.backgroundC
s.color = 'white';
tmp = computed.backgroundI
s.color = 'green';
tmp = computed.backgroundA
function testAll() {
s.color = 'yellow';
s.color = 'pink';
s.color = 'blue';
tmp = computed.backgroundC
tmp = computed.backgroundI
tmp = computed.backgroundA
color test &br /&
&button &Test One by One&/button&
&button &Test All&/button&
&实例测试二：
跟第一次测试的代码很类似，但加上了对layout的改变，为的是测试回流。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&script type="text/javascript"&
var s = document.body.
if (document.body.currentStyle) {
computed = document.body.currentS
computed = document.defaultView.getComputedStyle(document.body, '');
function testOneByOne(){
s.color = 'red';
s.padding = '1px';
tmp = computed.backgroundC
s.color = 'white';
s.padding = '2px';
tmp = computed.backgroundI
s.color = 'green';
s.padding = '3px';
tmp = computed.backgroundA
function testAll() {
s.color = 'yellow';
s.padding = '4px';
s.color = 'pink';
s.padding = '5px';
s.color = 'blue';
s.padding = '6px';
tmp = computed.backgroundC
tmp = computed.backgroundI
tmp = computed.backgroundA
color test &br /&
&button &Test One by One&/button&
&button &Test All&/button&
&避免回流和重绘的次数可从代码的角度来实现性能优化，因此我们在写代码时应尽量使用上诉方法来减少网页回流和重绘的次数。
热门关键字vue在IE和360兼容模式下无法显示问题
360兼容模式下报错：[vuex] vuex requires a Promise polyfill in this browser.
360浏览器中包含了两个浏览器
一个是IE（Trident内核），即兼容模式，在使用网银时需要切换为兼容模式
一个是Chrome（Chrommium内核），即极速模式，普通浏览时使用
Chrome：51 版起便可以支持 97% 的 ES6 新特性。Firefox：53 版起便可以支持 97% 的 ES6 新特性。Safari：10 版起便可以支持 99% 的 ES6 新特性。IE：Edge 15可以支持 96% 的 ES6 新特性。Edge
14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）
babel-polyfill 是针对全局环境的，引入它浏览器就好像具备了规范里定义的完整的特性，一旦引入，就会跑一个 babel-polyfill 实例。用法如下：
1.安装 babel-polyfill
npm install babel-polyfill --save
2.在入口文件中引用：
import 'babel-polyfill'
针对ES6的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的ES6语法转换成ES5，相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel，jsx，traceur，es6-shim等。
法一：webpack.base.conf.js中配置
app: ["babel-polyfill","./src/main.js"],
"./src/main.js",
"babel-polyfill":"babel-polyfill"
法二：在main.js中引入
import 'babel-polyfill'
但上述方法都未生效！
本人亲测下列两种方法可行：
法一：webpack.base.conf.js中配置
// "babel-polyfill"用来解决的兼容性
app: ['./node_modules/babel-polyfill/dist/polyfill.js','./src/main.js']
直接引入：
&script src=""&&/script&
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！用百度云登录，一直显示网络异常1，怎么解决_百度知道
该问题可能描述不清，建议你
用百度云登录，一直显示网络异常1，怎么解决
我有更好的答案
打开百度网盘客户端，点右上角设置，选择正确的代理则OK
打开任意浏览器，在工具→Internet选项→安全，将里面的级别都调到最低，再登录百度云管家
我也是这样。你应该是用xp sp3吧。估计是百度加强了在登录的验证。几天后，百度给了我一个xp的登录补丁。估计是xp系统太旧。在登录方面没有自动识别。如果您电脑是XP系统，请尝试在ie浏览器里面打开链接：
1、如无法打开，请按照以下链接描述进行操作：；如依然无法登录，请重新安装ie浏览器，并按照以上链接操作指示进行设置； 2、如可以打开，请您把括号中链接（）内的两个文件存放到百度网盘的安装目录下，并重新启动百度网盘。我就搞定了。
我的也是，什么杀毒软件都关了，防火墙关了也不行
1条折叠回答
其他2条回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。如何评价《深入理解ES6》这本书？ - 知乎47被浏览<strong class="NumberBoard-itemValue" title="1分享邀请回答172 条评论分享收藏感谢收起41 条评论分享收藏感谢收起}