HTML中使用javascript–读后感
每当浏览器解析到
<script>
标签(无论内嵌还是外链)时,浏览器会(一根筋地)优先下载、解析并执行该标签中的javaScript代码,而阻塞了其后所有页面内容的下载和渲染。
引入方式:
外联
内嵌
外联
<script src='xxx' type='text/javascript'></script>
script 标签部分属性:
1、async 脚本异步下载,不影响页面中的操作,只对外联 js 有效(定会页面 onload 之前执行,但可能会在 DOMContentLoaded 事件触发前后执行!)
思考场景:不相互依赖 js 包引入
2、defer 脚本延迟到dom节点渲染完毕加载执行,只对外联 js 有效
思考场景:js 包对dom节点操作、对另外 js 包有依赖
3、type 服务器传送 js脚本的 MIME 类型,可省略默认 text / javascript;
标签位置:
1、
<head>
2、<body>
后
3、使用 defer 属性(低版本浏览器兼容性不好)
注意:
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
alert('hello word!'); // alert 无效
</script>
<script>
alert('</script>'); // 当遇到</script>结束,正确:alert('</\script>')
</script>
// XHTML不严谨,不符合HTML规范,IE低版本解析出错
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" />