zweizhao.github.io

项目,文章,随笔,博客,Markdown,个人网站,人生感悟。

View on GitHub

申明,车子非常不稳,拉不好扶手摔死不管!

先容许我笑一会。。。

不关注细节的体验:

把这段字符拷贝到你浏览器的地址栏,直接回车:

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>

解读源码

说实话,这代码看似没什么技术含量,实际上细细读下来,还是有许多意外惊喜的。

  1. body的oninput使用。

  2. 浏览器自动填充或解析的遗漏代码。

  3. id属性获取的另一种方式。

  4. 标签属性省略引号的妙用。
  5. 这里牵扯到的一个最牛逼问题就是首页白屏优化,其中很重要的一点就是代码压缩(即代码量大小),因为代码量直接影响到加载文件的速度,谁也不想一个网页要几分钟才能打开。

一个一个讨论问题。

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>

效果如下:

input优先级

填充遗漏代码

这个好理解,很多代码比如</body>这些都是可以不填写的,现代浏览器基本都自动填上了。

整个代码来说不是规范的H5代码,但还是可以运行,道理是一样的。

id获取方式

我们知道JS获取DOM的方式原生常见的是document.getElementByIddocument.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>

我又进一步优化精简了一下,最终代码如下,只有0.34KB了:

<style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style>
<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'<\/script>'">
  <textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea>
  <iframe id=i>

大神的源码:GitHub

体验页面:Fork精简后的Pages


如果喜欢文章,请关注我,定期更新技术文章,谢谢!