1.js和css的放的位置顺序与加载速度分析
为了让客户先看到效果,必须要先加CSS
如果在先head加载CSS,如果CSS大,会先下载CSS,再渲染HTML标签
如果CSS放在head中,当显示出HTML时,会正常的显示出前台效果
CSS不要放在body中,这样会显示效果是,会有问题,一显示页面是乱码,这样会让客户误以为当前网页有问题
JS存放问题
如果在head中放入js,会先加载JS,再渲染HTML,这样在速度上会大大降底,
必须要在第一时间向客户展现前台效果,再加载其它特效
所以最好JS是放在</body>之前,不在放在head中,
外部JS与内部JS,内部JS一定要放在外部JS前面。
-------------------------------------------------------
CSS文件后面的会覆盖前面的:如global.css会覆盖之前的样式表
JS文件后面的会引用前面的,如将global.js放在最开始,则会报一个找不到jQuery的错误,因此jQuery这种类库级的文件应该放到最开头。
-------------------------------------------------------
顺序一般是:
1. 个别特殊JS,比如用于调试的基础脚本(部署时未必有)、性能日志之类,必须放在尽量最前的位置。
2. 外部样式表(link[rel=stylesheet])
3. 本页样式(style)
4. 基础库,比如loader,各种shim/polyfill,jQuery之类的
注意,有些网站制作开发者从性能优化的角度倾向于加defer或者放到页面的最底部。不过不是所有的脚本都能这样做。比如html5-shim脚本必须在body之前加载。再如history api的兼容实现等都不应defer,因为你不能确保用户在页面ready之前没有back/forward动作。再如jQuery,defer是可以,但也意味着你所有依赖jQuery的功能都需要defer,考虑到这些静态文件通常都是有缓存的,所以不defer也未必不是一个可以接受的折衷。
5. 少量本页script
--------------------------------------------------------
可以看出嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。
--------------------------------------------------------