102.尚硅谷_HTML&CSS基础_压缩css代码.avi原创

那呢，刚才是把我们的整个页面呢，实际上都已经给它，呃，把这个页面就算是给它写完了啊写完了，那这里边呢，我们要说一下，还有一个问题，其实我们需要去处理一下，那我们来简单的说一下，我们在我们的这个真实的工作中啊，在我们的工作中，我们项目开发大概是一个什么样的流程，让这边简单跟大家说一下，那我们在工作里边，假设我们要做一个项目啊，可能做一个项目，那我们第一件事你们觉得应该是先干什么呀？先干什么呀？接项目是，那你肯定都接完项目才开始做的是吧，你要没有项目都没接呢，就没有必要做了，是哎，肯定是接完项目了，我们已经有项目了，我们马上就要做了，我们要相个码，诶，第一件事我们叫做需求分析，哎什么叫需求分析啊由呃，需求分析这个事不由不是由咱们负责，由这个什么呀，产品经理啊产品经理，那你要做一个项目，那你要先搞清楚你这项目干嘛呀，你是给谁做的。

对吧，哎，你的目标用户是谁？那这些东西都在干嘛呀，在需求分析里边分析出来，包括你那个项目里边，你要定义哪些功能，每一个功能，每一个功能都是什么样的，它的业务流程什么，这些东西都是需要在我们需求分析里边干嘛的呀，确定的，包括我们前端页面的一个什么呀，哎，设计都是在我们这个需求分析里边都必须要干嘛呀，都必须要确定的啊，都必须要确定的，所以整个需求分析在我们这个整个开发过程当中呢，是一个比较比较重要的一块，大概要花费我们整个一个时间的一大概什么呢？大概。1/3的时间，诶1/3，也就是说我们有1/3的时间实际上都在什么呀？需求分析，但是还好呢，这部分工作不用咱们干，谁干呢？产品经理干啊，产品经理干，那接下来干嘛了？产品经理需求分析完了干嘛了？哎，他要把他那个分析好的需求交给谁了？诶交给咱们了，诶不论你是前端也好，还是说这个后台也好，我们都需要干嘛了？需求分析完了，我们是不是要该写代码了呀？诶写代码了，那我们大概有多少时间呢？大概有1/6的时间啊，我们说整个项目啊，假设是一个一，我们有1/6的时间是来干嘛的呢？是来编码的啊，是来编码的，也就是说我们所做的工作都在什么呀，这个1/6里啊，完成我们刚才所做的工作，都属于这1/6里边的一个时间啊，1/6的时间都是在编码的，那现在假设我们刚才做的这么一个项目的话，实际上我们这个项目嘛了，已经这1/6是不是经完事了，那这1/6完了以后干嘛呢？哎，还有我们一个。

啊，1/2的时间都是用来测试的啊，有1/2的时间都是原来测试，那剩下是不是正好就加起来正好一对吧，哎，加起正好一啊剩下的一半，也就是说我们整个一个项目开发的有一半的时间都是来干嘛的呀，测试了，所以以后你们到了公司工作以后，你不要你不要觉得这个这个改bug这事儿是是什么呀，是一个很low的一个事儿，那改bug以后是我们一个什么呀，我们一个常态，因为你有一半时间都是干这个事儿，所以改bug时间是一个什么呀，是一个常态，那就要谈到了一个测试，那实际上我们这开发已经完成了，那接下来我们这工作是不应该测试了呀，那测试一般谁来完成呀？诶交给我们这个测试人员，他去做这个测试，那注意了，测试我们说了测试要分成两种，测试分成两种，一种是我们这个叫做一个性能测试，还有一种叫做我们这个业务测试，诶什么叫性能测试。

性能叫做就是什么呀，就是我们这个网页的一个访问的什么呀，访问的呀速度，第一个测试就是要测试我们整个网页的一个什么呀性能，那这个性能我们要怎么测呀，说白了，测试性能的时候，我是不去管这个业务的啊，我是不去管这个业务逻辑的，我测试性能的时候，即使你的业务逻辑是错的，我也不管，我只管你什么呀性能，什么叫业务逻辑啊，哎，假如说我点你这个链接，我点完了呢，我希望出现一条狗，我点完了的确出现一条狗，那你的业务逻辑就就对了，哎，那我点完了出现我希望出现一条狗，结果你出现一只兔子，你这个业务逻辑干嘛了，是不是就错了呀？哎，就错了啊，但是这块注意，性能测试的时候不管这个，即使我点完了，我需要的是狗出现了一个兔子，我干嘛呀，我也不管，我只考虑什么，你这个兔子出现花费了多少时间啊，多少时间，什么叫测性能测试，简单举个例子啊，比如说就拿我们这个页面来说，我这个页面要。

