千锋郑州Web前端老师讲解如何缩短网站加载时间

来源：千锋教育

发布人：Yolanda

时间： 2020-04-23 10:57:00

　　前端开发是创建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选择符优化以及图片优化等。在本文中，老师们就不多做赘述了。

　　想了解更多Web前端学习知识，你可以来千锋郑州Web前端培训班进行学习。你也可以关注“郑州千锋”微信公众号，定期发布行业热点和技术分析，让你了解学员的学习情况和就业信息!

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。