不关注细节的体验：
把这段字符拷贝到你浏览器的地址栏，直接回车：
data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>
看到了什么？我是已经惊呆了。
然后去巴拉了源码，才发现上面的就是源码了，具体源码如下，大小是407Bytes：
<body
oninput="i.srcdoc=h.value+'<style>'+c.value+
'</style><script>'+j.value+'<\\/script>'">
<style>
textarea,iframe{width:100%;height:50%}
body{margin:0}
textarea{width:33.33%;font-size:18}
</style>
<textarea placeholder=HTML id=h></textarea>
<textarea placeholder=CSS id=c></textarea>
<textarea placeholder=JS id=j></textarea>
<iframe id=i>
解读源码
说实话，这代码看似没什么技术含量，实际上细细读下来，还是有许多意外惊喜的。
-
body的oninput使用。
-
浏览器自动填充或解析的遗漏代码。
-
id属性获取的另一种方式。
-
标签属性省略引号的妙用。
这里牵扯到的一个最牛逼问题就是首页白屏优化，其中很重要的一点就是代码压缩（即代码量大小），因为代码量直接影响到加载文件的速度，谁也不想一个网页要几分钟才能打开。
一个一个讨论问题。
body的input
body的input监听了所有的输入事件，并且优先级高于input事件，代码如下：
<body oninput="c.value=111">
<input id=a>
<input id=b oninput='c.value=222'>
<input id=c>
<div id="test"></div>
效果如下：
填充遗漏代码
这个好理解，很多代码比如这些都是可以不填写的，现代浏览器基本都自动填上了。
整个代码来说不是规范的H5代码，但还是可以运行，道理是一样的。
id获取方式
我们知道JS获取DOM的方式原生常见的是document.getElementById、document.querySelector()等，但是这里展示了另一种直接获取id元素的方式，直接使用id，当然是合法字符串。
这种使用方法优先级特别低，比如下方代码：
var a = 1
a = 2
console.log(a) // 2
轻轻松松把id为a的input顶掉。
标签属性省略引号
这个基本就是普通属性强制转换成字符类型了，其实想想也是自然，本来就一定是字符串啊，比如class，id等等，不过还是那句话，需要是合法字符串，比如’a-b’这种就不行了，还是老老实实使用引号包起来。
省下的就是js代码解析，这个没什么说的，就是当body出现input输入事件的时候，触发：i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'<\\/script>
解析就是：
iframe.srcdoc的值每次都会替换成三个textarea内的值，每次都是完全替换哦。
srcdoc就是内部页面的body内容。
具体生成内容：
<body>
h.value
<style>c.value</style>
<script>j.value</script>
</body>
源码：GitHub
扫一扫
3434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
