Web前端优化之如何缩短页面加载时间?
前端开发是创建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选择符优化以及图片优化等。在本文中,就不多做赘述了。