关于无后端web服务的优化方案和思路

2023 年 8 月 6 日 星期日(已编辑)
/
16

关于无后端web服务的优化方案和思路

本文章适合国内用户访问,在国外也可通过类似思路实现 嗯……一开始我想的标题是“如何优化你的博客速度”,不过仅仅是用于博客体验的话,感觉适用范围会有一点点的小,所以呢,还是将名字改成了现在所示的名字x

访问速度体验。从某种意义上来说,影响使用者的体验。可以拿最常见的博客,访问速度慢,经常timeout,那应该不是每个人都想看到的吧。如果你说可以通过科学上网的方式来解决这类问题的话,貌似是可以解决一部分问题,不过既然你是面向国内用户,那为什么不现自身做好服务,不通过这类方法也可以得到良好的体验x

因为本人的主要无后端开发经验实在Hexo和Hugo这类无后端静态服务上,而这类服务经常应用于博客(常见的有Cloudflare Pages和Github Page上),所以咱主要是说这类方面

分析(网页是如何显示在你的面前的)

域名解析成IP地址——进行TCP连接(三次握手)——发送与收取数据(HTTP访问)-结束连接 (中间省去了复杂情况,例如套用WAF防火墙,CDN一类的操作)

其中在TCP进行三次握手后,网站的raw数据将会通过GET的方式获取

网站的加载以文件的请求从前到后会依次加载

有兴趣的朋友 可以查看户跟勤写的《网络是怎样连接的》第六章,这边给出本家CDN的下载地址DownloadSite 这边写的更加详细,你可以通过这篇文章学习你需要的知识

优化方案

加载顺序

大家都知道,可以通过优先展示样式的方式来减少用户看到白色页面的等待时间 例如这是部署于Vercel上的音乐盒子:Link 他的加载方案是这样的

webstyle

webstyle
优先展示最重要的部分,减少用户的等待时间,可以从某种方面上体现网站加载较快的错觉,减少用户的等待时间。

使用LazyLoading

懒加载是一种将资源标识为非阻塞资源并仅在需要时加载它们的策略方案,对第一次渲染并不重要的资源来缩短关键渲染路径的长度。 使用懒加载可以减少部分大图片(例如不知道为什么但是就是要放几十兆的图片在网站上的那种人x)阻塞网络资源,优先加载其他有价值的脚本和样式,获得良好的体验。

使用PreLoad

和加载策略是一样的,preload可以使部分资源优先加载,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行。 这种做法有一点好处:不阻塞渲染和 document 的 onload 事件 & 减少国内情况造成字体阻塞整体加载速度 这一般用于CDN上,可以得到较好的加载体验

使用相关公共库

部分前端库(如jq,vuejs)有国内和国际大厂提供的全球加速和国内加速,使用这些公共库可以全局优化前端库加载体验,使不同地方的人可以得到良好的访问体验,减少等待时间。 国内可以使用字节跳动的公共库,国外的话可以使用JSD,都是比较不错的体验

减少盈余的css和js使用

网站的加载不仅在于资源获取,包括渲染和使用上都会有所体现。 减少非必要且多余的加载和渲染,可以让加载阻塞时间减少,提升部分性能较低用户的访问体验。 同时多余的css和js会增大体积,加大load时间,Gzip 和 Brotli这两项技术可以解决体积问题 从某种意义上来说可以节省流量(?怪)

利用Ajax技术

ajax是一种非全局式的刷新技术,通过部分刷新的方式,得到仅加载局部刷新资源,减少整个网站重新渲染的时间,是一种不错的使用技术,可以用来提升的响应。

使用CDN加速你的静态资源

嗯....这种适合对于静态资源的加速,可以将自己的资源部署到cdn上,减少阻塞时间,提高访问的速度。 不过大家都知道的,CDN可老烧钱了,如果是免费的当我没说x

减少网站的报错

这个其实很好解释,网站的报错会影响性能,影响访问体验xx 报错会让某个线程超时 会有一定的开销,所以建议在逻辑和报错上建议减少出错,这样也不会出现诸如排版和显示不全的相关问题

地区加速优势

如果是为国内用户,还不如直接把服务器端部署到国内,国内的速度一般和国外相比有了不少的优势。 毕竟咱也把服务器塞到了本土上x 虽然要备案x

总结

网站的优化本质上仍然是为用户体验而考虑的,减少阻塞资源使用,可以使网站得到良好体验x 越好的访问体验相对来说得到的seo越靠前x 这些经验来自于本人使用Hexo和Hugo时得到的经验,主要是没钱不然也不会想优化这些东西x

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...