页面加载性能之文本内容

文本内容主要包含:HTML,CSS,JavaScript。

在web页面里,每个字符都是要从服务器获取的,本文档主要讲述如何提升文本内容的加载速度。

分离开发和线上环境

如果你为了减小资源大小采取了一些措施,而影响到可读性,一定要记住当你直接修改线上代码的时候,之后可能无法理解当初为什么这么改。

所以经常性,我们会把开发和线上两个环境分离,开发环境是可读性良好的代码,线上则是采取了优化措施之后的可读性差的代码。

缩小代码体积

一个简单有效的方法就是移出多余的空格和不必要的字符,虽然我们读起来会吃力,但浏览器能看懂就行。

HTML,CSS,JavaScript都可以应用这种方式。

常见的工具

压缩文本资源

常用的是gzip的压缩,浏览器广泛支持,可以节省近70%的体积。

即使是已经压缩过的文件,gzip也能够进一步压缩。常见的做法是,先用工具压缩代码,再由服务器提供gzip压缩。

减少不必要的库依赖

为了使用某个功能,而引入一整个库,例如:想使用jQuery的toggleClass,可以直接引入单个方法,而不必要引入整个jQuery

总结

虽然一些大体积的资源,如图片,字体等是我们最关心的优化项,但也不能忽略了文本内容,毕竟文本内容才是网页的主体。

参考

https://developers.google.com/web/fundamentals/performance/get-started/textcontent-3

猜你喜欢

转载自blog.csdn.net/wuchen092832/article/details/107371634
今日推荐