去年我写了 网站性能优化系列文章,看过的朋友会知道,这类文章重点并非介绍各种具体的优化技巧,而是在关注发掘这些优化点的思路和方法.然后介绍给大家多种检测手段去发现问题,进而有目标的解决问题.所有这些需要我们对有网页整个生命周期有清晰的认识,对网页中各种技术极其相互结合的方式有明确的认知.这就回归到一个更本质的问题:浏览器端技术体系是怎样的.
想用三言两语说清前端技术不大可能,但是用一篇不长的文章说清何谓前端,还是可以做到的.因为工作中我常会给后台开发的同学介绍前台技术,所以会经常涉及这类话题.
解析前端,我想需要回答如下几个问题.
1.前端涉及几种技术?分别是做什么的?
2.在前端内部各种技术之间如何整合协作?
3.前端如何和后台交流?
回答这些问题我会立即丢出前端开发的"七种武器"论,介绍前端主要涉及七种技术分别是什么的同时,重点关注"七种武器"如何对内协作,如何对外交流.(鉴于本文的科普文性质,下面具体介绍中出现的"一切","都是","全部"这类定语可能并非绝对,但可以确定在99%的情况下是正确的)
一.HTTP:网页上的一切来自Http请求
页面上所有内容都是通过若干Http请求从服务端加载而来.
第一个请求通常是一份(X)HTML文档,也就是浏览器中地址栏的指向.如图:
(这张图可以通过Fixfox的Firebug插件,IE的Httpwatch工具,或者Chrome直接按Ctrl+Shift+I得到)
地址栏中的url通常会包含地址和一些参数,这样就可以找到对应的后台服务,同时让其据这些动态参数来确定输出内容.
多个Http请求之间是独立的.那么其他请求又是由谁触发的呢?
由浏览器触发!是在浏览器解析这第一份(X)HTML文档的过程中发出,接下来我就将介绍这个过程.
二.HTML:在浏览器中HTML被解析成DOM树
HTML文档是一份不那么严谨的XML(文本)文档.在任意网页上点击右键,点击查看源代码就可以看到.
浏览器按照HTML文档内容自上而下的解析运行.最终HTML文本被完整的解析成一颗树,称DOM树.
注意:DOM树是浏览器内一切所依附的根本,是本文的重点,以后也会多次强调.
(这张图可以通过Fixfox的Firebug插件,IE8/9按F12,或者Chrome直接按Ctrl+Shift+I找到)
继续回答之前的问题:其余的HTTP请求,除XHR(后面会介绍),CSS的@import和背景图之外,几乎都是在解析HTML时,由DOM树上的几种特定节点发起的.如图中重点标示出的那些节点: