课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
随着互联网的不断发展,用户在加载应用和网页的等待时间也越来越短了,这就要求程序员在开发软件应用的时候需要对软件有更高的优化,下面我们就通过案例分析来了解一下,前端应用加载优化都有哪些方法。
1、减少阻塞渲染的请求
样式表和(默认情况下的)脚本元素会阻塞它们下面任何内容的渲染过程。
你可以通过以下几种方法来解决这个问题:
将脚本标签放在body标签的底部;
使用async异步加载脚本;
内联小型JS或CSS代码段(如果它们需要同步加载)。
2、避免阻塞渲染的顺序请求链
拖累你站点速度的不一定是阻塞渲染的请求数量。更重要的是每种资源的下载体积过大,以及浏览器发现自己需要加载资源的情况太多了。
如果浏览器只有在一个请求完成后才发现自己需要加载一个文件,那么你可以使用同步请求链来提升效率。发生这种情况可能有多种原因:
CSS中的@import规则;
CSS文件中引用的Webfonts;
JavaScript注入链接或脚本标签。
3、复用服务器连接以加快请求
建立一个新的服务器连接通常需要在服务器和浏览器之间进行3次往返:
DNS查询;
建立一个TCP连接;
建立一个SSL连接。
连接就绪后,至少需要再进行一次往返,才能发送请求并下载响应。
4、减小文件大小并使用CDN
除了文件大小以外,还有另外两个因素会影响请求时间,并且都在你的控制范围内:那就是资源大小和服务器位置。
尽量减少要向用户发送的数据,并确保数据都是压缩过的(例如使用brotli或gzip)。
内容交付网络在众多地理位置上提供了服务器,因此其中之一可能正好位于你的用户附近。用户可以连接到附近的CDN服务器,而不必连接到你的应用程序中央服务器上。这意味着服务器往返时间将大大缩短。这对于诸如CSS、JavaScript和图像之类的静态资产来说特别方便,因为它们很容易分发。
5、服务端渲染
服务端渲染意味着在服务器上预渲染你的应用,并使用整页HTML响应文档请求。这意味着客户端可以看到完整渲染的页面,而不必等待额外的代码或数据加载!
由于服务器只是将静态HTML发送给客户端,因此你的应用尚无法进行交互。你需要加载应用程序,然后重新运行渲染逻辑,接下来将必要的事件侦听器附加到DOM上。
如果想让用户及时看到非交互内容,请使用服务端渲染。如果你能够在服务器上缓存渲染完毕的HTML并将其提供给所有用户,而又不会延迟初始文档请求,那么也可以使用服务端渲染。
【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!