为什么这个社会需要高级前端

·  阅读 36280
为什么这个社会需要高级前端

为什么这个社会需要高级前端

2021.12.29日更新

没想到这篇文章会有这么多的点击量,给我这个多年不写文章的老年人不小的压力。我认真看了下文章的评论,觉得有必要在这里做出以下几点说明,以感谢广大读者的支持:

  1. 这个标题和文章内容好像不是完全符合。这篇文章是我在12.21日晚上睡觉前码出来的,当时有很多想法都想表达出来,后来实在是没有那么多时间去全部写出来,也没想到文章会带来这么大的关注度。之所以要写这篇文章,是因为自己心里一直有这么个疑问,那就是前端的价值到底如何去进行体现?很多人觉得文中只是在说缓存、运维之类,跟前端常见的工作关系并不是那么大。那是因为本文的主题并不是要去列举高级前端应该掌握哪些技术,而是想表达高级前端应该有一些怎样的意识,而这些意识才是直接影响我们在面对各种项目的时候如何去做技术架构。一个合适的技术架构并不是说你一定要用react框架或者ts,一定要用上ssr/serverless/微前端等技术。一个合适的技术架构应该是以满足项目目标为前提,以当前研发成本为前提,去尽可能提高加载效率,提升用户体验

  2. 文章列举的提升点应该是运维和后端事情。我不否认很多情况下前端都是没办法去直接接触服务器的,但是我真的认为前端非常有必要去懂得基本的http知识,并要求运维去对项目进行合理的配置。如果你不让运维去配置缓存策略,就有可能每次上线后用户都需要control+F5才能看到新版版。如果你不去让运维配置http2,你就不知道是否需要对静态文件进行合并。如果你不去让运维配置access-allow开头的http_header,你可能只能使用jsonp来实现跨域。运维或者后端人员对于前端相关的配置,只是一个执行者,具体需要返回那些response header,真的是需要前端好好斟酌。

  3. 这种项目紧急、钱少、外包,所以是这个质量,理所当然。我在文末已经提到了这一点。项目的具体情况我们大家都不知道,我也完全不否认这个前端产出的这个劳动成果,我更不是想表达仅靠前端就能让这个项目有一个根本性的提升。而只是想说,如果项目的决策者能够意识到前端重要性,他就应该选择花更多的钱,请经验更加丰富,架构能力更加强的研发人员,毕竟,这个系统的每一个用户,他们都有权利去享受更快的加载速度,更安全的系统,更好的用户体验

  4. 前端再怎么努力,都不如再加一台服务器。看到这种评论,非常痛心。这是及其不自信,对自己本职工作不负责的行为。不管你拿着多少工资,做出更优质的产品都是对自己的付出负责,对自己职业的尊重。只有尊重自己的付出,才能够不断进步,从而获取更多的回报。你学到的每一个知识点都能让你往金字塔顶端的路更进一步,而一味的踏步不前,认为拿多少钱就应该做多少事,迟早都要被时代所淘汰。

以下为原文:

前几天,一个西安的朋友给我发了一个链接问我为什么打不开。我当时试了下这个链接确实很难成功访问,服务器显然是在遭受类似ddos攻击的高频访问,导致拒绝服务,poor server,poor nginx!

如果是一个普通链接,这个事情可能就过了。然而这个链接是指向的西安核酸查询系统,当天好像西安很多地方由于疫情管控需要有核酸证明才能进入,因而很多人都回去访问核酸查询服务,而这个核酸查询服务器显然没受过这么多人的关注和访问,于是它害羞了,拒绝服务了。

然而最后我还是打开了这个页面,而它的前端配置让我非常吃惊,一个关乎社会运行效率的平台,前端的配置竟然能做得敷衍。

页面引用了过多的静态文件

首先来看一下这个页面长相:

index_all.png

这个页面很简单,一个普通的表单提交页面。但是这个页面却使用了jquery+weui的架构,因此它引入了3个css文件以及多达5个js文件。好在这些库文件并不大,而且服务器使用了gzip+http2协议,使得整个页面所有资源加起来也就不到400kB。

听起来很美好对吧,400kB而已,随便刷个抖音都够加载它几十次了。

然而这个页面并没有使用cdn分发,所有静态文件都由同一个服务器返回,如果代理服务器没有做优化,那么每次访问都会有8次io,按照西安当天的情况,大家可以想象服务器上的那块硬盘当天到底承受了什么。

