浏览器内核加载和渲染(解析)

杂医阿基师 · 1 浏览器内核加载和渲染(解析) 2012-10-10, 08:26

杂医阿基师

四品红豆官

帖子数 : 214
官饷 : 640
官声 : 0
注册日期 : 11-04-26
年龄 : 34

1.浏览器内核（javascript引擎线程,GUI渲染线程,浏览器事件触发线程）
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上
Webkit内核：Safari,Chrome
http://www.iefans.net/liulanqi-neihe-jiexi/
http://fed.renren.com/2010/01/247
2.例子解析

代码::  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <style type="text/css"> ul { list-style: none; width: 1200px; height: auto;} ul li {float: left; border: 1px solid red; padding: 10px;} </style>  <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/ajaxfileupload.js"></script> <script type="text/javascript">  alert('=='); $(function() {  alert("\=\\");// 最后的原因是因为window.onload 这种会等界面加载渲染完在执行 }); </script> </head> <body> <div> <span><a id="sj" href="http://blog.163.com/xiangfei209@126/blog/#">实景图</a></span> <span><a id="hx" href="http://blog.163.com/xiangfei209@126/blog/#">户型图</a></span> </div>  <ul id="gardenPhotoList"> <li>sdsfddsfsdffds</li> <li>sdsfddsfsdffds</li> <li>sdsfddsfsdffds</li> <li>sdsfddsfsdffds</li> <li>sdsfddsfsdffds</li> <li>sdsfddsfsdffds</li> </ul>  <script type="text/javascript"> alert("--"); </script> sdfffffffffffffffffffff  <script type="text/javascript"> alert("***x") </script> sdfdsfdsf </body> </html>

从例子的走向可以知道：
a.加载和渲染是同时进行，加载或者渲染都是从上而下。
b.至于为什么js放在body后效率要好，因为js里面如果有操作dom，等dom加载完成后
操作更好，如果没有加载完成，就会出现等待状态，
c.css放在head效率更高，因为当加载body元素就可以马上渲染，如果css放在body后，组建如果过多，会
出现空白，不能马上得到渲染
d.IE 6/7 Opera? 按文档顺序解析，CSS并行加载，外部JS串行加载，阻塞后续资源
IE 8/9 JS并行加载
Firefox & Chrome? 分析文档结构，优先并行加载css和js

最新主题

1 浏览器内核加载和渲染(解析) 2012-10-10, 08:26

杂医阿基师