2019独角兽企业重金招聘Python工程师标准>>> 
- 无论是外链还是内链，<script>标签每次出现都霸道地让页面等待脚本的解析和执行。这是页面生存周期的必要环节，因为脚本执行过程中可能会修改页面内容。
- 在<header>标签中加载多个javascript文件，由于脚本会阻塞页面渲染，直到它们全部下载并执行完成后，页面的渲染才会继续。浏览器在解析到<body>标签之前，不会渲染页面的任何部分。把脚本房东啊页面顶部将会导致明显的延迟，通常表现为显示空白页面，用户无法浏览内容，也无法与页面进行交互。
- 现在的浏览器基本都允许并行下载javascript文件，<script>标签在下载外部资源时不会阻塞其它<script>标签，遗憾的是，javascript下载过程仍然会阻塞其它资源的下载，比如图片。
- 脚本位置：推荐将所有的<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。
- 组织脚本：减少页面包含的<script>标签数量有助于 改善下载阻塞页面渲染，不要把内嵌脚本紧跟在<link>标签之后，不然会导致页面阻塞去等待样式表的下载。下载单个100kb的文件将比下载4个25kb的文件更快。
- 无阻塞的脚本：尽管下载单个较大的js文件只产生一次http请求，却会锁死浏览器一大段时间。为避免这种情况，你需要向页面中逐步加载js文件，这样做在某种程度上来说不会阻塞浏览器。
“无阻塞脚本的秘诀在于，在页面加载完成之后才加载js代码，这意味着在window对象的load事件触发后再加载脚本。”
- 延迟的脚本：<script>的扩展属性defer.
defer属性指明本元素所含的脚本不会修改dom,因此代码能安全地延迟执行。（但是跨浏览器不是个理想的方案，其它浏览器会被忽略）
不过现在主流兰奇都已经支持defer.
html5引入了async属性，用于异步加载脚本。与defer的相同点都是采用并行下载，在下载过程中不会产生阻塞。
区别在于，async是加载完成后自动执行，而defer需要等待页面完成后执行。
defer属性仅当src属性声明时才生效。 - 动态脚本元素：
function loadScript(url, callback) {var script = document.createElement("script");script.type = "text/javascript";if(script.readyState){//iescript.onreadystatechange = function () {if(script.readyState == "loaded" || script.readyState=="complete"){script.onreadystatechange = null;callback();}};}else {//其它浏览器script.onload = function () {callback();};}script.src = url;document.getElementsByTagName("head")[0].appendChild(script);}
- 推荐的无阻塞模式：
https://github.com/rgrove/lazyload
https://github.com/getify/LABjs
