zoukankan      html  css  js  c++  java
  • 前端常见面试题

    一、异步加载js的方式有哪些?

      建议回复:

      默认正常模式下下,JS是同步加载的,即优先加载JS,只有当JS文件下载完,dom和css才开始加载,当某些时候我们需要JS异步加载,我们可以通过以下方式来设置异步加载,不同情况下选取不同方式即可。

      js加载的缺点:加载工具方法没必要阻塞文档,过多js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。 有些工具方法需要按需加载,用到再加载,不用不加载,。

      js异步加载的4种方式,点评开始。

           方案1:$(document).ready

      

    <!DOCTYPE html>
    <html>
        <head>
            <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
            <script type="text/javascript">
                $(document).ready(function() {
                  alert("加载完成!");
                });
            </script>
        </head>
        <body>
            <img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
        </body>
    </html> 

      

      点评:

      1、需要引用jquery

      2、兼容所有浏览器。

      方案2<script>标签的async="async"属性

      

    <script type="text/javascript" src="xxxxxxx.js" async="async"></script>

      

      点评:

      1、HTML5中新增的属性,Chrome、FF、IE9&IE9+均支持(IE6~8不支持)。此外,这种方法不能保证脚本按顺序执行。

      2、async 属性仅适用于外部脚本(只有在使用 src 属性时)。

      方案3<script>标签的defer="defer"属性

      

    <script type="text/javascript" defer="defer"> 
    alert(document.getElementById("p1").firstChild.nodeValue); 
    </script> 

      点评:兼容所有浏览器。此外,这种方法可以确保所有设置defer属性的脚本按顺序执行。

      

      方案4:动态创建<script>标签

      

    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript">
                (function(){
                    var s = document.createElement('script');
                    s.type = 'text/javascript';
                    s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                    var tmp = document.getElementsByTagName('script')[0];
                    tmp.parentNode.insertBefore(s, tmp);
                })();
            </script>
        </head>
        <body>
            <img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
        </body>
    </html>

      点评:兼容所有浏览器。

     

    二、移动端300ms点击延迟和点击穿透问题

      建议回复:

      参考:http://www.jianshu.com/p/6e2b68a93c88

    我一路向北,离开有你的季节...
  • 相关阅读:
    冲刺1
    第九周
    课堂作业
    团队项目典型用户与用户场景分析
    第八周
    梦断代码阅读笔记03
    tab页的使用方法
    校园服务nabcd需求分析
    第七周
    mysql下载以及安装
  • 原文地址:https://www.cnblogs.com/dancer0321/p/7217035.html
Copyright © 2011-2022 走看看