访问这个页面，我是不是要先输入一个网址啊，好在我这儿输入完网址，我这咔一敲回车，我的浏览器是不是开始向服务器发请求了呀？诶我咔一敲回车，从我敲回车那一刻开始，我这个咔一掐表到什么呢？到你这个页面完全显示出来为止，我咔再一掐表，它是不是需要一个时间呀？诶那这个时间的长短就是你这个什么呀，你这个页面的一个性能，那这个时间一般来讲不能超过三秒，三秒的体验就已经很差了，你们上网的时候应该会有这种感觉，可能时间太长了，你是就不看了呀，直接点个叉的时候给关了呀，所以这块注意一般不会超过什么呀，不要求你超过三秒啊，最长最长三秒了不定啊，三秒了不定，那好，那现在这块就诶有一个问题，那我们想想，那你说这个测试人员，他是不是真是掐表去测试的呀，不是这要掐表这个工作，这这个工种太low了是吧，诶太low了，他怎么测试的呀，他有专门的这个软件啊，专门软件，而且他测试呢，也不是通过我们这个。

浏览器，我们这个浏览器干嘛呀，我再使劲访问，我是不是同时就一个用户访问呀，诶我们这种测试要什么呀，测试一种什么呀，高并发的一个状态，我要使用软件干嘛呀，模拟模拟20个用户，模拟30个用户，模拟100个用户同时访问我这个网站一个什么呀状态，那有可能你这个网站我只有一个用户访问的时候干嘛呀，非常快，但是当用户多的时候干嘛呀，是不是就慢了，哎就慢了啊，那好，那这一块涉及到我们这个性能测试，那咱们现在来看看，那我们所谓的性能就是要干嘛呀，就是要提升我们这个网站的一个访问，访问速度，也就是说我们需要我们的访问速度是不是越快越好啊，诶那现在来看，那从我们这个角度来看，我们怎么能让我们这个网站访问的再快一点，或者说我们这还有没有什么优化的东东西呢？诶哪可以优化，举个例子看看啊，我们说了，现在我们来看看我们这个CSS文件，CSS文件我这里边打开我们这个文件所在目录这一块呢，CSS。

这是一个6.79k reet点三加三呢，是一个1.06K，这两个文件本身它都不算大对吧？诶不算大，但是我们希望说这个文件是不是越小越好啊，文件越小访问速度是不是越快呀？但是你来看了，在我的这个CSS文件里，你来看了这玩意儿对于网页的渲渲染来说有没有用啊，这都是什么呀？注释吧，浏览器压根是不就不看这玩意儿啊，这个东西都是给我们开发人员去看的，浏览器看这玩意儿没用，那虽然没用，但是他会不会占用我的空间呀，也就是说用户在访问你的网页的时候，需要将那些他并用并用不着的一个东西给他干嘛呀，加载过去，那我们想想这个东西我们是不是就可以给他删掉了呀？诶什么时候删掉，待然我们这个项目真正部署到这个什么呀，生产环境里，就可以给他删掉了，怎么删呀，那比如比如说举个例子可以干嘛呀，走你删呗，诶。

这空格有没有用啊，没用吧，来这也删掉，诶这换行有没有用啊，也没用，走你给他删掉这这这换行有没有用啊，是不是都没用啊，也就说你要干嘛呀，把你这个代码里边的所有的换行啊，空格啊，缩进呀，这些没有用的东西，我们是不是都得需要删掉啊，这样才能确保我们这个文件是一个最小的了，说白了我们就需要对我们这个文件进行一个什么呀压缩，但是我这么压缩这这不得封是吧，你这一行一行山，咱们这样式表太小了，材这400多行，你真正一样表几千行万来行，常见的你的一行一行删是不是得封啊，还得封，而且你删完了有可能是干嘛来你你要删错了，你还真封的是吧，你想想你删完了以后是不是删成一行了，哎，一行，你要再改那玩意儿恶心死你是吧，哎，恶心死你，所以这里边我们要想它压缩呢，手动压缩是不现实的，我们是不是希望有一个工具啊，哎，可以帮。

