首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

关于Javascript加载执行优化的研究报告

Posted in Javascript onDecember 16, 2014

本人做前端开发一年多了，对前端的见解还是多多少少有一点的，今天特拿出来跟大家分享分享。

做前端开发少不了各种利器。比如我习惯用的还是Google浏览器和重型武器Fiddller。

一： 原始情况

首先大家看看如下的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="head">

    <title></title>

    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

    <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>

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

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

</head>

<body>

    <img src="1.jpg" width="200" height="300" />

</body>

</html>

估计90%的程序员都会把js文件放在head中，但是大家有没有深究过呢？很多浏览器都会使用单一的线程来做“界面UI的更新”和“JS脚本的处理“，

也就是当执行引擎遇到”<script>“的时候，此时页面的下载和渲染都必须等待<script>执行完毕。那么对用户而言就悲哀了，看着锁住的页面，

此时用户很可能就会给你关掉。

关于Javascript加载执行优化的研究报告

从上面的瀑布图中我们可以看出二点：

第一：

三个js文件并行下载，但是按我上面的理论中js应该是一个接一个的执行。然而在IE8，Firefox3.5和Chrome2都实现了js的并行下载，

这是相当不错的，但是他还是会阻碍一些其他资源的下载，比如说图片。

第二：

图片1.jpg的下载是在js执行完成后触发的，这也验证了上面所说的情况，阻止了image的加载。

二：第一步优化

既然js阻止了UI渲染，那么我们可以考虑将js放在</body>前，这样就可以让<script>前的html完美的呈现，不会让用户看到页面空白等待

而苦恼的情况，自然就提高了友好性。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="head">

    <title></title>

    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <img src="1.jpg" width="200" height="300" />

    <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>

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

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

</body>

</html>

下面的图也展示了1.jpg和三个js几乎并行下载和执行。时间由上面的“469ms+”缩小到“326ms”。

关于Javascript加载执行优化的研究报告

三：第二步优化

看上面的“瀑布图”，估计大家也看出来了，三个js文件进行了三次“Get”请求，大家都知道Get请求是需要带http头的，

所以说需要耗费时间，那么我们采取的方案自然就是减少Get请求。通常有两种方案。

第一：合并js文件，比如将上面的“hello.js"和“world.js“合并掉。

第二：利用第三方工具，比如php中的Minify。

关于第二种做法，taobao用的还是比较多的，看一下其中的一个script，应用了三个js文件。由3个Get请求变为了1个。

关于Javascript加载执行优化的研究报告

四：第三步优化

不管是把js文件放在脚尾，还是三个合并一个，其本质都是”阻塞模式“，就是说锁死浏览器，当web页面越来越复杂，js文件越来越多，还是

让我们头疼的，此时我们就提倡一种“无阻塞模式“加载js脚本，也就是页面全部呈现完再追加js，也就对应着window.onload事件触发后，我们才

追加js，这就是所谓的“无阻塞“，但是其中有一个非常要注意的地方就是我们对js的要求是否有严格的顺序。

第一：无顺序要求，比如我对”hello.js“和”world.js"没有顺序要求，那么我们完全可以用jquery来动态追加实现。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="head">

    <title></title>

    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <img src="1.jpg" width="200" height="300" />

    <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        window.onload = function () {

            $("#head").append("<script src='js/hello.js' type='text/javascript'><\/script>")

            $("#head").append("<script src='js/world.js' type='text/javascript'><\/script>");

        }

    </script>

</body>

</html>

关于Javascript加载执行优化的研究报告

从图中可以看出，"hello.js"和“world.js"出现在蓝色线以后，也就说明这两个js是在DomContentLoad结束后再进行触发加载的，这样就不会造成页面的锁定

等待。

第二：有顺序要求

为什么一定要有顺序要求这个概念呢？对于上面的那个动态追加的“两个js”文件，在IE系列中，你不能保证hello.js一定会在world.js前执行，

他只会按照服务器端返回的顺序执行代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="head">

    <title></title>

    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <img src="1.jpg" width="200" height="300" />

    <script type="text/javascript">

        function loadScript(url, callback) {

            var script = document.createElement("script");

            script.type = "text/javascript";
            //IE

            if (script.readyState) {

                script.onreadystatechange = function () {

                    if (script.readyState == "loaded" || script.readyState == "complete") {

                        script.onreadystatechange = null;

                        callback();

                    }

                }

            } else {

                //非IE

                script.onload = function () {

                    callback();

                }

            }

            script.src = url;

            document.getElementById("head").appendChild(script);

        }

        //第一步加载jquery类库

        loadScript("jquery/jquery-1.4.1.js", function () {

            //第二步加载hello.js

            loadScript("js/hello.js", function () {

                //第三步加载world.js

                loadScript("js/world.js", function () {
                });

            });

        });

    </script>

</body>

</html>

关于Javascript加载执行优化的研究报告

大家也能看到，页面完全Load的时间其实也就310ms左右，大大提高了网页的下载呈现和友好型。

同样也可以看看腾讯网，他也是这么干的。

关于Javascript加载执行优化的研究报告

是不是非常的有用呢，本人这里也是花了些时日来做这些研究测试，希望小伙伴们能看到心里去，毕竟这也是“麻花藤”公司的解决方案，大家参考下吧

关于Javascript加载执行优化的研究报告

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 #Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 #Javascript
node.js中的fs.lstat方法使用说明
Dec 16 #Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 #Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 #Javascript
javascript使用call调用微信API
Dec 15 #Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 #Javascript
递归(1) Parser(1) Vscode(3) 时钟(1) 内置模块(1) 后端(1) 双人对弈(1) tokenizer(1) 算法(1) 人人对战(1)
You might like
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php 分页类 扩展代码
2009/06/11 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python中将字典转换成其json字符串
2014/07/16 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
windows下python安装小白入门教程
2018/09/18 Python
python数据归一化及三种方法详解
2019/08/06 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
python3中数组逆序输出方法
2020/12/01 Python
巴西食品补充剂在线零售商：Músculos na Web
2017/08/07 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
房租涨价通知
2015/04/23 职场文书
国王的演讲观后感
2015/06/03 职场文书
2019年国庆祝福语（70句）
2019/09/19 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS