提升网页的加载速度浅析

加快网页的加载速度，无疑是提升用户体验的一个很好的方法。可是这里咱们如何提升网页的加载速度呢？这里我总结了几点。
    固然，这也是我第一天上班来的第一个任务。。。
    一、使用良好的结构
        好比说XHTML具备很大的优点，至少你的页面会更加的符合标准！可是他大量的使用了标记（<start> , <end>等），而这就意味着浏览器须要下载更多的代码，因此尝试在你的页面中使用较少的XHTML，减小页面的大小。
    二、尽可能减小HTTP的请求次数
        终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。经过减小页面中的元素能够减小HTTP请求的次数。这是提升网页速度的关键步骤。
        减小页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减小HTTP请求次数同时又可能保持页面内容丰富的技术。
        合并文件是经过把全部的脚本放到一个文件中来减小HTTP请求的方法，如能够简单地把全部的CSS文件都放入一个样式表中。当脚本或者样式表在不一样页面中使用时须要作不一样的修改，这可能会相对麻烦点，但即使如此也要把这个方法做为改善页面性能的重要一步。
    三、优化网页图片文件
        你的网页必定有图片，加载一个网页每每图片的总尺寸是最大的，特别是那些颜色丰富的背景图片和大副广告图片。因此通常要在同等图片质量的状况下要尽量地 减少图片尺寸。在Photoshop中咱们能够用保存为Web图片的选项试一下。图片也有几种经常使用的文件格式。如JPEG通常是用来存储照片或全彩色图片 的，好比照片、屏幕截图等。GIF图片格式的颜色要比JPEG少，适合作小图，如制做按钮、Logo等，另外GIF支持动态效果。PNG跟GIF比较相 似，但它的尺寸较大，支持的颜色也比GIF要多，而且PNG支持背景透明。咱们能够试试使用一种不一样的格式保存图片试下，如将PNG和JPEG换成GIF 试试
    四、CSS Sprites是减小图像请求的有效方法
        把全部的背景图像都放到一个图片文件中，而后经过CSS的background-image和background-position属性来显示图片的不一样部分；
        图片地图是把多张图片整合到一张图片中。虽然文件的整体大小不会改变，可是能够减小HTTP请求次数。图片地图只有在图片的全部组成部分在页面中是紧挨在一块儿的时候才能使用，如导航栏。肯定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具备可读性，所以不推荐这种方法；
        内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增长页面的大小。把内联图像放到样式表（可缓存）中能够减小HTTP请求同时又避免增长页面文件的大小。可是内联图像如今尚未获得主流浏览器的支持。减小页面的HTTP请求次数是你首先要作的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所说，HTTP请求在无缓存状况下占去了40%到60%的响应时间。
        关于CSS Sprites后续我会尝试使用下，若是有什么心得仍是会分享。
    五、合并Js文件和CSS
        将JS代码和CSS样式分别合并到一个共享的文件，这样不只能简化代码，并且在执行JS文件的时候，若是JS文件比较多，就须要进行屡次“Get”请求，延长加载速度，将JS文件合并在一块儿后，天然就减小了Get请求次数，提升了加载速度。
    六、懒加载技术的应用
        延迟显示可见区域外的内容，为了确保用户能够更快地看见可见区域的网页能够延迟加载或展示可见区域外的内容，为了不页面变形，可使用占位符标签制定正确的高度和宽度。好比WP的jQueryImage LazyLoad插件就能够在用户停留在第一屏的时候，不加载任何第一屏如下的图片信息，只有当用户把鼠标往下滚动的时候，这些图片才开始加载。这样很明显提高可见区域的加载速度，提升用户体验。
    七、延迟加载和执行非必要脚本
        网页中有不少脚本是在页面彻底加载完前都不须要执行的，能够延迟加载和执行非必要脚本。这些脚本能够在onload事件以后执行，避免对网页上重要内容的呈现形成影响。这些脚本多是你本身网页的甲苯，每每更多的是一些第三方脚本，这样的有不少，好比评论、广告、智能推荐、百度云图、分享等等，这些彻底能够等主体内容加载完后再执行。
    八、使用AJAX
        AJAX即“Asynchronous Javascript +XML“，是指一种建立交互式网页应用的网页开发技术。经过在后台与服务器进行少许数据交换，AJAX可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。传统的网页(不使用AJAX)若是须要更新内容，必须重载整个网页面。
    九、精简代码
        这个能够说是最直接的一个方法，也是用得比较多的，对网页代码进行瘦身，删除没必要要的沉冗代码，好比没必要要的空格、换行符、注释等，包括JS代码中的无用代码也须要清除。其中对于注释代码的清除可能有些人存在误区，甚至有的在里面堆砌关键词。
    十、使用 Progressive JPEGs
        ProgressiveJPEGs图片是JPEG格式的一个特殊变种，名为“高级JPEG”。在建立高级JPEG文件时，数据是这样安排的：在装入图像时，开始只显示一个模糊的图像，随着数据的装入，图像逐步变得清晰。它至关于交织的GIF格式的图片。高级JPEG主要是考虑到使用调制解调器的慢速网络而设计的，快速网络的使用者一般不会体会到它和正常JPEG格式图片的区别。对于网速比较慢的用户，这无疑有很好的体验。
    十一、压缩文本和图片
        压缩技术如gzip能够有效减小页面加载的时间。包括HTML，XML，JSON(JavaScript对象符号)，JavaScript和CSS等，压缩率均可以在大小70%左右。文本压缩用得比较多，通常直接在空间开启就行，而图片的压缩就比较随意，不少都是直接上传，其实还有很大的压缩空间。
    十二、图片使用height和width属性
        你会给每一个图片加上height和width属性吗？这两个属性可让浏览器在加载图片以前就知道图片的长和宽，并预留出指定的长宽待图片加载后显示。如 果没有这两个属性，浏览器还须要在读取图片成功后再处理一次页面布局样式，这无疑减慢了网页加载速度。因此在固定图片大小的状况下最好都使用上长和宽属性。
    1三、使用 HTTP 压缩，并始终使用小写的 div 和类名
        可使用 HTTP 压缩来减小服务器与浏览器之间的通讯量。能够在 Apache 中配置 HTTP 压缩（.htaccess 文件），或者能够将其包含到页面中（对于 PHP，可使用一个 HTTP_ACCEPT_ENCODING 选项）。可是请注意：不是全部浏览器都支持压缩。即便是支持压缩的浏览器，压缩和解压缩都会加剧处理器的负载。要在 Apache 中启用地毯式（blanket）压缩（即压缩全部文本和 HTML），使用如下命令：
        AddOutputFilterByType DEFLATE text/html text/plain text/xml
        另外，考虑一下您想要压缩的内容。图像、音乐和视频在建立时已经进行了压缩，所以您能够将压缩对象限制为 HTML、CSS 和 JavaScript 文件。另外一种减小压缩工做的技巧是使用小写形式的 <div> 元素和类名。因为大小写敏感性，而且使用的是无损压缩，<header> 与 <Header> 不一样，它们被压缩为两个不一样的标记。