关于前端优化

初入前端的迷途小书童–大牛勿喷

最近看了很多关于前端优化方面的东西，很有收获，总结了一些东西。

1、请减少HTTP请求基本原理：

一个正常HTTP请求的流程简述：浏览器与用户输入的URL进行连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。

在我们请求一个HTML页面时，接下来会请求页面需要的CSS文件，JS文件，图片，音乐等等信息。这样会导致浏览器与服务器频繁连接，频繁请求数据。这样的情况相当于，我们去买十包薯片，需要重复往超市跑十次，那么我们为什么不一次性全部买回家呢？

换句话说，浏览器在连接服务器时，如果只请求一个文件，那么我们就可以不必重复的去连接服务器请求资源了。

在同网速的情况下，下载一个100kb的图片要比两个50kb的要快，所以，减少请求服务器的次数，可以对前端页面进行优化。

2、合并图片（CSS精灵）
在我们浏览的网页中，常常会看到一些小图标，比如
，那么像这样的图片我们为什么不做成一张图片呢？呢么请求一张图片，比四张图片要快很多。我们可以用CSS的background-position（x,y）来重复利用一张图片四次，每次呈现图片的不同位置就可以了。

3、自动化构建工具
在下不才，只是了解了Grunt、Gulp、Webpack三种工具，这三种工具可以压缩代码（HTML/CSS/JS/IMG….）压缩之后请求的代码块里边会省去空格符，回车符，function里边的形参也会被压缩成一个字符，实际压缩出来的文件大概是原文件的1/3

4、LESS/SASS
这两种预处理语言，现在是用的比较火的。就LESS来说，我们可以定义一个color：red;的代码块为a，在一个页面中重复使用到的样式很多，可以重复使用a，这个代码块。就避免了CSS代码的浪费问题

今天先写到这里了。