Recommended
More Related Content
Similar to 浏览器加载原理
Similar to 浏览器加载原理 (20)
浏览器加载原理
- 2. 各浏览器的顺序 <head> <link href="header1.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="header1.js"></script> </head> <body> <img src="body1.jpg" alt="" /> <p>body2.jpg</p> <img src="body2.jpg" alt="" /> <script type="text/javascript" src="body2.js"></script> <link type="text/css" rel="stylesheet" href="body2.css" /> <img src="body3.jpg" alt="" /> <img src="body4.jpg" alt="" /> <link type="text/css" rel="stylesheet" href="body3.css" /> <script type="text/javascript" src="body3.js"></script> <img src="body5.jpg" alt="" /> <img src="body6.jpg" alt="" /> </body> </html>
- 10. 各浏览器的顺序 FF7.0
- 11. 各浏览器的顺序 FF7.0
- 12. 各浏览器的顺序 IE9.0
- 13. 各浏览器的顺序 Chrome
- 14. 各浏览器的顺序 总结： 1、所有浏览器都是先加载html的，所以要尽量精简html， 做到结构、表现、行为分离； 2、考虑JS阻塞加载其它元素。 3、各浏览器对CSS 和JS 加载是一样的。 Chrome
- 15. 各浏览器的并行数量 Browser HTTP/1.1 HTTP/1.0 IE 6,7 2 4 IE 8 6 6 Firefox 3+ 6 6 Safari 3+ 4 4 Chrome 3+ 4 4 Opera 10+ 4 4
- 16. 浏览器对CSS selector的匹配 对于一个selector，是从右至左匹配的，如 div#divBox p span.red{ color:red;….} 浏览器先找到所有class为red 的span,然后再在这些span里， 找出父容器为p的元素，再找出父容器中id为divBox的div 的p。 浏览器这样做，是为了尽早过滤掉一些无关的样式规则 和元素。 firefox称这种查找方式为keyselector(关键字查询)，所谓的 关键字就是样式规则中最后(最右边)的规则，上面的key 就是span.red。