关于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中，尽量按规范行事。
1582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
