浅谈Web前端优化的本质与方法

对Web前端进行优化，就当前的网络开发环境而言也是有必要的。其必要性在于很多企业是在自己的服务器上来进行Web开发，而由于硬件资源有限，同时又有商业用途，怎样用有限的资源去满足企业网站商用化的目标，这成为了对Web前端优化的原动力。从用户的体验角度讲，必然希望自己浏览的网站文字、图片、视频动画，以及其他模块的加载是流畅的，从而获得好的浏览体验。尚学堂陈老师从企业开发的角度来审视和回答关于Web前端优化问题，希望能够对从事相关工作的朋友们有所帮助。
当前，整个网络环境都经历了不同程度的改善，包括常用的TCP/IP协议在内，这让Web前端开发变得越来越容易，同时，浏览器版本的提升也日益改善了用户体验，各种代理服务器的产生也让很多企业不用再为硬件问题担忧。但以上这些只解决了Web开发和优化中的一部分问题。代理服务器毕竟用途和空间都是很有限的，为了确保数据的安全和可操控性，还是应该从Web系统的各个层次去制定优化目标。
优化的最终目标，对于用户而言就是页面加载更快，操作响应及时，减少用户不必要的等待时间；对于企业而言，减少网站的运营成本和维护费用，减少网络带宽的占用和存储资源的占用。所以优化途径也就是从网站页面和代码的优化方向来进行。具体来讲大概有以下几个方面：

一、减少过多的HTTP外部请求
一个完整的HTTP请求就是一个网络资源占用的过程，从DNS、数据传输到最终的服务器响应，以及数据的接收需要一定的时间，随主机的硬件、服务器的架构以及工作环境的不同，响应的时间也是不一样的。这一过程决定着用户的使用体验，一般情况下，页面加载在一秒以内是可以接受的，当然0.5秒以内响应会更好提升用户体验。那么这样，最简单的办法就是设计一个简洁的页面，合并和压缩一些图片，减少多余的CSS和多余的插件，巧妙利用浏览器的缓存技术，减少第二次浏览所需加载的时间。如果是大型的网站，服务器有多个并且分布于不同的地理位置，可以利用CDN服务器缓存技术，将站内文件分发到离用户最近的服务器当中。浏览器缓存也是利用类似的原理，这也是当前最常用的减少外部请求的方法。

二、在恰当的位置使用CSS
在一般情况下的网页设计中，设计者们习惯于在建立好HTML的框架之后来引入CSS。这样的做法是可行的，这样也可以节约设计者的构思时间，方便管理整个网页的设计流程；但如果要是从优化的角度考虑，笔者还是建议将带有样式的CSS文件独立出来，不用写在HTML中，而且样式的设计尽量使用代码。这样，通常可以将CSS放在HTML的上面，加快了网络加载速度。同时，合并CSS图片也是减少HTTP请求数的好办法。

三、优化代码
代码的优化核心思想就是让代码变得简洁高效。代码越多，页面文件就越大，这样不利于提高页面的加载速度。所以在精简代码，减少不必要标签的同时也要善于合理利用标签。比如在做粗体字的时候我们可以使用B标签而不是Strong标签，B标签的使用可以大大缩减无关的冗余代码；在合理使用标签的同时也要减少嵌套语句的使用和with、eval与 Function等，因为这些函数变量会使网页的响应速度大大降低，也不利于后期的维护和优化；还有就是建议使用轻量级的框架，类似于Pure、Skeleton等，减少使用javascript、ajax、iframe框架，这样可以简化代码，避免出现错误。
 

转载于:https://my.oschina.net/u/3628059/blog/1631012