让我们再聊聊浏览器资源加载优化

  几乎每一个前端程序员都知道应该把script标签放在页面底部。关于这个经典的论述可以追溯到Nicholas的 High Performance Javasript 这本书的第一章Loading and Execution中,他之所以建议这么做是因为:

Put all <script> tags at the bottom of the page, just inside of the closing </body> tag. This ensures that the page can be almost completely rendered before script execution begins.

  简而言之,如果浏览器加载并执行脚本,会引起页面的渲染被暂停,甚至还会阻塞其他资源(比如图片)的加载。为了更快的给用户呈现网页内容,更好的用户体验,应该把脚本放在页面底部,使之最后加载。

  为什么要在标题中使用“再”这个字?因为在工作中逐渐发现,我们经常谈论的一些页面优化技巧,比如上面所说的总是把脚本放在页面的底部,压缩合并样式或者脚本文件等,时至今日已不再是最佳的解决方案,甚至事与愿违,转化为性能的毒药。这篇文章所要聊的,便是展示某些不被人关注的浏览器特性或者技巧,来继续完成资源加载性能优化的任务。

  一. Preloader

  什么是Preloader

  首先让我们看一看这样一类资源分布的页面

<head>    <link rel="stylesheet" type="text/css" href="">    <script type="text/Javascript"></script></head><body>    <img src="">    <img src="">    <img src="">    <img src="">    <img src="">    <img src="">    <img src="">    <img src="">    <script type="text/Javascript"></script>    <script type="text/Javascript"></script>    <script type="text/Javascript"></script></body>

it知识库让我们再聊聊浏览器资源加载优化,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。