远程脚本#

XMLHttpRequest###

JSONP###

  • 和XHR不同,它不受同域的限制;
  • JSONP请求的可以是任意的文档;
  • 请求的URL通常格式为http://example.js?calback=CallFunction
   <button id="server">Server play</button>
<script>
var start = {
get: function (id) {
return document.getElementById(id);
},
setup: function () {
this.get('server').onclick = this.remoteRequest;
},
remoteRequest: function () {
var script = document.createElement("script");
script.src = "server.js?callback=passObj";
document.body.appendChild(script);
},
};
var passObj = {
serverPlay: function (data) {
console.log(data.foo);
},
num: 10
}
start.setup();
</script>
//server.js
passObj.serverPlay({"foo": 'bar'});

框架###

frame通常使用的情况

  • 沙箱隔离。
  • 引用第三方内容。
  • 独立的带有交互的内容,比如幻灯片。
  • 需要保持独立焦点和历史管理的子窗口,如复杂的Web应用。

配置js文件#

合并脚本文件###

  • 需要增加一个自动合并脚本的步骤;
  • 考虑到缓存效益,倾向于合并成两个文件,一个可能会改变,一个不会再修改;
  • 对于文件最好是使用版本号或者其他内容来命名;

精简和压缩脚本文件###

Expires报头###

  • 可以通过设置来增加重复访问时,请求文件依然再缓存的概率
  • 这样做的缺点时如果希望修改文件,就需要重命名改文件;

使用CDN###

载入策略#

HTTP块###

  • 支持所谓的块编码,该技术允许分片发送网页
  • 最简单的策略是将部分作为HTTP的第一块,而将网页中其他部分内容作为第二块

使用动态<script>元素无阻塞地下载###

  • 再main.js中插入文件
 var script = document.createElement("script");
script.src = "later.js";
document.documentElement.firstChild.appendChild(script);
  • 这里有个问题,如果其他内敛脚本依赖于插入地脚本,那么将会报错;解决方式
//mian.js
var mynamespace = {
inline_scripts: []
}
//内敛脚本
mynamespace.inline_scripts.push(function() {
console.log(a);
});
//later.js
var a = 10;
(function() {
var i, scripts = mynamespace.inline_scripts, max = scripts.length;
for(i = 0; i < max; i++) {
scripts[i]();
}
})();

延迟加载###

  • 再页面加载完之后,载入外部文件地技术称为延迟加载;
  • 通常将一大段代码分为两部分,一部分用于初始化页面时,一部分只在用户交互地时候使用;
  • 一般用动态创建载入脚本地方式加载;

按需加载###

//main.js
document.getElementById("server").onclick = function() {
require('later.js', function() {
alertFunc();
});
} function require(file, cb) {
var script = document.getElementsByTagName('script')[0];
var newjs = document.createElement('script');
//ie
newjs.onreadystatechange = function() {
if(newjs.readyState == 'loaded' || newjs.readyState === 'complete') {
newjs.onreadystatechange = null;
cb();
}
}
//other
newjs.onload = function() {
cb();
}
newjs.src = file;
script.parentNode.insertBefore(newjs, script);
}
//later.js
var alertFunc = function() {
alert(0);
}

预加载js###

//main.js
var preload;
if(/*@cc_on!@*/false) { //使用条件注释的IE嗅探
preload = function(file) {
new Image().src = file;
}
} else {
preload = function(file) {
var obj = document.createElement('object');
var body = document.body;
obj.width = 0;
obj.height = 0;
obj.data = file;
body.appendChild(obj);
}
} preload('later.html');
//later.html <script type="text/javascript">
alert(0);
</script>