我们去压缩一下，那怎么整呢？来，我把这个文件夹复制到我们这个桌面上来，现在呢，我就想对我这两个文件夹是不是进行压缩呀？诶那我们来看怎么压缩，压缩工具有很多，甚至很多在线工具，你上传一个CSS直接压缩好了，让你下载回来很多啊，那现在我没有网，我直接提供一款什么呢？诶直接就是一个绿色一个软件，诶我们这个note里边有一个什么呀，叫做一个GS的一个CSS zip zip什么呀，就是打包压缩这么一个意思，对吧？诶那说白了它可以干嘛呀，可以对我们这个GS文件或者是CSS文件进行什么呀，进行压缩啊，进行压缩，那我们来看看它是怎么压缩的啊，怎么用来，这用起来比较简单，直接双击是不是打开这个软件啊，诶然后呢，我们需要先干嘛呢？先选择一个文件夹，也就是说你要压缩那个文件跟哪吧，我这个文件跟哪儿呢？是不是桌面这个CSS文件夹呀，直接一选中我们来找到我这个桌面来，CSS是不是跟这儿呢呀，然后确定。

诶，然后一点什么呢？加载发现什么了，诶他是不是把我这两个CSR文件都加载进来了，诶原大小是一个6.79，这个是一个1.1.06啊1.06，然后呢，我这一点这个什么呀，压缩咱们来看效果啊，一点走你诶压缩完了，总体压缩了50%是吧？姐姐哎50%，然后来看。

诶，这是我们这个什么呀，压缩后的一个文件，我们来看它这个大小啊，这写什么呀，原大小是一个6.79，压缩后大小什么呀，三点多，这个原大小是一个1.06，压缩完了是不是七百八了，哎压缩了还不少了，虽然你感觉这东西是不是没提升多少是吧？哎，没提升多少，但是注意了，我们真正开发的时候可不可能有这两个文件呀，那CS文件多了去了啊，多了去了，所以你一个缩缩小50%总大小，其实这个大小还是干嘛呀，很可观的啊，很可观呢，对我们的速度是一个进一步的提升啊，我们来看看他给我们压缩完这个文件查模，直接我这一点开。诶是不是就很过瘾了是吧，这东西基本上看就干嘛了，哎，就看不懂了啊，就看不懂了，但是我们来看看能不能用，来这里边改个名啊，这叫一个这个min啊，加一个这个min加一后缀，我们区分一下，那像这一块跟我们这个GS一样，我们有一个min的版本，Min呢是我们的什么呀，在生产环境里边使用的版本，而我们什么呢？不但min这是什么呀，在我们这个开发环境里用的啊开发环境里来我给粘过来说这两个文件呀，诶index，一个meanin，还有一个这个reet，一个meanin，是不是都变成一行了，那就变成一行了，来那我们来看看，那你不能光压缩，你压缩完了又不能用了，是不是没用了，哎，所以压缩完了还得好使，来，那这里边我们直接改一个reet一个什么呢？Meanin，然后这来一个配置index一个min，你得跟我压缩前的效果是不是一样的呀？诶一样的啊关掉浏览器，然后呢，CTRL1运行。

是不是一模一样啊，诶一模一样啊，所以这里边儿通过压缩这个文件，我们就提升了一个这个什么呀，访问的一个速度啊，访问的速度，所以使用这个软件来学习一下怎么去压缩这个文件，那么想想除了压缩文件，我们还可以干嘛呀。还有一个技巧，你再看看，诶，我们这些乱七八糟图片是不是还有一堆的呀？哎，那我们想想文件能压缩，我图片怎么能压缩呀？哎，图片也可以压缩，而且看到没有，我们是不是可以用我们这个图片整合技术啊，诶你像这个这个这个这个这个。

这个是不是都可以干嘛呀，是不是放一起啊，哎，或者说其实大部分图片我们都可以对它做一个这个整合啊，做一个整合，也就是说我们可以把这些小图是不是拼成一个什么呀，雪碧图吧，诶雪碧图那可以，那好，那剩下呢，给你们点时间干嘛呢，把刚才这个压缩软件呢，来尝试去用一下，来看看怎么去压缩一个文件，然后呢，自己尝试着把这些图给它拼成一个什么呀，雪碧图啊，待会我们来尝试一块做一下啊，一块做一下。