深入JS系列学习4

深入JS系列学习4

Javascript 装载和执行

明白了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文件的方式

从事前端开发必须要了解的CSS原理

二、浏览器是如何渲染页面和加载页面

 

　　为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始：

 

　　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;}

来自为知笔记(Wiz)Time=2013-07-26 21:26:05