首页
所有分类
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 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
详解js跨域请求的两种方式，支持post请求
May 05 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
js+canvas实现画板功能
Sep 13 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 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
BeautifulSoup4(2) OpenGL(1) cv2(1) tfx(1) ElementTree(1) Flask Web(1) MyBatis(5) 面向接口(1) exec(1) OpenAI baselines(1)
You might like
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
Vue.js简易安装和快速入门（第二课）
2017/10/17 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
详解Python的Django框架中的模版继承
2015/07/16 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
环保宣传标语
2014/06/12 职场文书
学校食品安全实施方案
2014/06/14 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android