【前端第七天】分享文章——首屏加速

最新推荐文章于 2026-06-24 11:53:39 发布

转载最新推荐文章于 2026-06-24 11:53:39 发布 · 1.1k 阅读

收录于

html

本文介绍了一种有效的网页首屏优化方案，通过合理安排资源加载顺序，确保用户在打开页面时能在2秒内看到完整的首屏内容。具体措施包括将关键CSS放在头部加载，将首屏渲染JS放在底部加载，并对非首屏内容进行延迟加载。

首先，了解一下首屏时间：在用户没有滚动滚动条的时候，所看到的页面完成渲染并且能过进行交互的时间。加载时间：整个页面，完成内容渲染和可以进行交互的时间。

负责页面渲染的是css，负责交互的是js。

原始的首屏优化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>不知所以</title>
    <!--此处用link标签链接样式表-->
</head>
<body>
<!--此处用script标签加载js文件-->
</body>
</html>

一般将首屏优化时间控制在2秒之内，如果用上面的方式还是不能满足，可以参考这篇文章：http://web.jobbole.com/83781/，这篇文章中有图片更容易理解。

本人读完这篇文章的理解如下：

改进：js可分为拉取数据的js，首屏渲染js，次屏渲染js，其他库js，report.js
Css：css渲染
首先我们要先拉取数据，（本人没有实战经验，查看他人的说法）这种方法相比将数据拉取逻辑放在外部资源会少一个js资源加载的往返时间 。
接着我们就要加载css渲染了。
以上两个放在头部
再接着，加载首屏渲染js，次屏渲染js。放在底部，在html返回时能迅速调用这些js
最后，其他js和report.js最后加载执行。此处提到上报数据 ，最好是在report.js加载完了之后用回调函数上报。