在前几天，看到了一篇博客，整体感觉很舒服，但又说不出来为啥，认真看了下，发现原来他的中英文有留白，字里行间感觉非常好，然后回过头看自己的博客，惨不忍睹，怎么能忍，改，马上改。
网络上实现中英文留白的方式很多，我选了一种 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>
效果图：
二、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>
OK，完事，在盘古脚本官网看到作者在一本正经的瞎扯淡，下面这段话，哎哟，我去，该摆什么表情呢。。。
汉学家称这个空白字元为「盘古之白」，因为它劈开了全形字和半形字之间的混沌。另有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其馀三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。