js简单性能问题以及js学习总结博客分类： javascript jsjavascript性能

程序员文章站 2024-03-14 10:23:10

...

最近在看一本书：《高性能javaScript》，发现自己平时写js存在很多小细节上的问题，虽然这些问题不会导致程序运行出错，但是会导致界面加载变慢，用户体验变差，那么我们就来细细数一下应该注意的地方吧！！！

1、<script>标签应越少越好（虽然有多个也不会导致程序报错），因为每个<script>标签初始下载时都会阻塞页面渲染
2、<script>标签尽量不要放在页面上方，尽量放在<body>内的最下面，因为每个<script>在执行的时候，都会下载对应的js文件，浏览器会等待所有js/css下载完成才显示出页面
3、当需要导入多个js文件的时候，一般情况下我们都是写两个<script src="..." />，实际上是支持一次性导入多个的，例如：<script src="file1.js&file2.js" />
4、<script>标签中有一个属性：defer，该属性指明本元素所含的脚本不会修改DOM，因此代码能安全地延迟执行，但是该属性只有IE4+和Firefox3.5+浏览器支持，希望大家使用的时候注意，如果其他浏览器，则会被直接忽略，使用例子：

<script type="text/javascript" src="file1.js" defer />

，测试验证defer属性示例：

<script defer>alert("defer");</script>
<script>alert("script");</script>
<script>
window.onload = function() {
alert("load");
};
</script>

这段代码在我们正常理解下执行顺序应该是：defer、script、load，但是如果在支持defer的浏览器上顺序则是：script、defer、load，这里需要注意的是：defer不是跟在script后面执行，而是在onload事件处理之前被调用

未完....待续，后续会继续更新，希望大家关注！

js简单性能问题以及js学习总结 博客分类： javascript jsjavascript性能