这样
<iframe src="url" srcdoc="属性值 " style="text-align:center">aaaaaaaaa</frame>
把这段字符拷贝到你浏览器的地址栏，直接回车：
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的input
body的input监听了所有的输入事件，并且优先级高于input事件，代码如下：
效果如下：
填充遗漏代码
这个好理解，很多代码比如</body>这些都是可以不填写的，现代浏览器基本都自动填上了。
整个代码来说不是规范的H5代码，但还是可以运行，道理是一样的。
id获取方式
我们知道JS获取DOM的方式原生常见的是document.getElementById、document.querySelector()等，但是这里展示了另一种直接获取id元素的方式，直接使用id，当然是合法字符串。
这种使用方法优先级特别低，比如下方代码：
轻轻松松把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内容。
具体生成内容：
大神的源码：GitHub - umpox/TinyEditor: A functional HTML/CSS/JS editor in less than 400 bytes
