页面加载性能优化方案

选择以什么方式把css加载到页面中,决定了浏览器显示页面的速度。
度量Web性能的一个重要指标就是网页内容实际显示在屏幕上需要多久。这个指标被称为“渲染时间”或“上屏时间”。
现代浏览器在屏幕上渲染内容之前至少需要两样东西:HTML 和 CSS。这就意味着让浏览器尽快下载HTML和全部CSS极为重要。

1.减少HTTP请求
在链接外部样式时,每个文件都需要单独发送一次HTTP请求。那么,每次从服务器请求文件都会花一定的时间下载,然后再应用到页面中。
线上网页最好把需要加载的CSS文件数量控制在1或2个。只用一个link元素加载CSS文件。
2.压缩和缓存内容
使用GZIP压缩线上资源也非常重要。一般CSS文件压缩后会减少70%~80%。这样显然可以减少带宽占用,从而为用户节省时间。多数Web服务器都会在浏览器支持的情况下启用自动压缩线上资源。
3.不让浏览器渲染阻塞JavaScript
尽量不要在head标签中加入

	<!-- 最后加载JavaScript -->
	<script scr="/js/test.js"></script>
</body>
比较现代的做法是在<head>中使用<script>,但需要添加**async** 或 **defer** 属性。

实现一个异步加载脚本的效果。两者区别:前者不阻塞HTML解析,但会在脚本加载完毕后立即执行时会阻断HTML解析。后者会在HTML解析完毕后再执行加载的脚本,不会阻断HTML的解析。

<head>
	<!-- 异步加载,但下载后立即执行 -->
	<script src="/js/test.js" **async**></script>
	<!-- 异步加载,但在HTML解析后执行 -->
	<script src="/js/test.js" **defer**></script>
</head>

注意:async 和 defer 属性是HTML5中定义的,IE10和更早版本的IE并不支持或完全不支持它们。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值