浏览器端技术体系概览 -- 前端开发的七种武器

科普文一则,说说我对前端技术体系(也称浏览器端技术体系)的认识,希望能让更多人了解前端,也希望能借此丰富前端开发的大局观.

去年我写了网站性能优化系列文章,看过的朋友会知道,这类文章重点并非介绍各种具体的优化技巧,而是在关注发掘这些优化点的思路和方法.然后介绍给大家多种检测手段去发现问题,进而有目标的解决问题.所有这些需要我们对有网页整个生命周期有清晰的认识,对网页中各种技术极其相互结合的方式有明确的认知.这就回归到一个更本质的问题:浏览器端技术体系是怎样的.

想用三言两语说清前端技术不大可能,但是用一篇不长的文章说清何谓前端,还是可以做到的.因为工作中我常会给后台开发的同学介绍前台技术,所以会经常涉及这类话题.

解析前端,我想需要回答如下几个问题.
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树是浏览器内一切所依附的根本,是本文的重点,以后也会多次强调.

浏览器端技术体系概览 -- 前端开发的七种武器相关推荐

快速开发平台分享-UCML快速开发七种武器
传统的快速开发平台强调的是组件重用.构件重用,主要解决功能重用层面,一般提供了软件开发最常用的功能:表单设计.BPM(业务流程管理).报表.组织机构及权限等功能.但只有功能重用,没有过程重用,要么只能 ...
七种武器武装.NET（常用开发工具介绍）(转)
我学习.Net快一年了,偶然间发现大家用的开发工具很多我都没见过,于是暗中的进行收集(呵呵,夸张了),现在收集满七种特来做此总结!我称他们为"七种武器"\(^o^)/ 第一种武器长 ...
AI 渗透应用程序开发的七种趋势及方法
2019-11-25 17:12:31 如果你最近一直在关注科技新闻,那么可能已经读到了有关人工智能的新闻,无论好坏.它在你能想到的每个行业都留下了自己的印记.诸如Google,Facebook和Mi ...
构建云视频平台的七种武器分别包括长生剑、孔雀翎、碧玉刀、多情环、离别钩、霸王枪、拳头，这七种武器分别对应的是什么技术呢？该文将揭晓答案。
云视频平台的七种武器构建云视频平台的七种武器分别包括长生剑.孔雀翎.碧玉刀.多情环.离别钩.霸王枪.拳头,这七种武器分别对应的是什么技术呢?该文档将揭晓答案.
移动端开发者眼中的前端开发流程变迁与前后端分离
写在最开始这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨论开发流程的演变过程,希望能覆盖一部分前端开发技术栈,从而对前端开发的相关概念形成初步的认识. 本文会提供一 ...
web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
web前端技术亮点_Web前端开发职业技术要求规划
亲爱的朋友们: 大家好,我是演讲者-达达前端,也可以叫我 Jeskson ! 今天,我演讲的题目是<Web前端开发职业技术要求规划>.这个世界有很多不平凡的人,也有更多平凡的人,你是属于哪 ...
web端设计和web前端开发的区别
Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用各种工具进 ...
《Java 技术体系》之一：Java 技术体系概览
Java 编程语言诞生以来,围绕它建设而成的生态系统日益庞大而复杂: 它的热度经二十多年仍然不减,如今在互联网行业尤其流行. 本系列以 Java 8 (JDK 8) 为主要研究对象. TIOBE 编程 ...
css div里引用em字体会变斜体_前端开发中7种必要了解的CSS长度单位
众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利.随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长.因此,作为网页设计师和前端开发人员 ...

浏览器端技术体系概览 -- 前端开发的七种武器

浏览器端技术体系概览 -- 前端开发的七种武器相关推荐

最新文章

热门文章