在提高网页加载方面,前端主要要从以下几个方面入手:减少代码大小、优化代码结构、优化网络请求、页面异步延迟加载。
  减少代码大小
  包括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请求,但是这个仅适用一些体积较小的图片,比如图标,不然转换后的字符串会比较大,得不偿失。