浅谈Javascript的加载方式和优化WordPress首屏加载时间

2019年9月25日 0 条评论 438 次阅读 1 人点赞

同步加载

我们平时最常使用的就是这种同步加载形式:
<script src="https://yourdomain.com/script.js"></script> 
同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。js 之所以要同步执行,是因为 js 中可能有输出 document 内容、修改dom、重定向等行为,所以默认同步执行才是安全的。以前的一般建议是把<script>放在页面末尾</body>之前,因为html是从上至下进行代码解析的,这样尽可能减少这种阻塞行为,而先让页面展示出来。

同步加载,标签在头部引入同步加载,标签在body中引入,可以明显看到右下角的load时间减少了10多秒,而红色区域的加载顺序也不是全部在最前面这跟html的加载顺序有关

异步加载

两者的主要区别,同步加载的 Timeline 是瀑布模型,而异步加载的 Timeline 是并发模型。

异步加载又叫非阻塞加载,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。这种方法是在页面中<script>标签内,用 js 创建一个 script 元素并插入到 document 中,这样就做到了非阻塞的下载 js 代码,常见的异步加载方法

下图是我用此方法创建了的一个console.js的异步加载例子,可以看到它的加载顺序在Timeline中相对靠后onload 时的异步加载

这和前面的方式差不多,但关键是它不是立即开始异步加载 js ,而是在 onload 时才开始异步加载,这样就解决了阻塞 onload 事件触发的问题
另外还有asyncdefer属性,这里我没有做过多研究

<script src="file.js" defer></script>
<script src="file.js" async></script>

除此之外js还有延迟加载,两阶段加载和按需加载等,详情可参考Javascript 异步加载详解

优化WordPress首屏加载时间

首屏就是你打开网页立马能见到的部分,而不需要下拉移动页面的部分,对于有很多内容和图片的站点,影响人们视觉上加载速度观感的的往往只是首屏而不是整个页面,比如我的美工作品合集图片展示页面,首屏部分放的是些尺寸和大小相对小一点的图片,这样在首屏之外加载的较大的图片不会影响浏览体验,然而一味强调首屏实际上是在骗自己,还是得从根源下手
一是使用更大带宽的服务器无法升级带宽或者因为价格高昂,也可以将大文件和图片等存在阿里云OSS,七牛云存储等地方托管,用图床也是可以的,还有就是使用内容分发网络(CDN),让不同地方的访问者就近获取网站内容,这些服务的价格和升级带宽相比不值一提,但也有些免费且不错的,比如我之前使用过CloudFlare
二是优化网页的结构对于WordPress而言,可以禁用Gravatar头像,设置文章默认图片,把一些css文件合并,把不同的功块进行组件化的写法,而不是全写在functions.php里,尽量少用不必要的插件等等,你也可以压缩文章页面,在functions.php中加入下列代码,能把网页的换行和空格等压缩

更多WordPress优化可以参考:WordPress优化提速必做的6种操作代码篇

Hungway

Hungway

If not me,who?If not now,when?

文章评论(0)