zoukankan      html  css  js  c++  java
  • JavaScript与网页性能

    JavaScript的加载和运行,对网页的性能有至关重要的作用。通常我们会采取以下方式来优化脚本:
    1、将脚本放在页面底部。
    JavaScript有阻塞的特征,当JavaScript运行时其他的事情不能被浏览器处理。大部分老版本浏览器是不允许JavaScript并行下载的。虽然IE8,Firefox3.5,Safari4,Chrome2允许并行下载JavaScript文件,但仍然要阻塞其他资源的下载过程,例如图片。即使脚本之间的下载过程互不阻塞,页面仍然要等待所有JavaScript代码下载并执行完成后才能继续渲染。因此,将<script>标签放在尽可能接近<body>标签底部的位置,可以减少对整个页面下载的影响。
    2、减少<script>标签数。
    每当页面解析碰到一个<script>标签时,紧接着有一段时间用于代码执行。最小这些延迟时间可以改善页面的整体性能。
    3、尽量减少引用外部脚本文件的数量和体积。
    可以将多个JavaScript脚本压缩合并,以减少HTTP请求数。

    以上只是提高性能的第一步,当我们的JavaScript变得很大,产生一次HTTP请求,也有可能会锁定浏览器一大段时间。为了避开这种情况,我们可以逐步向页面添加JavaScript。这意味着等页面加载完之后,再下载源码。以下方法可以解决:
    1、延期脚本Deferred Scripts(defer属性只被IE4+、Firefox3.5+支持,不是一个很理想的跨浏览器解决方案)。一个带有defer属性的<script>标签可以放在文档的任何位置。对应的文件将在<script>被解析时启动下载,但代码不会被执行,直到DOM加载完(在onload事件之前执行)
    例如:<script type="text/javascript" src="util.js" defer></script>
    2、动态脚本元素,DOM允许使用JavaScript动态创建HTML的几乎全部文档内容。因此,<script>元素也可以非常容易地通过标准的DOM函数来创建。这样做的好处是,无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程。

    <script type="text/javascript">
        var JsLoader = {
            load: function (url, callback) {
                var script = document.createElement("script");
                script.setAttribute("charset", "utf-8");
                script.setAttribute("type", "text/javascript");
                script.setAttribute("src", url);
                document.getElementsByTagName("head")[0].appendChild(script);
                if (Browser.ie) {
                    script.onreadystatechange = function () {
                        if (this.readyState == "loaded" || this.readyState == "complete") {
                            script.onreadystatechange = null; 
                            callback();
                        }
                    };
                } else if (Browser.mozilla) {
                    script.onload = function () {
                        callback();
                    };
                } else {
                    callback();
                }
            }
        };
        JsLoader.load("http://weyoo.cn/js/util.js", function () {
            JsLoader.load("http://weyoo.cn/js/jquery-1.7.1.min.js", function () {
                JsLoader.load("http://weyoo.cn/js/baseModel.js", function () {
                    JsLoader.load("http://weyoo.cn/js/commonToolFn.js", function () {
                        alert("串联保证加载顺序哦");
                    });
                });
            });
        });
    </script>

    3、XMLHttpRequest Script Injection  XHR脚本注入

  • 相关阅读:
    缓冲区溢出漏洞攻击原理
    过waf实战之文件上传bypass总结
    渗透-svn源代码泄露漏洞综合利用
    渗透-简单制作过waf的中国菜刀
    双链表
    Go语言(container学习)
    C语言 malloc函数详解
    GitHub搜索技巧
    HyperLogLog 算法的原理讲解以及 Redis 是如何应用它的
    【机器学习】K-近邻算法(KNN)
  • 原文地址:https://www.cnblogs.com/huangjianhuakarl/p/3104048.html
Copyright © 2011-2022 走看看