13306647218

公司动态

Company dynamics

web前端的性能如何配置减少资源请求

作者:蓝梦seo专业企业网站优化时间:2020-07-13 14:33:32

什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站,浏览器都做了哪些事情:输入网址 – 解析域名 - 请求页面 - 解析页面并发送页面中的资源请求 - 渲染资源 - 输出页面 - 监听用户操作 - 重新渲染。

从上面的路径中,我们可以看到浏览器分为三个部分:请求,传输和呈现以实现用户访问。本文从这三个部分分析如何提高Web前端的性能。

请求

浏览器实现自己的缓存机制,以减少请求的传输。浏览器缓存用于在浏览器中存储请求的Web资源的副本。当再次请求相同的URL时,请首先检查缓存。如果存在本地缓存,则浏览器缓存机制将使用验证机制(Etag)和到期机制(最后修改)来确定是使用缓存还是从服务器传输资源文件。具体过程如下图所示:

mf_5e01859199f4e.jpg

如何从请求,传输和呈现三个方面改善Web前端性能

有些浏览器请求是并发的,有些则被阻止。例如:图像,CSS和接口请求是并发的; JS文件被阻止。请求JS时,浏览器将中断渲染过程,等待JS文件被加载和解析,然后重新渲染。因此,将JS文件放在页面的末尾。

JS也可以通过两种方式从阻塞更改为并行:一种是创建脚本标签并将其插入DOM;另一种是将async属性添加到脚本标签。

每个浏览器对并发域名的数量都有限制,IE6/7为2,IE9为10,其他常见浏览器为6,因此减少资源请求的数量并使用多个域名配置资源文件可以极大地减少改善网站性能。

有几种方法可以减少资源请求的数量:

1.通过打包工具合并资源并减少资源数量。即,开发版本是许多资源文件。部署后,它们将合并为多个文件以进行输出。在实现模块管理的同时,实现统一输出。

2.在CSS中,使用CSS Sprite减少图像请求的数量。

3.通过延迟加载技术,在用户不知情的情况下请求资源。

4.通过服务器配置,实现一个请求并返回多个资源文件,例如淘宝CDN。

除了减少请求数之外,您还可以使用CDN镜像来减少网络节点并实现快速响应。使用CDN的请求将根据用户的地理位置寻找最近的CDN节点。如果请求是新请求,它将被从资源服务器复制到节点,然后返回给客户端。如果请求已经存在,则直接从节点返回客户端。

通过上面我们了解的缓存机制,如果我们在线部署,则需要刷新缓存。可以通过强刷来更改普通缓存,而CDN缓存则需要通过更改URL来实现。同时,我们不能要求用户按Ctrl刷新,因此通过打包工具,统一更改URL是部署时最有效的方法。不建议更改不经常更改的库文件,例如echart,jquery。

传输

从服务器到客户端的传输,可以启用gzip压缩以提高传输效率。

以上是解析和渲染的过程,让我们继续进行用户交互的过程。用户操作将导致重画和重新排序。重新排序肯定会导致重新绘制,而重新绘制并不一定会导致重新排序。它如何引起重新排列?简单的定义,DOM结构的更改以及DOM样式的几何属性的更改都可能导致重新排列。顾名思义,几何属性是盒子模型的属性,例如宽度,高度,边框,外部面片,内部面片等。还有诸如偏移量的边距属性。

重新排序是最耗能的。减少重新排序的方法是:

1.如果需要多次更改DOM,请先在内存中进行更改,然后一次将其插入DOM。

2.与上一个相同。如果您多次更改样式,则可以编写一个样式并将其插入DOM。

3.当位置值是绝对值或固定值时,它与文档流分开。操作此类DOM节点不会导致整个页面重新排列。因此,动画元素将其位置设置为远离文档流。

4.当DOM节点的显示等于none时,它将不存在于渲染树中,因此,如果存在更复杂的操作,请首先使显示等于none,等待所有操作完成,然后然后将显示设置为阻止,使其仅重新排列两次。

5.获得将导致重新排列的属性值时,请将其存储在变量中,并且再次使用该属性值时将不会重新排列。获取这些属性将导致重新排列:offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop,scrollLeft,scrollWidth,scrollHeight,clientTop,clientLeft,clientWidth,clientHeight

以上是浏览器如何将资源转换成肉眼可见的页面。除了上面根据浏览器过程总结的性能优化之外,我们还需要将JavaScript作为程序所需的优化作为一个观察。让我们看一下JavaScript的垃圾回收机制。

Javascript引擎将取消注册不再定期使用的局部变量,从而释放其内存。闭包的存在将使引用始终存在并且不能被释放。直到浏览器卸载页面,全局变量的生命周期才结束。因此,通常,内存溢出是由全局变量的不释放和关闭引起的。为防止内存溢出,我们可以执行:种方法。

1.业务代码放置在匿名立即执行函数中,该函数将在执行后立即释放。

2.使用较少的全局变量,并在用完变量时手动注销。

3.使用回调而不是闭包来访问内部属性

4.如果不可避免要关闭,请仔细处理细节。不使用时注销。

5.通过浏览器的内置工具配置文件检查内存活动。如果是波浪形,则表示正常。如果它倾斜并逐渐上升,则意味着将不会释放一些内存,并且需要检查相应的功能。

最后,该函数返回异步获取的值。通常是这种情况:

Var getList=function(){$ .ajax()。然后(function(data){Return data;})}; Var users=getList();

毫无疑问,因为函数内的返回是异步的,所以返回只能是未定义的,而不是所需的数据。因此,为了实现数据返回,请将ajax的async属性设置为false,并将异步更改为sync来获取数据。但是,最大的问题是同步将中断渲染过程,即请求正在等待返回,整个页面都被卡住,并且用户操作将不响应。解决此问题的真正方法是返回promise对象,而不是将异步更改为同步。

本文的地址: