BaoTao的前端日志

1.脚本延迟执行

HTML 4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会能响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

HTML5为<script>元素定义了async属性。这个属性与defer属性类似，都用于改变脚本的行为，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。

延迟脚本放在页面底部仍然是最佳选择。

2.meta标签的作用

meta标签：提供给页面的一些元信息（名称/值对）， 比如针对搜索引擎和更新频度的描述和关键词。

  • name：名称/值对中的名称。常用的有author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。
  • http-equiv：没有name时，会采用这个属性的值。常用的有content-type、expires、refresh、set-cookie。把content属性关联到http头部。
  • content： 名称/值对中的值， 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用。

3.如何实现多个标签页之间的通信

方法一：调用localstorge

标签页1：

<input id="name">  
<input type="button" id="btn" value="提交">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); //存储需要的信息 
        });     
   });    
</script>
1
2
3
4
5
6
7
8
9
10
11

标签页2：使用storage事件监听添加、修改、删除的动作

$(function(){   
    window.addEventListener("storage", function(event){    
       console.log(event.key + "=" + event.newValue);    
    });       
});
1
2
3
4
5

方法二：使用cookie+setInterval

将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

标签页1：

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});
1
2
3
4
5
6

标签页2：

 $(function(){   
    function getCookie(key) {    
       return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
    }     
    setInterval(function(){    
       console.log("name=" + getCookie("name"));    
    }, 10000);    
});
1
2
3
4
5
6
7
8

CSS →