至于为什么CSS写在头部,是因为浏览器预先加载CSS后,可以不必等待HTML加载完毕就可以开始渲染页面了。
至于JavaScript写在尾部,这是因为JS主要扮演事件处理的功能。这样的话,页面渲染的时候和JS没有关系,放在后面慢慢加载,不要影响更重要的CSS和HTML的加载。
BUT!
但是,现在随着JS技术的发展,JS也开始承担起页面渲染的工作了,比如JQuery UI之类。如果这类JS加载需要很长时间,就会影响用户的体验,因为用户看到的是一个渲染不完全的界面。
所以,需要把JS区分看待,承担页面渲染工作的JS和承担事件处理的JS要区分看待。
我的建议是,缓存类似JQuery UI这样的静态文件,剥离渲染页面的JS和事务处理的JS。
渲染页面的JS放在前面,事务处理的JS放在后面,HTML代码可以放在两者中间,或者两者之前,只要保证DOM加载后能迅速进行JS渲染就可以了。
图片我这上传不了,公司代码条例明确禁止。
具体操作如下:
用Firefox 打开网页。
右键页面,审查元素
在Element选项卡中,左侧显示的是页面代码,右侧显示的是相对应位置的Css样式
单机样式位置的 xxx.css,Firefox会自动把该 xxx.css文件打开
在css文件中,Ctrl+A 全选 Ctrl+C Copy Ctrl+V paste
方式二
用Firefox打开网页
右键页面,查看源代码
源代码页面head区域会有该页面的所有.css文件,你点击对应的Css文件,浏览器会自动打开该css文件,然后你重复方式一的第五步骤就ok了