20

背景

前端这个职位的诞生也有短短的十年。而在十年之前,我不认识你,那会还叫网页制作,用着一个Adobe非常牛逼的软件叫Dreamweaver。这是一个神奇的软件,绚丽多彩的网页通过它,拖拖拽拽,就这么梦幻般的生成了。网页制作师们,像一群织梦的妇人,心灵手巧,耐苦耐劳,从不抱怨。

直到有一天。

有位妇人(第一位妇人)站出来说:

我不用Dreamweaver了,它生成的网页垃圾代码太多,而且兼容性问题很多,特别是IE下,制作出来和实际展示完全不一样,修改还麻烦,好坑爹。

第二位妇人也站了出来:

对!

第三位妇人站了出来:

说得好!

第四位妇人站了出来:

我要手写代码!

自此,前端工程师诞生了!

最初的前端开发

网页开始逐步由拖拽生成转变为手写代码,从此,手写HTMLCSSJavascript,会点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;
}

更新完上线,老板去访问时,发现.foocolor还是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.cssb.cssc.css合并成all.css,把a.jsb.jsc.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也慢慢觉得自己牛逼起来,却不知道,他的进化之旅才刚刚开始。


binnng
3.7k 声望308 粉丝

前端工程师