关于style标签所处位置带来的影响
一般来说,页面样式可以通过以下几种方式使用
1、在标签中使用style属性设置标签样式,也就是行内样式,
2、使用link标签在h5头部head中引入外部样式文件,也就是所谓的外联引入,
3、通过style标签嵌入到h5文档中,也就是嵌入式。
前面两者样式使用的位置基本是固定的,第三个嵌入式的位置可以随意插入到文档的任意位置,页面都能够将样式渲染出来。你可以将style标签放在head标签中,也可以将之放到body标签之内任何一个位置,也可以放在body结束标签之后,html结束标签之前,甚至可以放在html结束标签之后。虽然style标签的位置随意,但是并不推荐将他放置到head标签之外。
<!doctype html>
<html>
<head>
<meta charest="UTF-8">
<title>标题</title>
<style></style>
</head>
<body>
<!--<style></style> -->
<div></div>
<!--<style></style> -->
</body>
<!--<style></style> -->
</html>
<!--<style></style> -->
涉及到以下几个原因:
1、不便于开发人员维护:style标签放在head标签以外的地方时,一旦文档内容多,那么到时需要修改样式时找起来比较麻烦,调试起来也就更麻烦。
2、会引起页面重回与回流,从而降低网页加载速度,影响页面展示效果。
网页是由DOM Tree和样式组成的渲染树(render tree),渲染树构建完成之后,浏览器会根据这个渲染树来绘制页面。
重绘:就是渲染树中的一些标签的属性发生了改变,但这些属性的改变只会影响元素的外观、风格,但并不会影响到元素的布局。
回流(重排):渲染树中一些标签的属性发生改变,但这些属性的改变引起了元素布局的改变,例如(元素长宽改变、显隐改变、位置改变)
h5文档是从上而下进行加载并解析的,假如你把style标签放置在body标签中,或者放到html结束标签之后,当文档加载解析到了style标签的时候,发现他给页面的某些标签设置了样式,于是浏览器只好给每个元素重新计算样式,再加载出来,在这个过程中,时间明显的浪费了,这也就导致页面的加载速度变慢。
虽然style标签可以放在文档的其他位置,但h5的规范就是将style标签放在head中,尽量按规范行事。