前台网页加载优化

作者 : 开心源码 本文共2491个字,预计阅读时间需要7分钟 发布时间: 2022-05-12 共70人阅读

在现代网络发达的大环境下,各类网站大中型网站横行,网站性能表现的尤为重要,特别是能给访问使用户一个不同感受的体验,同样的网络环境,有的网站“嗖”地一下出来,而有的网站等半天才小露头脚,如此一来,给使用户产生反感,网站打开速度慢,那访问使用户几乎不愿意多等,转头离开了,这样就大大减少了网页访问量,严重影响了使用户体验,也不利于SEO优化。

对于前台开发人员而言,对于解决网页加载性能也是需要做诸多事情的,那么就详情少量如何优化性能,且让页面提高加载的速度。

1、尽可能减少HTTP请求

减少HTTP请求,其中主要一点就是要合并少量内容,诸如css,图片,js,合并成一个文件当然最好,这样可以只进行一次访问请求就可,同时利使用浏览器强大的缓存能力,可以达到减少HTTP请求。

比方在实际做法中,用css精灵图片,字体图标,图片地图等。

具体方案为:

1、浏览器缓存:

对一个网站,少量静态资源文件诸如CSS、javascript、logo、图标升级的频率都比较低,而这些文件又几乎是每次http请求还都得需要,那么,假如我们将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存。

2、用压缩机制

通常我们在服务端将这些文件进行压缩解决,之后回到浏览器端进行解压缩,可有效减少通信传输的数据量。但既然用文件压缩,或者多或者少会对浏览器和服务端产生肯定的压力,所以实际中应酌情用。

同时遵循以下准则:

(1) 减少DNS请求所耗费的时间:

且不说对错,由于从基原本说,减少http请求数确实可以减少DNS请求和解析耗费的时间;

(2) 减少服务器压力:

这个通常是被考虑最多的,也是我使用来讲解给别人听的最大理由,由于每个http请求都会耗费服务器资源,特别是少量需要计算合并等操作的服务器,耗费服务器的cpu资源可不是开玩笑的事情,硬盘可以使用钱买来,cpu资源可就没那么廉价了;

(3) 减少http请求头:

当我们对服务器发起一个请求的时候,我们会携带着这个域名下的cookie和少量其余的信息在http头部里,而后服务器响应请求的时候也会带回少量cookie之类的头部信息.这些信息有的时候会很大,在这种请求和响应的时候会影响带宽性能。

2、用图片懒加载策略

我们浏览网页,图片往往是最引人注目的,而往往图片很占网络资源的,用懒加载策略,可以是页面加载时只加载首屏页面使用到的图片就可,其余的图片资源可以稍后再加载,这也是添加使用户体验的方式。

3、css放头部,js放底部,或者用js/css外链

根据浏览器加载渲染网页的机制,浏览器会在下载完成一律CSS之后才对整个页面进行渲染,因而最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS。假如将 CSS放在其余地方比方 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,使用户体验比较糟糕,所以可以考虑将CSS放在HEAD中。

对于javascript而言,假如浏览器立即加载javascript脚本,可能会阻塞页面执行,体现缓慢,所以此时尽量放在页面底部(除了必要的立即执行等的情况)。

有时候,我们正当地用js/css外链加载,用缓存,是HTML文件大大减小,也肯定程度上提高加载的速度,当然这也是据实际情况来看,比方说根据实际使用户访问的情况(经常性频繁的浏览某一网页等)。

3、传输方面,控制cookie

cookie应尽可能地控制大小,写入cookie的数据应正当控制,减少传输数据量及次数,也是一个优化方案。

4、减少DOM操作

网页中对DOM操作往往是代价很大的,修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为。所以请正当的用JavaScript变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。

5、用CDN加速

CDN的全称是Content Delivery Network,即内容分发网络。是一个经策略性部署的整体系统,从技术上全面处理因为网络带宽小、使用户访问量大、网点分布不均而产生的使用户访问网站响应速度慢的根本起因。其目的是通过在现有的Internet中添加一层新的网络架构,将网站的内容发布到最接近使用户的网络“边缘”,用户可以就近获得所需的内容,提高使用户访问网站的响应速度。

6、减少DNS查找

DNS使用于映射主机名和IP地址,好像电话本映射人名与电话号码一样,DNS解析有代价,一般一次解析需要20~120毫秒。浏览器在DNS查询完成前不会下载任何东西。

为达到更高的性能,DNS解析通常被多级别地缓存。如由ISP或者本地网络维护的DNS缓存服务器,使用户机器操作系统的缓存。DNS信息会保存在操作系统的DNS缓存中(如windows上的 DNS Client Service)。大多数浏览器有自己的缓存,与操作系统的缓存有所不同。只需浏览器在自己的缓存上面保留DNS记录,它不会向操作系统请求DNS记录。

IE的缺省 DNS缓存时间为 30分钟,由注册表中的DnsCacheTimeout值指定。Firefox的缺省缓冲时间是1分钟,由network.dnsCacheExpiration配置设定。(Fasterfox将此值改为1小时)。

当用户端的DNS缓存为空时(浏览器与操作系统),DNS查询的次数等同于网页中各域名的个数。包括该网页URL、图片、脚本文件、样式表、FLASH对象等用的域名。减少域名数量可以减少DNS查询次数。

减少域名主机可减少DNS查询的次数,但可能造成并行下载数的减少。避免 DNS查询可减少响应时间,而减少并行下载数可能添加响应时间。一个可行的折中是把内容分布到至少2个,最多4个不同的主机名上。

关于网页加载性能的优化还有很多处理方案,但实际开发中也是根据具体情况来正当分配用,最大限度地提高网页性能,提升网页加载速度,加强使用户体验性,从而加大使用户访问量。

前台网页加载优化

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台网页加载优化

发表回复