信步拾遗之中英文留白

在前几天，看到了一篇博客，整体感觉很舒服，但又说不出来为啥，认真看了下，发现原来他的中英文有留白，字里行间感觉非常好，然后回过头看自己的博客，惨不忍睹，怎么能忍，改，马上改。

网络上实现中英文留白的方式很多，我选了一种 js 实现方式，并写了一个小型的中英文留白格式转换 js 程序。

一、中英文留白程序

盘古脚本下载路径：https://github.com/vinta/pangu.js

<html>
<script src="https://cdn.bootcss.com/pangu/3.3.0/pangu.min.js">
</script>
<style type="text/css">
.alfred_box {
	margin-top:5px;
	border: 1px solid #a0b3d6; 
	95%;
	height:90%;
}
</style>
<script>
	function littleblank(){
		var text = pangu.spacing(document.getElementById('beautiful').innerText);
		document.getElementById('beautiful').innerText = text;
	}
</script>
<body>
	<input type="button" value="想要 beautiful 下吗？点这里" onclick="littleblank()" />
	<div id="beautiful" class="alfred_box" contenteditable="true"><br /></div>
</body>
</html>

中英文留白.html

效果图：

二、JS 异步加载

在搜索资料的时候，看到一哥们为了节约 10ms 加载时间（我实际测试大概节约5ms，可能是我网络比较好，我居然去测试了，也是闲的 w(ﾟДﾟ)w），搞了个 JS 异步加载，蛮有意思的，顺手研究了下。
一般对于初学者， HTML 页面的 script 标签都会写在 head 标签部分，这会导致一个问题，阻塞所有页面渲染工作，使得用户在脚本加载完毕并执行完毕之前一直处于 “白屏死机” 状态。为什么呢？因为 JS 的加载是一个由上而下的过程，又称阻塞模式或同步模式，之所以要同步执行，是因为 JS 中可能有输出 document 内容、修改 dom等行为，所以默认同步执行才是安全的。

我们看到的很多网页是把 <script> 放在页面末尾 </body> 之前，这也是比较通行的一种 js 加载优化方式，为了尽可能减少阻塞行为，先让页面展示出来。

旁的不多说，转换程序异步加载版本如下，使用的是较为通用的方式，通过 js 方法动态生成 script 节点，在一些支持 H5 的浏览器中，也可以使用 script 标签的 async 属性或 defer 属性指定该脚本异步加载，两者的区别主要在于脚本下载完之后何时执行，在此就不进行细说，有兴趣的可以放狗搜下。

<html>
<script>
(function(u, c) {
  var d = document, t = 'script', o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = u;
  if (c) { o.addEventListener('load', function(e) { c(e); }); }
  s.parentNode.insertBefore(o, s);
})
('https://cdn.bootcss.com/pangu/3.3.0/pangu.min.js', function() {
  //做一些你在完成加载后想做的事情吧
});
</script>
</script>
<style type="text/css">
.alfred_box {
	margin-top:5px;
	border: 1px solid #a0b3d6; 
	95%;
	height:90%;
}
</style>
<script type="text/javascript">
	function littleblank(){
		var text = pangu.spacing(document.getElementById('beautiful').innerText);
		document.getElementById('beautiful').innerText = text;
	}
</script>
<body>
	<input type="button" value="想要 beautiful 下吗？点这里" onclick="littleblank()" />
	<div id="beautiful" class="alfred_box" contenteditable="true"><br /></div>
</body>
</html>

中英文留白.html

OK，完事，在盘古脚本官网看到作者在一本正经的瞎扯淡，下面这段话，哎哟，我去，该摆什么表情呢。。。

汉学家称这个空白字元为「盘古之白」，因为它劈开了全形字和半形字之间的混沌。另有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其馀三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。