摘要：背景前端这个职位的诞生也有短短的十年。工程化最终由妇人住到的这个项目的代码变成了这样期间经历了手写前端代码消除缓存影响合并网络请求压缩静态资源前端妇人们不再只管写，和，还要考虑性能。前端开发已然成为一个工程化问题。
背景
前端这个职位的诞生也有短短的十年。而在十年之前，我不认识你，那会还叫网页制作，用着一个Adobe非常牛逼的软件叫Dreamweaver。这是一个神奇的软件，绚丽多彩的网页通过它，拖拖拽拽，就这么梦幻般的生成了。网页制作师们，像一群织梦的妇人，心灵手巧，耐苦耐劳，从不抱怨。
直到有一天。
有位妇人（第一位妇人）站出来说：
我不用Dreamweaver了，它生成的网页垃圾代码太多，而且兼容性问题很多，特别是IE下，制作出来和实际展示完全不一样，修改还麻烦，好坑爹。
第二位妇人也站了出来：
对！
第三位妇人站了出来：
说得好！
第四位妇人站了出来：
我要手写代码！
自此，前端工程师诞生了！
最初的前端开发网页开始逐步由拖拽生成转变为手写代码，从此，手写HTML，CSS，Javascript，会点PS掌握切图，成为了前端妇人们长期赖以生存的技能。
手写的代码什么样呢？最简单的就是下面这样。
demo.htmlhtml... ...a.cssWish you happy everyday!
css.foo{
color: red;
}
这便是最初的前端开发。
缓存如上的「最简单的手写代码」上线后。
第一次访问： 第二次访问：会发现，两次css文件的请求有明显区别，不断是大小（Size）、时间（Timeline）和状态（Status）。这便是缓存在作祟。
用户在非首次访问时，速度会更快，花费时间也少。这么看来：
缓存太好了，不用每次都去服务器下载静态资源，真想把什么都给缓存下来。
直到有一天。
有位妇人（第一位妇人，妇人A）要更新a.css：
css.foo{
color: blue;
}
更新完上线，老板去访问时，发现.foo的color还是red：
妇人A你确定更新了么？我这怎么没生效！
妇人A惊呆了：
老板，要清除缓存，每次更新都得清除缓存呀！不信你问QA。
老板：
....
QA：
....
这时候第二位妇人（妇人B）站了出来：
你上线时把a.css换个名字不就行了。改成a1.css，浏览器不就用不到缓存了嘛~ ╮(￣▽￣")╭
妇人B的机智和卖萌彻底征服了妇人A。
合并网络请求妇人A慢慢开始接触大项目，CSS和JS文件越来越多：
html... ...
老板又来了，找妇人A：
能不能把你引入的这些css和js合并起来啊，看着上面的网络请求一大坨心里难受啊。
身为处女座的老板，还是懂很多的。
妇人A：
有啥好处咩~ ヾ(≧▽≦*)o
妇人A被妇人B影响，也开始卖萌起来。
老板：
好处多多啊，合并静态文件，减少网络请求，大大加快了网页请求速度啊！
于是，妇人A按照老板的要求，把a.css、b.css和c.css合并成all.css，把a.js、b.js和c.js合并成all.js。
压缩静态文件过了几天，妇人B也找到了妇人A：
既然你都合并CSS和JS，顺便把它们都压缩下吧。可以减少文件大小，减少网络请求的Size。好事做到底。
妇人A不解：
为熟么捏~
妇人B：
因为我萌啊~ （￣ c￣）
听了妇人B的解释，妇人A似乎明白了什么，赶紧去网上找了些压缩工具，把all.css压缩成min.all.css，把all.js压缩成了min.all.js。
工程化最终由妇人A住到的这个项目的代码变成了这样：
html
期间经历了
手写前端代码
消除缓存影响
合并网络请求
压缩静态资源
前端妇人们不再只管写HTML，CSS和JS，还要考虑性能。
前端开发已然成为一个工程化问题。经历了这么多，妇人A也慢慢觉得自己牛逼起来，却不知道，他的进化之旅才刚刚开始。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85493.html
摘要：我从没有听到有人问如何做一名优秀甚至卓越的前端工程师。作为一个优秀的前端工程师还需要深入了解以及学会处理的这些缺陷。再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。 我所遇到的前端程序员分两种： 第一种一直在问：如何学习前端？ 第二种总说：前端很简单，就那么一点东西。 我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师...
摘要：我从没有听到有人问如何做一名优秀甚至卓越的前端工程师。作为一个优秀的前端工程师还需要深入了解以及学会处理的这些缺陷。再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。 我所遇到的前端程序员分两种： 第一种一直在问：如何学习前端？ 第二种总说：前端很简单，就那么一点东西。 我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师...
摘要：我从没有听到有人问如何做一名优秀甚至卓越的前端工程师。作为一个优秀的前端工程师还需要深入了解以及学会处理的这些缺陷。再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。 我所遇到的前端程序员分两种： 第一种一直在问：如何学习前端？ 第二种总说：前端很简单，就那么一点东西。 我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师...
摘要：我从没有听到有人问如何做一名优秀甚至卓越的前端工程师。作为一个优秀的前端工程师还需要深入了解以及学会处理的这些缺陷。再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。 我所遇到的前端程序员分两种： 第一种一直在问：如何学习前端？ 第二种总说：前端很简单，就那么一点东西。 我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师...
摘要：进阶的知识的话就是响应式这一块了，一套代码能适配手机是初级前端工程师的进阶，在北京工资一般在左右。进阶的知识应该是这一块了，当然并不难，了解怎么与后台交互是学习的关键点，在北京的工资一般在左右。 web前端？如果你是一名web前端工程师，那么你将感到幸运，从之前的默默无闻，到后来的给后台工程师打下手，再到巅峰一时。web前端可谓是当下最火的职位之一。 showImg(https://s...
摘要：进阶的知识的话就是响应式这一块了，一套代码能适配手机是初级前端工程师的进阶，在北京工资一般在左右。进阶的知识应该是这一块了，当然并不难，了解怎么与后台交互是学习的关键点，在北京的工资一般在左右。 web前端？如果你是一名web前端工程师，那么你将感到幸运，从之前的默默无闻，到后来的给后台工程师打下手，再到巅峰一时。web前端可谓是当下最火的职位之一。 showImg(https://s...
阅读 2745·2021-10-14 09:43
阅读 2693·2021-10-14 09:42
阅读 4207·2021-09-22 15:56
阅读 2230·2019-08-30 10:49
阅读 1884·2019-08-27 11:02
阅读 1477·2019-08-26 13:34
阅读 2223·2019-08-26 10:35
阅读 487·2019-08-23 17:57
