文章详情
如何从请求、传输和渲染三个方面优化web前端的性能
什么是网络前端?这是用户计算机上的浏览器所做的一切。当用户访问网站时,让他们看看他们做了什么:
输入URL-解析域名-请求页面-解析页面并在页面中发送资源请求-呈现资源-输出页面-用户操作-重新呈现。
通过以上的路径,我们可以看到浏览器分为请求、传输、渲染三个部分来实现用户的访问,本文从这三个部分分析了如何提高Web前端的性能。
1、 请求
为了减少请求的传输,浏览器实现了自己的缓存机制。浏览器缓存是在浏览器中存储所请求的web资源的副本。当再次请求相同的URL时,首先检查缓存。如果存在本地缓存,浏览器缓存机制将根据Etag和上次修改的机制来判断是使用缓存还是从服务器传输资源文件。
有些浏览器请求是并发的,有些是被阻止的,例如,对图像、CSS和接口的请求是并发的;JS文件是被阻止的。当请求JS时,浏览器会中断渲染过程,等待JS文件加载和解析,然后再次渲染。所以把JS文件放在页面的末尾。
JS也可以通过两种方式从阻塞变为并行:一种是创建脚本标记并将其插入DOM;另一种是向脚本标记添加async属性。
每个浏览器对并发域名的数量都有限制。IE6/7是2,IE9是10,其他常见的浏览器是6。因此,减少资源请求数量,使用多个域名配置资源文件,可以大大提高网站性能。
有几种方法可以减少资源请求的数量
1通过打包工具,合并资源,减少资源数量。开发版本是大量的资源文件。在部署期间,根据要输出的类合并多个文件。同时实现了统一输出。
2在CSS中,csssprite用于减少图像请求的数量。
3通过延迟加载技术,在没有用户感知的情况下请求资源。
4通过服务器配置,实现一个请求,并返回多个资源文件,如淘宝CDN。
除了减少请求数量外,CDN镜像还可以用来减少网络节点,实现快速响应。对于使用CDN的请求,将根据用户的地理位置找到最近的CDN节点。如果请求是新的,它将从资源服务器复制到节点,然后返回到客户端。如果请求已经存在,它将直接从节点返回到客户端。
通过上面我们知道的缓存机制,如果我们在线部署缓存,我们需要刷新缓存。普通缓存可以通过强刷改变,而CDN缓存则需要通过改变URL来实现。同时,我们不能要求用户按Ctrl键刷新,所以最有效的方法是在部署时通过打包工具统一更改URL。但是,不建议更改不经常更改的库文件,例如echart和jQuery。
2、 变速器
从服务器到客户端,可以启用gzip压缩来提高传输效率。
Gzip有10个级别,从1到10。压缩越高,压缩越小,但是用于压缩的服务器硬件资源越多。根据实践,当电平为5时,压缩效果为100k,可压缩为20K。
3、 渲染
加载HTML后,浏览器在解析时根据解析结果进行资源请求,生成DOM树。CSS加载后,渲染引擎根据生成的DOM树生成渲染树。解析所有资源并计算布局后,将其绘制到浏览器界面。当用户操作时,JS修改DOM节点或样式,重新绘制并重新排列它们。重绘是指绘制与DOM节点相对应的渲染节点,重排是指重新计算这些节点在浏览器界面中的位置。显然,重新排列是非常注重性能的。我们要做的是减少重组的次数。
在构建DOM树时,我们可以通过减少DOM节点来优化性能。起初,他们使用表布局,节点的深度和数量都比较复杂,而且性能很差。同样,作为级联样式表,CSS不应该太深,否则遍历成本非常高。此外,CSS的expression属性会消耗大量的性能。如果不能使用,就不能使用。如果动画效果可以用CSS编写,就不需要JS了。如果渲染引擎不同,性能损失也不同。
以上是解析和呈现的过程。让我们来谈谈用户交互的过程。用户操作将导致重画和重排,这肯定会导致重画,而重画可能不会。它究竟是如何引起重组的?简单的定义、DOM结构的更改和DOM样式的几何结构的更改都会导致重新排列。几何属性,顾名思义,是长方体模型的属性,如宽度、高度、边界、外部面片和内部面片。还有边距属性,例如偏移量。
重新调度是最消耗能量的方法。减少重排的方法如下:
1如果需要多次更改DOM,请先在内存中更改它,一次将其插入DOM。
2如果多次更改样式,请合成一个样式并将其插入dom中。
3由于位置值固定的,因此它与文档流分离。操作这样的DOM节点不会导致页面重新排列。所以animation元素设置位置以将其从文档流中取出。
4当DOM节点的显示等于none时,它将不存在于渲染树中。因此,如果有复杂的操作,首先使其显示为“无”,然后在所有操作完成后将显示设置为“块”。这样,它只会被重新安排两次。
5当您获得导致重新排序的属性值时,它将存储在变量中,并且在再次使用时不会再次重新排列。获取这些属性会导致重新排列:offsettop、offsetleft、offsetwidth、offsetHeight、scrolltop、scrollleft、scrollwidth、scrollheight、ClientTOP、clientleft、clientwidth、clientheight、clientheight
以上是浏览器如何将资源转换为可见页面。除了根据浏览器流程总结出的性能优化外,我们还需要将JavaScript作为一个程序来进行优化。让我们看看JavaScript的垃圾收集机制。
JavaScript引擎将注销不再使用的本地变量,并以固定的时间间隔释放它们占用的内存。闭包的存在会使引用一直存在并且不能被释放。直到浏览器卸载页面,全局变量的生命周期才会结束。因此,一般来说,内存溢出是由全局变量的不释放和关闭引起的。为了防止内存溢出,我们可以执行以下操作:
1业务代码放在匿名立即执行函数中,并将在执行后立即释放。
2使用较少的全局变量,并手动注销使用的变量。
3当关闭不可避免时,请注意细节。不用的时候就把它注销。
4通过浏览器自己的工具配置文件检查内存活动。如果是波浪形的,表示正常。如果是斜向递增,则表示有内存不会释放,需要检查相应的功能。
但并非最不重要的是,异步检索的值在函数中返回
毫无疑问,由于函数内的返回是异步的,返回只能是未定义的,而不是所需的数据。因此,为了返回数据,AJAX的async属性设置为false,并将async属性从asynchronous更改为synchronous以获取数据。但是,问题是同步会中断呈现过程,也就是说,当请求等待返回时,整个页面被卡住,用户的操作不会响应。这个问题的真正解决方案是返回promise对象,而不是将异步更改为同步。
相关推荐
- 10-27「小程序seo设计」网站优化之中的内容更加重
- 11-01如何使你的网站适应移动终端
- 11-14用户体验对网站运营有哪些影响
- 10-30在网络推广中,哪些工作是不可忽视的?
- 11-09广州网站优化有什么要求,广州seo优化方法
- 10-23才开始学习做网站应该懂哪些基本
- 11-08银川网站建设,企业建站过程当中一定要注意的
- 11-03网络推广:如何布局网站关键词
- 11-12网站用户体验不好,这些因素应该引起重视
- 11-11电商网站建设能够应用自助建站吗
- 10-28企业网站绝大多数都是用来介绍自己的产品的
- 11-02软件定制开发和APP模板开发有什么区别?
- 12-09「高端网站建设」深圳高端网站建设的闪光
- 10-27响应式企业网站模板制作过程会碰到什么问题