前端优化3_外部CSS文件和外部js文件

外部css文件应该放在html的顶部。

为什么呢?

浏览器想要将页面渲染出来,它至少要知道两个数据,

html结构在用户打开新页面时,最先下载下来,然后浏览器依次下载剩余的资源
css外部文件没有下载完成之前,浏览器无法渲染页面,所以用户在很长一段时间内看到的都是白屏。
做一个实验:
html文档部分:
[code]<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
Content
</body>
<link ref=”styleheet” href=”data.php?time=10″ type=”text/css”/>
</html>[/code]data.php//根据传递过来的参数,延迟time秒后再响应请求。
[code]<?php
$time=$_GET[‘time’];
sleep($time);
?>[/code]
此时,你打开页面,会看到超过10s的白屏。


补充:
在样式表中,通过@import引用其他的样式表,相对于将引用的样式表放在html文档最底部。所以不建议使用。

外部js文件应该放在html文档底部

为什么呢?

和外部css文件不同,外部js文件会在浏览器渲染的过程中阻塞渲染。
(原因是js程序可能会修改dom,所以会在渲染过程中下载并执行外部js,然后继续渲染)。
实验:
html文档:
[code]<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
Content
<script src=”data.php?time=10″></script>
End
</body>
</html>[/code]

此时,你打开该页面,会看到大约在渲染出“Content”10s后,“End”才渲染完成。
该例子表明,外部js会阻塞浏览器渲染的过程,所以应该把外部js放在浏览器的底部。

补充:
还有其他的一些延迟外部js加载的方法:

在script标签中添加defer属性。例如:<script src=”test.js” defer=”defer”></script>
此时,脚本会在浏览器完成渲染后执行,不会阻塞渲染。

在script标签中添加asnyc属性。例如:<script src=”test.js” async=”async”></script>
此时,脚本会与浏览器渲染同时执行,不会阻塞渲染。

» 本文来自:前端开发者 » 《前端优化3_外部CSS文件和外部js文件》
» 本文链接地址:https://www.rokub.com/5291.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!