<style type="text/css">
<!--
.wt
{font-family:Arial,Helvetica,sans-serif;
color:#444444}
.wt p.c
{line-height:24px;
font-size:14px;
margin:10px;
padding-left:10px}
.wt p.title
{line-height:24px;
font-size:14px;
margin:10px;
padding-left:10px;
color:#00F;
font-weight:bold}
.wt h2
{font-size:18px;
font-weight:bold;
color:#000}
.wt .red
{color:#f00}
-->
</style>
高性能javascript 笔记(一)
加载和执行
阻塞脚本
<script>标签 在加载的时候会阻塞其他资源的加载.这个我以前知道,但是不知道为什么为阻塞,原因如下
无论是内嵌的scirpt还是引用外部的js,页面的下载和解析过程必须停下,等待脚本完成这些处理,然后才能继续。这是页面生命周期必不可少的部分,因为脚本可能在运行过程中修改页面内容。典型的例子是document.write()函数
代码如下
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script type="text/javascript">
document.write("The date is " + (new Date()).toDateString());
</script>
</p>
</body>
</html>
正如上面HTML 页面中那样,无法预知JavaScript 是否在<p>标签中添加内容。因此,浏览器停下来,运行此JavaScript 代码,然后再继续解析、翻译页面。同样的事情发生在使用src 属性加载JavaScript 的过程中。浏览器必须首先下载外部文件的代码,这要占用一些时间,然后解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。
所以<script>标签应该是放在页面的下面,因为放上面要等待js下载完并且执行完了,才会去渲染界面
Internet Explorer 8, Firefox 3.5, Safari 4, 和Chrome 2 允许并行下载JavaScript 文件。这个好消息表明,当一个<script>标签正在下载外部资源时,不必阻塞其他<script>标签。不幸的是,JavaScript 的下载仍然要阻塞其他资源的下载过程,例如图片。
上面的话是从书上抄的,在chorme下去,发现js 图片 资源是可以并行在下的.chrome v5啊
动态脚本元素
这个以前有看,但是没有深入了解过,所以做些笔记
动态创建的script标签是在下载的时候是不会阻塞其他资源下载和渲染的,这是他的好处.坏处就是不好控制什么时候完成了加载
一般创建一个script标签,
非ie下 用script.onload来捕获是否完成了标签的加载
ie下 用script. onreadystatechange 监听 script.readyState 为loaded或者为 complete的时候表示标签加载完成(这个2动作可能有时候去触发一个,有时候会都触发,所以当触发了其中的一个的时候,吧这个事件从scipt上去掉,避免第2次触发)
一个例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/css/reset.css" />
<style type="text/css">
*{margin:0;padding:0;}
</style>
<title></title>
</head>
<script type="text/javascript">
if(!window.console){
window.console = {
"log" : function(txt){alert(txt)}
}
}
function createJsCss(url,callback){
if(!/[a-z0-9]\.js$/i.test(url)){
return false;
}
if(!callback || typeof callback != "function"){
callback = function(){};
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
script = null;
}
}
}else{
script.onload = function(){
callback();
}
}
document.getElementsByTagName("head")[0].appendChild(script);
}
createJsCss("http://common.cnblogs.com/script/jquery.js",function(){console.log("load!!!")});
</script>
<body>
<h1>创建js标签 因为可以不阻塞</h1>
<img src="http://img02.taobaocdn.com/bao/uploaded/i2/T13ZDeXfNsXXXOjLs1_041123.jpg"><br>
<img src="http://img04.taobaocdn.com/bao/uploaded/i4/13444019606750826/T1antaXqteXXXXXXXX_!!0-item_pic.jpg"><br>
</body>
</html>
这个是js的,外部资源还有css,不过link标签比较悲剧,FF/Webkit都不支持onload,onreadystatechange,在link标签下用node的标签的node.sheet.cssRules来看它样式的长度表示它加载完了(这个不能跨域引用)
一个例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<script type="text/javascript">
if(!window.console){
window.console = {
"log" : function(txt){alert(txt)}
}
}
function createJsCss(url,callback){
var isurl = /[a-z0-9]\.(js|css)$/i.exec(url);
if(isurl == null){
return false;
}
if(!callback || typeof callback != "function"){
callback = function(){};
}
var iscss = isurl[1] =="css",
sniff = 1 + /(?:Gecko|AppleWebKit)\/(\S*)/.test(navigator.userAgent), // 0 - IE, 1 - O, 2 - GK/WK
doc = document,
head = doc.head || doc.getElementsByTagName("head")[0],
node,
createNode = function(name, attrs){
var node = doc.createElement(name), attr;
for (attr in attrs) {
if (attrs.hasOwnProperty(attr)) {
node.setAttribute(attr, attrs[attr]);
}
}
return node;
}
if(iscss){
node = createNode("link",{
type : "text/css",
rel : "stylesheet",
href : url
});
}else{
node = createNode("script",{
type : "text/javascript",
url : url
});
}
node.setAttribute('charset', 'utf-8');
this.xx = node;
if(iscss){
if(sniff == 2){
!function (){
var my = arguments.callee;
if(node.sheet && node.sheet.cssRules){
callback();
}else{
setTimeout(my,200);
}
}();
}else{
node.onload = function(){
callback();
}
}
}else{
if(node.readyState){
script.onreadystatechange = function(){
//if(script.readyState == "loaded" || script.readyState == "complete"){
if(/loaded|complete/.test(script.readyState)){
script.onreadystatechange = null;
callback();
script = null;
}
}
}else{
script.onload = function(){
callback();
}
}
}
head.appendChild(node);
}
//createJsCss("http://common.cnblogs.com/script/jquery.js",function(){console.log("load!!!")});
createJsCss("reset.css",function(){console.log("load!!!")});
</script>
<body>
<!--
<img src="http://img02.taobaocdn.com/bao/uploaded/i2/T13ZDeXfNsXXXOjLs1_041123.jpg"><br>
<img src="http://img04.taobaocdn.com/bao/uploaded/i4/13444019606750826/T1antaXqteXXXXXXXX_!!0-item_pic.jpg"><br>
-->
</body>
</html>
数据访问
数据的存储位置会在很大的程度上影响读取速度,javascript里面也一样,js只有四中存储方案,直接量,变量,数组,对象成员。读取速度
什么是直接量了 如下
var a = "asdf";
a.split(""); //这里就是变量
"asdf".split("");//这里就是直接量了
直接量,变量读写消耗很少,数组,对象消耗较多
还有一个就是作用域了,当前的作用域下的变量肯定比 其他作用域下的变量要快,(高性能javascript 里面的作用域讲的非常好了,推荐看),而且标示符所在的位置越深,它的读写速度越慢,所以拿一个全局变量引用更深层次的变量,是个好方法
闭包变量(暂且这么叫),它是会一直占着内存的,而且GC不会回收,好处就是可以提高访问速度
对象的属性查找 比如a.b,它是会查找所有的a下的属性,所以这个也不能滥用啊,像这种嵌套的也拿变量保存起来用吧,一般2次以前的嵌套对象就可以拿一个变量来保存了(其实我写代码中,一直遵循这个原则,特别是在遍历当中,把嵌套的变量提出来很有必要)
一个例子
var comm = {
options : {
hey : "hey,I miss you",
arr : ["rain now"]
}
}
alert(comm.options.hey)
alert(comm.options.arr.join(""))
// 如果多次使用 comm.options 肯定拿个变量保存比较好
var options = comm.options;
alert(options.hey)
alert(options.arr.join(""))
遍历中更为重要
var comm = {
a:{
hey : "hey,I miss you"
}
}
var arr = [1,2,3,4,5,6,7,8,9]
for(var i=0,l=arr.length;i<l;i++){
console.log(comm.a.hey)
}
// 遍历中取变量的值的时候 一定要把变量提出来啊
var arr = [1,2,3,4,5,6,7,8,9],
hey = comm.a.hey
for(var i=0,l=arr.length;i<l;i++){
console.log(hey)
}
相关推荐
高性能JavaScript编程中英对照版,带有标签和备注笔记,欢迎加入web前端交流群(75701468)共享免费下载。
High Performance JavaScript(高性能JavaScript)读书笔记,让你的js代码更有效率。
局部变量也就可以理解为在函数内部定义的变量,很明显访问局部变量要比域外...由上图可以看出,要想优化代码的性能,那么尽量使用直接量和局部变量,限制数组项和对象成员的访问次数(将对象成员用一个局部变量来保存)。
主要介绍了读Javascript高性能编程重点笔记,需要的朋友可以参考下
最近几年,Web前端的发展非常迅速,并呈现出一片欣欣向荣的景象。...国内Web前端开发者普遍不重视代码规范,以及网站前端性能。很多网站甚至连最基本的前端代码压缩和合并都没有。本书立足于Web前端开发的基础
Redis 是一个高性能的key-value数据库。 redis的出现,很大程度补偿了memcached这类key/value存储的不足,在部 分场合可以对关系数据库起到很好的补充作用。它提供了Java,C/C++,C#,PHP,JavaScript,Perl,Object...
最近在看一本书:《高性能javaScript》,发现自己平时写js存在很多小细节上的问题,虽然这些问题不会导致程序运行出错,但是会导致界面加载变慢,用户体验变差,那么我们就来细细数一下应该注意的地方吧
当单个键和值存在逻辑映射时,可以用一个数组作为查找表来代替、位操作按位与 两个操作数的对应位都是1时,则在改为返回1按位或 两个操作数的对应位只要有一个为1时,
近在学习《高性能网站建设指南》这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看。 性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML...
Jetty是一个纯Java实现的开源Servlet容器,Jetty也可以作为HTTP服务器和HTTP客户端,Jetty仪器轻巧,稳定和高性能而著称,完全可以胜任企业级Servlet容器的要求。Jetty允许Apache Licence 2.0或者Eclipse Public ...
探索该语言的一些鲜为人知但有用的功能,例如如何在不同的浏览器上调试JavaScript问题并提高性能。 使用第三方JavaScript库创建交互式网页。 实验室中提供了计算机,但建议您带一台笔记本电脑进行课堂练习。先决...
前段时间花时间看了大半的《High Performance JavaScript》这本书啊,然后就开始忙项目了,庆幸最忙的一周已经熬过去了。由于空不出时间,这个月写的学习笔记也不多,忙完最苦X的一周,这两天晚上也算是挑灯夜读了…...
自学笔记 1 章 JavaScript 简介 .................................1 1.1 JavaScript 简史 ..........................................1 1.2 JavaScript 实现 ..........................................2 1.2.1 ...
这是一份整理的前端学习笔记,主要是关于学习前端的过程和知识的梳理,包括计算机基础知识、JavaScript、webpack 等,这个过程中也参考了很多的文章和课程,感谢这些内容帮助。期望这份笔记也可以对你学习前端有帮助...
移动友好型高性能编辑器,可轻松编写和读取嵌套笔记。 这是的分支,主要基于工作。 我喜欢使用Standard Notes,这是一个很棒的开源项目。 在开始使用Standard Notes之前,我一直对基于电子的应用程序持怀疑态度。 ...
看了《高性能JavaScript》的读书笔记 几个原则: 1、将脚本放在底部 <link>还是在head中,用以保证在js加载前,能加载出正常显示的页面。 [removed]放在</body>前。 2、成组脚本 由于每个[removed]标签...
获得一对一帮助,或安排见面时间 课程说明 在这门五节课的密集课程中学习 JavaScript 的最佳实践。 主题包括数据封装、闭包、绑定、继承和名称间距。 发现该语言的一些鲜为人知但有用的功能,例如如何在不同浏览器...