前端性能优化个人总结

一、<script>标签的位置。

按照传统的做法，所有<script>元素都应该放在页面的<head>元素中，例如：

<!DOCTYPE html>
<html>
   <head>
     <title>Example HTML Page</title>
     <script type="text/javascript" src="example1.js"></script>
     <script type="text/javascript" src="example2.js"></script>
   </head>
   <body>
     <! --这里放内容-->
   </body>
</html>

这种做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。可是，在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代Web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面，例如：

<!DOCTYPE html>
<html>
   <head>
     <title>Example HTML Page</title>
   </head>
   <body>
     <! --这里放内容-->
     <script type="text/javascript" src="example1.js"></script>
     <script type="text/javascript" src="example2.js"></script>
   </body>
</html>

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

二、最佳实践是使用外部文件而非在HTML页面中直接嵌入JavaScript代码。

在HTML中嵌入JavaScript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码。浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。

三、语句结尾加分号

虽然语句结尾的分号不是必需的，但建议任何时候都不要省略它。加上分号也会在某些情况下增进代码的性能，因为这样解析器就不必再花时间推测应该在哪里插入分号了。

未完待续。。。。。。。。。。。。。。

扫描二维码关注公众号，回复： 2516970 查看本文章

前端性能优化个人总结

猜你喜欢