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

来源：互联网发布：构建自己的linux系统编辑：程序博客网时间：2024/06/04 01:05

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

负责页面渲染的是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加载完了之后用回调函数上报。

如果要求更高，可以参考这篇文章：http://www.w3cfuns.com/notes/17878/553ff2163e545756100d2c9bebeeecda.html

0 0