如果开发这个页面的前端追求高那么一点,他至少可以做以下事情:

  • 干掉所有css文件,使用内联的style标签直接写css。这样至少可以让用户在html加载完成的时候就能看到整个页面了,而不是等待css文件的加载。我当天有很多次都成功请求到了html而css却请求失败导致页面一片空白。

  • 干掉所有js文件。是的,js也可以用script标签直接写到html页面中。为什么一定要单独写一个js文件呢?

  • 干掉favicon。这个不知是否领导要求,这个页面的favicon有17Kb之大。浪费用户流量且增加了服务器的io。

页面的http缓存配置有非常严重的问题

这个页面有一个致命的问题,一旦成功加载便会被浏览器强缓存。这样的结果就是,如果现在领导要加一个验证码,那么用户必须要手动刷新页面,或者等待默认缓存过期以后,才能真正的看到验证码,否则展现给用户的依然是没有验证码版本的老页面。这样很可能直接导致用户无法使用此页面上的功能。

为什么页面会被浏览器强缓存?因为服务器根本没有返回缓存策略。猜测服务器是使用的nginx,而且并没有配置缓存策略,从而nginx使用了默认的配置:

index_no_cache.png

是的,它的response header里既没有expires头部,也没有cache-control头部。此时浏览器只能自己根据心情对页面进行缓存,而大多数浏览器会直接将页面强缓存到本地,以后再次访问这个页面,它会直接从本地加载页面而根本不会去访问服务器。是的,即使你断网了依然能够再次打开这个页面,听起来好像还很美好的。。当然,浏览器还是会给这个页面设置一个过期时间的,过期后就会向服务器请求新的页面,这个过期时间很可能是几个月以后,那个时候,西安的疫情,应该已经过去了吧?

如果开发这个页面的前端追求高那么一点,他至少可以做以下事情:

  • 以nginx代理为例子,为html页面配置expires:epoch。这样浏览器访问该页面的时候会使用304缓存策略。

  • 以nginx代理为例子,为js/css等静态文件配置expires:1y。这样静态文件将直接在本地加载而不是去服务器获取。

nginx的expires配置主要是通过cache-control头来控制浏览器对静态文件的缓存。

页面有安全问题,有可能泄露用户的姓名和身份证

这个页面点击后,会跳转到一个url为https://yqpt.xa.gov.cn/resultQuery.html?name=用户姓名&card=61032用户身份证的页面,是的,用户姓名和身份证直接明文在url中作为query string进行传输。这个请求所经过的所有中间层均可以获取用户信息。如果用户连接了不安全的wifi或者代理商,用户信息就泄露了。政府部门提供的公共服务,将有可能泄露你的个人信息

这一项属于作者本身知识有误,实际上https对于query string以及path都会进行加密传输。不过任然不建议使用query string来传输私密信息。参考:https.cio.gov/faq/#what-i…

如果开发这个页面的前端追求高那么一点,他至少可以做以下事情:

  • 拒绝使用query string对用户信息进行明文传输,仅使用post请求的body提交用户数据。

  • 如果非要使用query string,保证使用安全的加密方法对用户信息进行加密后再进行传输。当然这个方案并不推荐。

后记

  • 笔者今天再次访问该页面,发现http的返回头中已经加上了etag,从而防止页面被强制缓存在用户本地。这一点还是有进步的。虽然etag并不是一个太好的缓存方案。

  • 西安官方呼吁大家非必要不要访问核酸服务,节约社会资源。

xa.png

感想

在当今这个信息社会,互联网技术确实为我们带来了很多方便。然而很多老板和政府部门并没有意识到对技术的不当使用所带来的严重后果。这篇文章中的页面作者,可能只是拿着一个月五六千的工资,他的上级给他派活的时候也许并没有对他提出严苛的要求,他们可能也没有想到有一天这个系统会面临如此巨大的访问压力。因此在设计之初并没有去考虑太多性能方面的问题。归根结底,还是我们的老板们以及政府领导们没有意识到高级别技术人才的重要性,不懂得一个资深的技术人员可以给企业和社会节约多大资源。在他们看来,只要系统能够打开,功能可用,界面美观就万事大吉了。而一旦出了问题,从上到下全部抓瞎,只能让最终用户默默承担。然而我相信随着社会的发展,他们的意思一定会不断的提高。而作为互联网行业技术从业者,我们也应该意识到自己的一个优化动作也许能减少很多终端用户的苦恼,让他们不用焦头烂额的看着空白的页面,在公司大楼外吹着寒风,等待一个个字节到达自己的手机上。而这些字节,也许仅仅是一个502 Bad Gateway。

参考

MDN缓存文档:developer.mozilla.org/en-US/docs/…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改