WEB前端性能优化之一—

1、减少Http请求

　　http请求是指从客户端到服务器端的请求消息。其中包含对html、css、js、图片资源以及交互数据处理内容等。在前端性能网页级优化中较少http请求是非常重要的一块，每当我们提到性能优化，首当其冲的就是http请求。都说要减少 HTTP请求，那请求多了到底会怎么样呢 ?首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象。80%的终端用户响应时间花在了前台。其中，大部分时间都用于下载页面中的各种组件——图像、样式表、脚本、Flash等等。因此，减少组件的数量就能够减少呈现页面所需的HTTP请求数量。这正是加速网页显示的关键所在。

　　减少http请求的途径有哪些？

　（1）从设计层面简化页面

　　　　审查你的页面的每条http请求是否是必须的，每一条http请求都有可能延迟你的页面打开时间。保持页面简洁、减少资源的使用时最直接的。

　　（2）资源合并与压缩

　　　　当我们完成一个页面时都会有一些外部引用的脚本、样式文件，如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。对于CSS、Javascript文件可以进行压缩减少文件的体积，达到减少下载所用时间。

　　（3）CSS Sprites

　　　　CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。使用方法很简单通过background: url(../img/***) no-repeat -26px -14px;设置图片的具体所在位置。

　　（4）小图标内嵌在CSS中

　　　　这种方法是利用base64在线解码将图片转换成base64直接内嵌在CSS中。具体代码如下：

.demoImg{ 

       background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....");

 }

　　　　其优点是：减少了对图片的请求。

　　　　其缺点是：增加了样式的代码量，更改图片样式比较困难。

2、延迟加载（分批次加载HTTP请求）

　　当http请求已经无法再减少时，我们接下来需要审视页面整体的http请求有没有优化空间，我们的目的是：加快首屏的显示速度。在这里就可以考虑我们的延迟加载了。使用延迟加载前首先需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

　　（1）Lazy Load Image（懒加载）

　　　　延迟加载最具有代表性的就是Lazy Load Image（懒加载）

　　　　懒加载并不一定能减少HTTP请求数，但是却能在某些条件下或者页面刚加载时减少HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。

 <!DOCTYPE>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title> 风信子丶</title>

     <style>

         img a,img{border:0px;}

         div{ margin-bottom:10px;}

     </style>

 </head>

 <body>

 <img src="data:image/hh.jpg" /><br />

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 <div><a href="#"><img src="data:image/ff.gif" data-original="image/hh.jpg"></a></div>

 </body>

 <script type="text/javascript" src="js/jquery-1.12.0.js"></script>

 <script type="text/javascript" src="js/LazyLoad.js"></script>

 <script type="text/javascript" charset="utf-8">

     $(function() {

         $("img").lazyload({

             placeholder : "image/ff.gif",

             effect: "fadeIn"

         });

     });

 </script>

 </html>

　　你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

　　（2）用Javascript动态加载Jquery、css文件

　　　　下面为关键部位代码：　

 var dynamicLoading ={

     css:function(path){if(!path || path.length ===0){thrownewError('argument "path" is required !');}var head = document.getElementsByTagName('head')[0];var link = document.createElement('link');

         link.href = path;

         link.rel ='stylesheet';

         link.type ='text/css';

         head.appendChild(link);},

     js:function(path){if(!path || path.length ===0){thrownewError('argument "path" is required !');}var head = document.getElementsByTagName('head')[0];var script = document.createElement('script');

         script.src = path;

         script.type ='text/javascript';

         head.appendChild(script);}}

 //动态加载 CSS 文件

 dynamicLoading.css("test.css");//动态加载 JS 文件

 dynamicLoading.js("test.js");

　　　　利用动态添加Jquery、css文件可以缓解http请求实现延迟加载作用。

3、尽量脚本置底

　　脚本在加载时会阻塞其他资源。

　　例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。

4、异步执行内嵌脚本

　　inline脚本对性能的影响与外部脚本相比，是有过之而无不及。首页，与外部脚本一样，inline脚本在执行的时候一样会阻塞并发请求，除此之外，由于浏览器在页面处理方面是单线程的，当inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。简而言之，inline脚本在执行的时候，页面处于空白状态。鉴于以上两点原因，建议将执行时间较长的inline脚本异步执行，异步的方式有很多种，例如使用script元素的defer属性(存在兼容性问题和其他一些问题，例如不能使用document.write)、使用setTimeout，此外，在HTML5中引入了Web Workers的机制，恰恰可以解决此类问题。

5、避免404

　　404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。

6、减少不必要的HTTP跳转

　　对于以目录形式访问的HTTP链接，很多人都会忽略链接最后是否带’/’，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了301跳转，增加了多余请求。具体参见下图，其中第一个链接是以无’/’结尾的方式访问的，于是服务器有了一次跳转。

WEB前端性能优化之一——网页级优化的更多相关文章

Web前端性能优化的9大问题
1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...
web前端性能优化的技巧
1. 请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
web前端性能优化指南(转)
web前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
Web前端性能优化教程08：配置ETag
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...
web前端性能优化指南
web前端性能优化指南 web前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...
Web前端性能优化全攻略
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
Web前端性能优化全攻略[转载]
1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...
Web前端性能优化进阶——完结篇
前言在之前的文章如何优化网站性能,提高页面加载速度中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳链接移步过去看一下),那么今天我们深入讨论如何进一步优化 ...
Web 前端性能优化相关内容解析
Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...

随机推荐

Mac下安装包管理平台Homebrew（Mac 10.12）
在终端上输入: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/maste ...
【转】101个MySQL调试和优化技巧
MySQL是一个功能强大的开源数据库.随着越来越多的数据库驱动的应用程序,人们一直在推动MySQL发展到它的极限.这里是101条调节和优化MySQL安装的技巧.一些技巧是针对特定的安装环境的,但这些思 ...
mac解压缩
tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)---------------.gz解压1:gunz ...
通过div模拟table
参考: https://css-tricks.com/complete-guide-table-element/ 不要使用内联样式,但只是为了了解这里是如何去: <section style=& ...
【Xilinx-Petalinux学习】-06-OpenCV通过USB摄像头采集图像。
占位, 实现USB摄像头的图像采集与保存
oralce
1.对数据库SQL2005.ORACLE熟悉吗? SQL2005是微软公司的数据库产品.是一个RDBMS数据库,一般应用在一些中型数据库的应用,不能跨平台. ORACLE是ORACLE公司的数 ...
Delphi基本图像处理方法汇总
这篇文章主要介绍了Delphi基本图像处理方法,实例汇总了Delphi操作图像实现浮雕.反色.模糊.翻转等常用效果的方法,非常具有实用价值,需要的朋友可以参考下本文实例汇总了Delphi基本图像 ...
php5.4下配置zend guard loader
前些日子的时候,zend官网下还没有支持PHP5.4的zend guard loader,今天再上去看的时候居然发现了,看来是我好久不关注它的缘故了... zend guard loader 干什么的 ...
js模块化开发——require.js的用法
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
Java 验证用户名、密码
1. 数据库操作 2.验证用户 2.1. 查询 String sql = String.format("select count(*) from user where name='%s' a ...

WEB前端性能优化之一——网页级优化

3、尽量脚本置底

WEB前端性能优化之一——网页级优化的更多相关文章

随机推荐

热门专题