• .htm 和 .html扩展名区别
    1. DOS操作系统（win95或win98）.htm 和 .html扩展名区别下只能支持长度为3的后缀名，所以是htm
    2. 但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
    3. 所以htm是为了兼容过去的DOS命名格式存在的
    • 浏览器URL地址栏运行HTML代码

    在非IE内核的浏览器地址栏可以直接运行HTML代码！ 代码如下：

    1. data:text/html,<h1>Hello, world!</h1>

    输入后，直接在页面中显示hello,world的了。打开开发者工具可以看出在body中有了便签<h1>Hello, world!</h1>

    • 浏览器URL地址栏运行Js代码

    在浏览器的url地址栏上可以直接运行js的代码，你知道吗？只需要通过javascript:开头后跟要执行的语句，代码如下：

    1. javascript:alert('hello，world');
    2. 需要注意的是:

    1：如果是直接通过复制粘贴（copy paste）代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行
    2：Firefox中虽然不会自动去掉，Firefox不支持在地址栏运行JS代码

    • 页面拥有ID的元素会创建全局变量

    不是要document.getElementById()。直接通过ID就可以获取到

    1. <div id="sample"></div>
    2. <script type="text/javascript">
    3.         console.log(sample);//<div id="sample"></div>
    4. </script>
    • 利用a标签自动解析URL

    JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性

    1. var a = document.createElement('a');
    2. a.href = 'http: // www.demo.com/a';
    3. console.log(a.host); // 输出www.demo.com

    稍微扩展一下，就得到了一个更加健壮的解析URL各部分的通用方法了

    1. function parseURL(url) {
    2.     var a =  document.createElement('a');
    3.     a.href = url;
    4.     return {
    5.         source: url,
    6.         protocol: a.protocol.replace(':',''),
    7.         host: a.hostname,
    8.         port: a.port,
    9.         query: a.search,
    10.         params: (function(){
    11.             var ret = {},
    12.                 seg = a.search.replace(/^\?/,'').split('&'),
    13.                 len = seg.length, i = 0, s;
    14.             for (;i<len;i++) {
    15.                 if (!seg[i]) { continue; }
    16.                 s = seg[i].split('=');
    17.                 ret[s[0]] = s[1];
    18.             }
    19.             return ret;
    20.         })(),
    21.         file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
    22.         hash: a.hash.replace('#',''),
    23.         path: a.pathname.replace(/^([^\/])/,'/$1'),
    24.         relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
    25.         segments: a.pathname.replace(/^\//,'').split('/')
    26.     };
    27. }
    • 把浏览器当编辑器

    在浏览器地址中输入下代码，运行后浏览器变成了一个原始而简单的编辑器，与Windows自带的notepad一样。

    1. data:text/html, <html contenteditable>

    HTML5中新加的contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。推而广之，将以下代码放到console执行后，整个页面将变得可编辑：

    1. document.body.contentEditable='true';
    • 加载CDN文件时，可以省掉HTTP标识

    现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。

    1. <script src="//domain.com/path/to/script.js"></script>
    • 跨域的其他实现方式

    img link(css 的攻击注入，background请求跨域)
    把代码压缩进图片（canvas）
    websocket

    postMessage（还可以通过postMessage来操作localStorage）

    1. var win = document.getElementsByTagName('iframe')[0].contentWindow;
    2. var obj = { name: 'Jack' };
    3. // 存入对象
    4. win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com');
    5. // 读取对象
    6. win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");
    7. window.onmessage = function(e) {
    8.   if (e.origin != 'http://aaa.com') return;
    9.   // "Jack"
    10.   console.log(JSON.parse(e.data).name);
    11. };
    13. // --------------
    14. window.onmessage = function(e) {
    15.   if (e.origin !== 'http://bbb.com') return;
    16.   var payload = JSON.parse(e.data);
    17.   switch (payload.method) {
    18.     case 'set':
    19.       localStorage.setItem(payload.key, JSON.stringify(payload.data));
    20.       break;
    21.     case 'get':
    22.       var parent = window.parent;
    23.       var data = localStorage.getItem(payload.key);
    24.       parent.postMessage(data, 'http://aaa.com');
    25.       break;
    26.     case 'remove':
    27.       localStorage.removeItem(payload.key);
    28.       break;
    29.   }
    30. };
    • 用img来测试网速
    1. 　　var s = Date.now();
    2.     console.log(s);
    3.     var image = new Image();
    4.     image.crossorigin = 'anonymous';
    5.     image.src = "https://webmap1.bdimg.com/mobile/simple/static/index/images/index-nb-round_3e43e00.png";
    6.     image.onload = function(){
    7.         var e = Date.now();
    8.         console.log(e);
    9.         var w = 13.9/(e-s); //kb/ms  加载图片的大小/加载的时间
    10.         console.log(w);
    11.     }

    image.png
    关注公众 code本缘