提升网页加载速度的前端优化方案

　　在提高网页加载方面，前端主要要从以下几个方面入手：减少代码大小、优化代码结构、优化网络请求、页面异步延迟加载。
　　减少代码大小
　　包括html、css、js代码文件的大小，又包括两个方面：
　　iis7网站监控
　　网站打开速度查询、DNS污染、地区电信劫持等问题检测。
　　第一是精简代码，提升性能。在确保功能和性能等软性要求的前提下，采用更简洁的代码实现方式，也就是说能用一行代码搞定的就不用两行，包括不必要的html标签嵌套，css代码、js代码，这对前端编程的要求较高，另外js局部变量的查找速度比全局变量快的多，所以js中尽量使用局部变量而非全局变量。
　　第二个是优化代码。在编码过程中，为提高易读性，必然带有许多空格，注释，或者其他冗余的代码，使用代码压缩工具，快速删掉逗号、注释甚至不需要的空格，可以显著压缩 JavaScript 代码大小，这类的工具有Google Closure Compiler 等。不仅仅是js代码可以用工具压缩，css和html代码同样可以压缩，工具也有很多。除了本身代码的优化，在使用第三方库的时候，要记得删除一些不必要的组件。
　　第三是优化图片资源
　　图片本身比文字（代码）占有更大体积，但是一图胜千文，图片的使用可以极大的美化页面，所以图片还是要用的，但是在保证美观的前提下，我们可以对图片进行优化，寻求美观与速度之间的平衡。
　　第一就是图片压缩，减小图片本身的大小。压缩分为有损压缩和无损压缩，各有利弊，这里不再细说了。具体方法可以下载专门的工具，也可以在线压缩。
　　第二是如果可以用CSS样式来替代图片，那就尽量用CSS替代图片。现在随着CSS3的成熟，一些特殊的形状和效果都可以实现了，但这各很考验CSS的功底哈。
　　第三是使用图片的时候的小细节，能用background使用图片就尽量不用img标签来加载图片，另外如无必要，能使用png8就不使用gif格式。
　　第四就是图片预加载和延迟加载技术，比如使用缩略图，默认占位符替代图片，但不影响后续页面内容的呈现。
　　第五是有些情况下，可以将图片转base64，将图片变成字符串，这样可以减少http请求，但是这个仅适用一些体积较小的图片，比如图标，不然转换后的字符串会比较大，得不偿失。

转载于:https://www.cnblogs.com/goodcola/p/11571053.html