谈谈javascript放在哪里更合适
关于javascript放在哪里更合适
脚本位置:
例如以下代码:
<html> <head> <title>Script Example</title> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="file3.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> </body> </html>
上面看起来很正常的代码,在载入的时候就会有性能问题:在<head>中加载三个js文件,由于脚本会阻塞页面渲染,知道他们全部下载并执行。
下图显示加载时:
为了尽量减少对整个页面的影响,让页面渲染完成之后开始下载执行js文件。例如:
<html> <head> <title>Script Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> <!-- 页面渲染完成后,下载执行js --> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="file3.js"></script> </body>
</html>
Inline JavaScript
如果页面渲染的过程需要用到js文件,我们可以采取内联javascript。例如:
<html> <head> <title>Script Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" > /*写入相应的代码*/ </script> </head> <body> <p>Hello world!</p> <!-- 页面渲染完成后,下载执行js --> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="file3.js"></script> </body> </html>
延迟脚本
HTML4允许我们给script标签添加属性:“defer”来告诉我们本元素所含的脚本不会修改DOM,因此代码能够安全的延迟执行。该属性只有IE4+ 和 Firefox3.5+的浏览器支持。可以将<script "file1.js" defer></script>放到页面任何一处,他将会在页面解析到<script>标签时才会并行下载,但是不会执行file1.js文件,知道DOM加载完成。下载的时候不会阻塞浏览器的其他进程。
异步加载
HTML5允许我们给 script
标签添加属性: "async"
来告诉浏览器不必停下来等待该脚本执行,什么时候下载完什么时候执行该脚本就可以了。这样的话浏览器会边下载js文件
边渲染后面的内容。
当然如果file2.js需要依赖file1.js,那么file1.js就不能异步加载了。
<html> <head> <title>Script Example</title> <script type="text/javascript" src="file1.js" async></script> <script type="text/javascript" src="file2.js" async></script> <script type="text/javascript" src="file3.js" async></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> </body> </html>
组织脚本
为了减少性能消耗,在大型的网站或者网络应用需要依赖数个js文件的时候。你可以把多个文件合成一个。例如:
<html> <head> <title>Script Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" > /*写入相应的代码*/ </script> </head> <body> <p>Hello world!</p> <!-- 页面渲染完成后,下载执行js --> <script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script> </body> </html>
还可以将就多个文件进行合并压缩,http://ganquan.info/yui/?hl=zh-CN ,1个100kb的js文件下载比4个25kb的js文件更快。
结论:
当页面加载时在HTML head部分中的JavaScripts会在被调用的时候才执行,在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在页面加载时我们需要让页面内容尽快呈现给用户,页面初始渲染所需要的JS和CSS可以直接在 <head>
标签中以代码形式插入。所有的外部文件引用可以放在页面内容之后,对于JS文件也可以采用异步 加载。
关于defer跟async的可以参考 http://www.cnblogs.com/xiaokk06/p/4966801.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库