前端页面优化的方法

时间:2024-10-12 02:41:32

前端页面优化的方法。开发过前端的人都知道,互联网有一项著名的8秒原则。用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问。下面我就详细说说如何优化页面的方法

资源的压缩

1、html文件的压缩。前端开发最基础就是html代码压缩,如何进行html压缩。大家可以自行百度关键词【html压缩】;nodejs 提供了html-minifier工具可以进行压缩;最后还有后端模板引擎渲染压缩

前端页面优化的方法

2、css压缩。百度输入【css压缩】;使用html-minifier工具;使用clean-css对css压缩

前端页面优化的方法

3、js压缩。主要对其无效字符的删除;剔除注释;代码语义的缩减和优化;代码保护(代码逻辑变得混乱,降低代码的可读性,这点很重要)

前端页面优化的方法

4、文件的合并。可以在线网站进行文件合并;或者使用使用nodejs实现文件合并(gulp、fis3)

利用浏览器缓存技术优化

1、对于web应用来说,缓存是提升页面性能同时减少服务器异鲢阍羟压力的利器。1.强缓存:不会向服务器发送请求,直接从缓存中读取资源,在chrome控制台的network选项中可以看到该请求返回200的状态码,并且size显示from disk cache或from memory cache;

前端页面优化的方法

2、协商缓存:向服务器发送请求,服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存,如果命中,则返回304状态码并带上新的response header通知浏览器从缓存中读取资源;另外协商缓存需要与cache-control共同使用。

前端页面优化的方法

cdn

1、对于首次访问的加速,我们需要从网络层面进行优化,最常拈络焓瘅见的手段就是CDN(Content Delivery Network,内容分发网络)加速。通过将静态资源(例如j锾攒揉敫avascript,css,图片等等)缓存到离用户很近的相同网络运营商的CDN节点上,不但能提升用户的访问速度,还能节省服务器的带宽消耗,降低负载。

前端页面优化的方法

预解析DNS

1、资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。如下图所示:

前端页面优化的方法
© 手抄报圈