Web平台开发流程以及规范

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种方式都会阻塞其后资源的下载。

--------------------------------------------------------

高性能web开发 - 如何加载JS，JS应该放在什么位置？