javascript优化--14模式2(DOM和浏览器模式)的更多相关文章

  1. javascript优化--13模式1(DOM和浏览器模式)

    注意分离: 通过将CSS关闭来测试页面是否仍然可用,内容是否依然可读: 将JavaScript关闭来测试页面仍然可以执行正常功能:所有连接是否正常工作:所有的表单是否可以正常工作: 不使用内联处理器( ...

  2. 文档类型DTD,DOCTYPE和浏览器模式

    出处:http://blog.csdn.net/freshlover/article/details/11616563 浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义 ...

  3. 【IE】浏览器模式与文档模式 及其开发中处理方式

    原文:http://blog.csdn.net/neo_liu0000/article/details/7589731 什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和 ...

  4. IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...

  5. DOM,浏览器,javascript,html之间的关系

    来源于:https://github.com/hucheng91/myBlog/blob/master/web/dom/dom.md DOM定义 DOM可以以一种独立于平台和语言的方式访问和修改一个文 ...

  6. javascript优化--07模式(对象)02

    沙箱模式: 解决空间命名模式的几个缺点: 命名空间模式中无法同时使用一个应用程序或库的两个版本运行在同一个页面中,因为两者需要相同的全局符号: 以点分割,需要输入更长的字符,解析时间也更长: 全局构造 ...

  7. <JavaScript>“浏览器模式”和“文档模式”之间的区别

    只有IE浏览器中才会有“浏览器模式”和“文档模式”,兼容性视图涉及两个重要的功能便是“浏览器模式[browser mode]”和“文档模式[document mode]”,在IE8/IE9中按F12键 ...

  8. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  9. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

  1. 【python】lxml处理命名空间

    有如下xml <A xmlns="http://This/is/a/namespace"> <B>dataB1</B> <B>dat ...

  2. 【python】lxml

    来源:http://lxml.de/tutorial.html lxml是python中处理xml的一个非常强大的库,可以非常方便的解析和生成xml文件.下面的内容翻译了链接中的一部分 1.生成空xm ...

  3. HDU 5875 Function -2016 ICPC 大连赛区网络赛

    题目链接 网络赛的水实在太深,这场居然没出线zzz,差了一点点,看到这道题的的时候就剩半个小时了.上面是官方的题意题解,打完了才知道暴力就可以过,暴力我们当时是想出来了的,如果稍稍再优化一下估计就过了 ...

  4. IOS- 应用程序生命周期(前后台切换,应用的各种状态)详解

    iOS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变换,这些对于开发者来说都是很重要的. iOS系统的资源是有限的,应用程序在前台和在后台的状态是不一样的.在后台时,程序会受 ...

  5. yii过滤器的原理和使用

    过滤器官方页面:http://www.yiiframework.com/doc/guide/1.1/zh_cn/basics.controller 过滤器是一段代码,可被配置在控制器动作执行之前或之后 ...

  6. TCP/IP的Socket编程

    1. TCP/IP.UDP的基本概念 TCP/IP(Transmission Control Protocol/Internet Protocol)即传输控制协议/网间协议,他是一个工业标准的协议集, ...

  7. Hive介绍、安装(转)

    1.Hive介绍 1.1 Hive介绍 Hive是一个基于Hadoop的开源数据仓库工具,用于存储和处理海量结构化数据.它是Facebook 2008年8月开源的一个数据仓库框架,提供了类似于SQL语 ...

  8. git 提交代码的流程

    [root@ok-T IT-DOC]# ls hx-海星-wifi.rd web收藏.txt [root@ok-T IT-DOC]# git status -s ?? "web\346\22 ...

  9. CLR via C#(16)--泛型

    泛型就像是一个模板,常常定义一些通用的算法,具体调用时再替换成实际的数据类型,提高了代码的可重用性. 一.初识泛型 1. 简单实例 以最常用的FCL中的泛型List<T >为例: stat ...

  10. AngularJS讲义 - 作用域

    什么是作用域? Angular中作用域(scope)是模板以及工作的上下文环境,作用域中存放了应用模型和视图相关的回调行为.作用域是层次化结构的与相关联的DOM结构相对应.作用域可以观察表达式以及传播 ...