加入收藏 | 设为首页 | 会员中心 | 我要投稿 源码网 (https://www.900php.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 服务器 > 搭建环境 > Linux > 正文

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

发布时间:2016-11-24 17:37:46 所属栏目:Linux 来源:站长网
导读:本人做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享。 做前端开发少不了各种利器。比如我习惯用的还是Google浏览器和重型武器Fiddller。 一: 原始情况 首先大家看看如下的代码: 复制代码 代码如下: lt;%@ Page Lang

lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"gt;
lt;html xmlns="http://www.w3.org/1999/xhtml"gt;
lt;head id="head"gt;
nbsp;nbsp;nbsp; lt;titlegt;lt;/titlegt;
nbsp;nbsp;nbsp; lt;link href="Styles/Site.css" rel="stylesheet" type="text/css" /gt;
lt;/headgt;
lt;bodygt;
nbsp;nbsp;nbsp; lt;img src="1.jpg" width="200" height="300" /gt;
nbsp;nbsp;nbsp; lt;script type="text/javascript"gt;
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; function loadScript(url, callback) {
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; var script = document.createElement("script");
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; script.type = "text/javascript";

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; //IE
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; if (script.readyState) {
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; script.onreadystatechange = function () {
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; if (script.readyState == "loaded" || script.readyState == "complete") {
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; script.onreadystatechange = null;
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; callback();
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; }
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; }
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; } else {
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; //非IE
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; script.onload = function () {
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; callback();
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; }
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; }
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; script.src = url;
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; document.getElementById("head").appendChild(script);
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; }
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; //第一步加载jquery类库
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; loadScript("jquery/jquery-1.4.1.js", function () {
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; //第二步加载hello.js
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; loadScript("js/hello.js", function () {
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; //第三步加载world.js
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; loadScript("js/world.js", function () {

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; });
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; });
nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; });
nbsp;nbsp;nbsp; lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;

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

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

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

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

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

(编辑:源码网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读