背景
前端这个职位的诞生也有短短的十年。而在十年之前,我不认识你,那会还叫网页制作
,用着一个Adobe非常牛逼的软件叫Dreamweaver
。这是一个神奇的软件,绚丽多彩的网页通过它,拖拖拽拽,就这么梦幻般的生成了。网页制作师们,像一群织梦的妇人,心灵手巧,耐苦耐劳,从不抱怨。
直到有一天。
有位妇人(第一位妇人)站出来说:
我不用Dreamweaver了,它生成的网页垃圾代码太多,而且兼容性问题很多,特别是IE下,制作出来和实际展示完全不一样,修改还麻烦,好坑爹。
第二位妇人也站了出来:
对!
第三位妇人站了出来:
说得好!
第四位妇人站了出来:
我要手写代码!
自此,前端工程师诞生了!
最初的前端开发
网页开始逐步由拖拽生成转变为手写代码,从此,手写HTML
,CSS
,Javascript
,会点PS掌握切图,成为了前端妇人们长期赖以生存的技能。
手写的代码什么样呢?最简单的就是下面这样。
demo.html
html
... <link rel="stylesheet" href="a.css"/> <link rel="stylesheet" href="b.css"/> ... <p class="foo">Wish you happy everyday!</p>
a.css
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
... <link rel="stylesheet" href="a.css"/> <link rel="stylesheet" href="b.css"/> <link rel="stylesheet" href="c.css"/> <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> ...
老板又来了,找妇人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
<link rel="stylesheet" href="min.all.css"/> <script type="text/javascript" src="min.all.js"></script>
期间经历了
- 手写前端代码
- 消除缓存影响
- 合并网络请求
- 压缩静态资源
前端妇人们不再只管写HTML,CSS和JS,还要考虑性能。
前端开发已然成为一个工程化问题。
经历了这么多,妇人A也慢慢觉得自己牛逼起来,却不知道,他的进化之旅才刚刚开始。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。