前端基本概念

2017-12-07 Thursday    


简介

在前端的页面中,核心包括了三部分:

  1. HTML 主要包括了文字、图片、链接,其它还有音乐、程序等非文字元素的标记语言;
  2. CSS 可以定制化 HTML 中元素显示的样式,从而更加美观;
  3. JavaScript 一种解释性脚本语言,可以用来给 HTML 页面增加动态、交互功能。

三者构成了现在比较成熟的前端页面,基本的位置为。

<html>
	<head>
		<!-- 页面标题、序言、说明等,本身不作为内容来显示,但影响网页显示的效果 -->
	</head>
	<body>
		<!-- 显示实际内容 -->
	</body>
</html>

加载顺序

浏览器接收到代码后到最终的页面展示,主要包括了三个步骤:DOM 构造、生成页面布局以及绘制页面。

DOM 解析

解析接收到的 HTML 代码,构建为一颗 DOM 树。这棵树包含了各个节点之间的关联关系,例如父子、兄弟关系。同时,当接收到 CSS 之后会同时进行解析,并对应到 DOM 树上,得到一个带有样式属性的 DOM 树。

其它

块级元素 VS. 行内元素

行内元素只占据它对应标签的边框所包含的空间,只能容纳文本或者其它内联元素;而块级元素会占据其父元素的整个空间,通常浏览器会在块级元素前后另起一行,此时可以容纳其它块元素或者内联元素。

TCP 在建立链接时,因为无法确定真正的带宽是多少,所以会有 TCP Slow Start 启动,也就是最开始只传 14Kb 字节。

JavaScript

JS 通常会添加到两个位置,一个是在 <head> 标签里面,另一个是 <body> 标签快结束的地方,也就是 </body> 上面。

  • CSS 文件的解析与 DOM 解析是可以并行的,不存在相互阻塞;
  • JS 解析会阻塞 DOM,主要是因为 JS 可能会修改 DOM 内容,导致需要重新构建 DOM 树;

因为 JS 阻塞 DOM 解析,也就意味着,如果 JS 文件过大,会导致浏览器页面加载过慢,出现假死状态,导致用户体验较差;另外,如果 JS 要操作 DOM 元素,就需要等页面加载完成后在操作,否则可能会出现找不到 DOM 节点。

优化

需要保证 JS 是一个外部脚本,有两种方式进行优化:A) 标签中添加 defer="ture" ,表示 JS 与 DOM 并行加载,待页面加载完成后再执行 JS 文件;B) 标签添加 async="ture" ,也就是 JS 是异步加载,不依赖其它 JS 和 CSS 等。

如果两者都出现,那么 defer 属性会失效,另外,也可以将 scirpt 标签放在 body 标签之后,这样就不会出现加载的冲突了。

参考



如果喜欢这里的文章,而且又不差钱的话,欢迎打赏个早餐 ^_^