如何从请求 传输和渲染三个方面优化web前端的功能
发布时间：2022-06-24 18:14:03 所属栏目：建站 来源：互联网
导读：什么是网络前端？这是用户计算机上的浏览器所做的一切。当用户访问网站时，让他们看看他们做了什么： 输入URL-解析域名-请求页面-解析页面并在页面中发送资源请求-呈现资源-输出页面-用户操作-重新呈现。 通过以上的路径，我们可以看到浏览器分为请求、传输
|
什么是网络前端？这是用户计算机上的浏览器所做的一切。当用户访问网站时，让他们看看他们做了什么： 输入URL-解析域名-请求页面-解析页面并在页面中发送资源请求-呈现资源-输出页面-用户操作-重新呈现。 通过以上的路径，我们可以看到浏览器分为请求、传输、渲染三个部分来实现用户的访问，本文从这三个部分分析了如何提高Web前端的性能。 1、 请求 为了减少请求的传输，浏览器实现了自己的缓存机制。浏览器缓存是在浏览器中存储所请求的web资源的副本。当再次请求相同的URL时，首先检查缓存。如果存在本地缓存，浏览器缓存机制将根据Etag和上次修改的机制来判断是使用缓存还是从服务器传输资源文件。 有些浏览器请求是并发的，有些是被阻止的，例如，对图像、CSS和接口的请求是并发的；JS文件是被阻止的。当请求JS时，浏览器会中断渲染过程，等待JS文件加载和解析，然后再次渲染。所以把JS文件放在页面的末尾。 有几种方法可以减少资源请求的数量 1通过打包工具，合并资源，减少资源数量。开发版本是大量的资源文件。在部署期间，根据要输出的类合并多个文件。同时实现了统一输出。 2在CSS中，csssprite用于减少图像请求的数量。 3通过延迟加载技术，在没有用户感知的情况下请求资源。 4通过服务器配置，实现一个请求，并返回多个资源文件，如淘宝CDN。 除了减少请求数量外，CDN镜像还可以用来减少网络节点，实现快速响应。对于使用CDN的请求，将根据用户的地理位置找到近的CDN节点。如果请求是新的，它将从资源服务器复制到节点，然后返回到客户端。如果请求已经存在，它将直接从节点返回到客户端。 以上是解析和呈现的过程。让我们来谈谈用户交互的过程。用户操作将导致重画和重排，这肯定会导致重画，而重画可能不会。它究竟是如何引起重组的？简单的定义、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的垃圾收集机制。 （编辑：财气旺网 - 海宁网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