随着js技术的发展,性能问题开始被越来越多的人关注,最近了解了一些关于前端性能的问题,这里主要讨论一下在js脚本加载和执行的过程中,我们应该怎么样来提高js的性能。
js脚本的处理
初学前端的时候,我们都习惯把script标签放在html文档里面的<head>或者<body>,理论上来说这样的设置会让页面按照正确的方式来解析和执行,但是这样的做法会产生严重的性能问题。因为js在浏览器里面执行是单线程的,所以在某个时刻只能执行某个唯一的线程,<script>标签的出现意味着页面必须等待脚本的解析和执行(通俗来讲就是在一心不能二用)。既然如此,那我们应该怎么处理js脚本在页面的载入位置呢?
可能产生的问题:页面加载的时候页面一片空白(浏览器下载解析脚本,页面还没有完成页面加载和渲染)
解决的办法:1)如果js脚本不影响页面展示的情况下,考虑把js脚本放在页面的底部,这样可以使得用户的视觉体验更好
2)将多个js脚本进行合并,及减少页面中外链接的数量(一般情况下,下载单个100k的文件比下载4哥25k的文件效率更高。虽然现在一些浏览器已经允许并行下载文件,但还是需要尽量减少文件的数量)
3)延迟脚本的处理(给不需要立即执行的脚本进行延迟处理 defer)