深入JS系列学习4
明白了JS的装载和执行,没有给出很好的解决方案,在IE下可用defer属性;
浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行。
 
  因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件,因为这是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,DOM树时还没有后面的DOM结点。所以程序也就报错了。
 
所以,你知道为什么有很多网站把javascript放在网页的最后面了,要么就是动用了window.onload或是docmuemt ready之类的事件。因为,绝大多数的Javascript代码并不需要等页面,可以异步载入。
script的defer和async属性
 
  IE自从IE6就支持defer标签,如:
 
<script defer type="text/javascript" src="./alert.js" >
</script> 
  对于IE来说,这个标签会让IE并行下载js文件,并且把其执行hold到了整个DOM装载完毕(DOMContentLoaded),多个defer的<script>在执行时也会按照其出现的顺序来运行。最重要的是<script>被加上defer后,其不会阻塞后续DOM的的渲染。但是因为这个defer只是IE专用,所以一般用得比较少。
 
  而我们标准的的HTML5也加入了一个异步载入javascript的属性:async,无论你对它赋什么样的值,只要它出现,它就开始异步加载js文件。但是, async的异步加载会有一个比较严重的问题,那就是它忠实地践行着“载入后马上执行”这条军规,所以,虽然它并不阻塞页面的渲染,但是你也无法控制他执行的次序和时机。你可以看看这个示例去感受一下。
 
  支持 async标签的浏览器是:Firefox3.6+,Chrome 8.0+,Safari 5.0+,IE 10+,Opera还不支持(来自这里)所以这个方法也不是太好。因为并不是所有的浏览器你都能行。
 
动态创建DOM方式
 
  这种方式可能是用得最多的了。
 
