关注微信公众号
创头条企服版APP

您是个人用户,您可以认领企业号

Web前端优化之如何缩短页面加载时间?

3092

前端开发是创建Web页面或APP等前端界面呈现给用户的过程,其中会涉及到HTML、CSS、JavaScript等技术的使用,而从事前端开发的人也被称为Web前端工程师。网站开发是前端工程师日常工作的一部分,而网站加载时间是他们会考虑的一大问题。接下来千锋重庆Web前端培训的老师就给大家简单讲解缩短网站加载时间的技巧。

  为什么要关注网站加载时间呢?试想,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?

  调查显示,用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。如何才能缩短网站加载时间呢?通常我们可以采用以下方法:

  1)减少HTTP请求。分析显示,80%-90%时间花在了下载页面中的所有组件进行的HTTP请求上。减少HTTP请求的方式包括:减少页面中的元素,如图片、form、flash等;减少location.reload()等。

  2)对图片进行懒加载。图片懒加载的原理很简单,就是我们先设置图片的data-set属性值为其图片路径,由于不是src,所以不会发送http请求。然后我们计算出页面scrollTop的高度和浏览器的高度之和,如果图片举例页面顶端的坐标Y小于前两者之和,就说明图片就要显示出来了,这时我们再将data-set属性替换为src属性即可。

  3)优化TCP协议。TCP连接复用,使用keep-alive:连接回复加上请求头:keep-alive。第一次请求不断开,第二次请求复用;使用http 2.0版本:多路复用,连接复用率会更高。

  4)优化CSS、JS请求。方法;使用CDN:用CDN请求静态资源同时可以增大同时下载数量,内容分发网络(CDN)可以使请求总时间降低,也可以减少cookie;CSS放在head里:使其尽早下载,因为chrome需要下载完所有的css后才渲染页面;JS放在body里的最后:尽早显示整个页面,获取节点。

  当然除了以上方法,想要缩短网站加载时间还有其他的方法可循,而这都涉及到一个概念,那就是前端性能优化。前端性能优化可以分为两大类分别是页面级别优化包含了http请求数以及内联脚本位置优化,代码级别的优化包含DOM操作优化,CSS选择符优化以及图片优化等。在本文中,就不多做赘述了。


声明:该文章版权归原作者所有,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本网联系。
您阅读这篇文章花了0
转发这篇文章只需要1秒钟
喜欢这篇 5
评论一下 0
相关文章
评论
试试以这些内容开始评论吧
登录后发表评论

发红包推广

已有226227人领了红包

已有红包文章99+

一大波红包文章在招手!
赶快分享起来,一起瓜分大红包吧

发红包
阿里云创新中心
阿里云创学院
×
#热门搜索#
精选双创服务
历史搜索 清空

Tel:18514777506

关注微信公众号

创头条企服版APP