本文介绍了大型网站中样式表和JS文件的加载顺序及其原因。以京东为例，详细说明了全局配置与页面配置的加载顺序，并解释了为什么将某些配置定义为属性而非变量。此外，还探讨了CSS和JS的加载顺序如何影响页面渲染。
对于大型网站，样式表，js文件有多个，这时加载顺序有讲究：
以京东为例：
对于js：
先加载全局配置，然后加载当前页面配置
先加载base-v1.js, 再加载当前页面配置 window.pageConfig = {...} (为啥要把pageConfig定义为一个属性，而不是单独定义一个变量，因为如果用一个未定义的属性时会ie下回报错，而用一个未定义的变量时不报，firefox都会报错）
当然，今天把base-v1.js放到了后面，我感觉放到前面更好些
对于css：
先加载全局样式表base.css，然后加载当前页面样式pshow.css
这样做的好处是，先加载全局样式，初始化一些公用样式，再加载本页面样式，对公用样式有冲突的地方进行修改。
衍生：
JS方法执行顺序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS方法执行顺序Demo</title>
<script type="text/javascript" src="js.js" defer="defer"></script>
<script type="text/javascript">
function callBack(str){
try{
get_msg(‘ok’);
}catch(e){}
alert("OnLoad中的方法");
}
</script>
</head>
<body onload="callBack();">
<script type="text/javascript">
alert("页面中的方法");
</script>
</body>
</html>
//js.js文件方法如下
function get_msg(str){
alert("js文件中方法！"+str);
}
结果提示顺序：
1.页面中的方法
2.Js文件中的方法ok(defer中延迟加载方法，会在onload事件之前执行)
3.OnLoad中的方法
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