function loadjs(script_filename) {
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', script_filename);
    script.setAttribute('id', 'coolshell_script_id');
    script_id = document.getElementById('coolshell_script_id');
    if(script_id){
        document.getElementsByTagName('head')[0].removeChild(script_id);
    }
    document.getElementsByTagName('head')[0].appendChild(script);
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(script); 
  这个方式几乎成了标准的异步载入js文件的方式
二、浏览器是如何渲染页面和加载页面
 
  为什么有些网站打开的时候会加载会很慢,而且是整个页面同时显示的,而有些网站是从顶到下逐步显示出来的?要搞懂这个可以先从下面这个常规流程开始:
 
  1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
 
  2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
 
  3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
 
  4. 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
 
  5. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
 
  6. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。
 
  这里关键的是第2-5这三点。渲染效率与下面三点有关:
 
  1. CSS 选择器的查询定位效率
 
  2. 浏览器的渲染模式和算法
 
  3. 要进行渲染内容的大小
 
采用 CSS+DIV 进行网页重构,相对与传统的 TABLE 网页布局而具有以下3个显著优势:
 
  1. 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。
 
  2. 提高页面浏览速度。对于同一个页面视觉效果,采用 CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。
 
  3. 易于维护和改版。你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。
 
所谓高效的 CSS 就是让浏览器在查找 style 匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写 CSS 犯一些低效错误:
 
  1、不要在ID选择器前使用标签名
 
  一般写法:DIV#divBox
 
  更好写法:#divBox
 
  解释:因为ID选择器是唯一的,加上div反而增加不必要的 CSS 匹配。
 
  2、不要在 class 选择器前使用标签名
 
  一般写法:span.red
 
  更好写法:.red
 
  解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:
 
  p.red{color:red;}  span.red{color:#ff00ff}
  如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写
 
  3、尽量少使用层级关系
 
  一般写法:#divBoxp.red{color:red;}
 
  更好写法:.red{..}
 
  4、使用 class 代替层级关系
 
  一般写法:#divBox ul li a{display:block;}
 
  更好写法:.block{display:block;}

深入JS系列学习4的更多相关文章

  1. 深入JS系列学习3

    深入JS系列学习3 深入理解JavaScript系列(9):根本没有"JSON对象"这回事! 很多JavaScript开发人员都错误地把JavaScript对象字面量(Object ...

  2. 深入JS系列学习2

    今天看和学习了深入理解JS系列2.3.4.5,更加明白了函数声明和表达式的区别,自执行函数和立即执行函数,js强大的原型链继承,js中对象的想过写法,modules模式等. 在ECMAScript中, ...

  3. 【学习笔记】深入理解js原型和闭包系列学习笔记——精华

    深入理解js原型和闭包笔记: 1.“一切皆是对象”,对象是属性的集合. 丨 函数也是对象,但是使用typeof时为什么函数返回function而 丨  不是object呢,js为何要对函数做这样的区分 ...

  4. MVC系列学习(十三)-合并JS和CSS

    1.先来看看,不用合并js的情况,传输量大 1.1新建一个 [基本]的mvc项目 然后新建一个控制器HomeController,因为js会在很多视图中用到,所以此时我们添加一个视图带布局页Index ...

  5. MVA Universal Windows Apps系列学习笔记1

    昨天晚上看了微软的Build 2015大会第一天第一场演讲,时间还挺长,足足3个小时,不过也挺震撼的.里面提到了windows 10.Microsoft edge浏览器.Azure云平台.Office ...

  6. 【JS复习笔记】03 继承(从ES5到ES6)

    前言 很久以前学习<Javascript语言精粹>时,写过一个关于js的系列学习笔记. 最近又跟别人讲什么原型和继承什么的,发现这些记忆有些模糊了,然后回头看自己这篇文章,觉得几年前的学习 ...

  7. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  8. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  9. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. Struts2 Spring hibernate 整合示例 .

    示例工具:MyEclipse 8.5.Tomcat 6.0.MySql 步骤: 1.创建一个WEB工程,命名为BookShop(名字自己取,此处为示例工程名): 2.导入struts2的核心jar包, ...

  2. Android(java)学习笔记226:服务(service)之为什么使用服务

    1.服务 service 长期在后台运行的进程,一般没有应用程序界面   2.进程线程和应用程序之间的关系 应用程序开启,系统启动一个Linux进程,所有的组件都是运行在同一个进程的同一个线程(mai ...

  3. 进程外session(session保存在sqlserver)

    .Session保存在SQLServer中配置方法 )运行.NetFramework安装目录下对应版本的aspnet_regsql.exe 来创建相关的数据库.表和存储过程等,比如: C:\Windo ...

  4. 【开源java游戏框架libgdx专题】-04-接口介绍及生命周期

    在核心项目中包含6大与操作系统交互的接口,每个后端都实现了这6大接口. Application:运行应用程序并通知API的客户端应用程序级别的事件,提供日志记录设施和查询方法,例如,内存使用. Fil ...

  5. 教你写Jquery插件

    最近很多网友说 jQuery插件是什么啊?怎么写的啊?我不会写啊? 一大堆的问题一时都不知道怎么回答他们,个人认为是网友们把问题复杂化了. 其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲 ...

  6. Linq101-CustomSequence

    using System; using System.Collections.Generic; using System.Linq; namespace Linq101 { class CustomS ...

  7. C# 汉字的字符串截取指定字节的长度

    int index = 0;            int setCharCount = 74;            string str1 = "三星 SCH-I829 电信3G手机(优 ...

  8. Data Types

    原地址: Home / Database / Oracle Database Online Documentation 11g Release 2 (11.2) / Database Administ ...

  9. Xcode6中如何修改文件中自动创建的Created by和Copyright

    转自: http://blog.csdn.net/bjourney/article/details/46832159 在Xcode6创建问的时候,会自动生成注释 //  Created byxxx o ...

  10. 【C#学习笔记】一、基础知识

    1.1数据类型(P43) 类型 别名 允许的值 sbyte System.SByte -128~127 byte System.Byte 0~255 short System.Int16 -32768 ...