将脚本放在body内容末尾的原因有两个,避免JavaScript操作DOM失效在解析JavaScript代码之前,页面内容完全呈现在浏览器中,用户会感觉到打开页面的速度变快了,因为浏览器显示空白页面的时间缩短了。将解释以下两个原因。原因分析:JavaScript阻塞HTML解析下图来自HTML规范,很清楚的描述了外部JavaScript对HTML解析的阻塞(内联脚本不加载脚本,直接执行)。图中parser:parsefetch:getresourceexecution:execute可以看到在解析JavaScript代码时(无论是内嵌代码还是没有defer或async属性的外部JavaScript),页面的处理会暂时停止,浏览器窗口将是空白的。换句话说,标签时,会唤醒JavaScript解释器,暂停对HTML的解析,等待CSSOM构建完成(如果有的话),开始执行JavaScript脚本,继续解析HTMLJavaScript执行后。换句话说,浏览器将等待JavaScript资源被下载并执行,然后再继续解析HTML。这时候,我们就会发现一个矛盾。JavaScript无法操作其下方的DOM,因为DOM尚未构建。因此,最好将JavaScript代码编写建议最后,根据上面的描述,给javaScript代码编写一些建议:最好将所有的JavaScript都引入到body元素在页面内容之后只包含一个延迟脚本将延迟脚本也放在页面底部将样式文件放在javascript之前(将css放在头部)
