web前端性能优化方法-小小的总结

一.图片懒加载

原理：图片的加载是由src的值引起，当对src赋值时浏览器就会请求图片资源，基于这个，可以利用html5属性data-XXX来保存图片的路径，当我们需要加载图片的时候才利用js将data-xxx的值赋予src，从而进行一定程度上的性能优化。
简单介绍一下实现方式

1.自己写轮子，通过上述原理，用js自己手写

2.使用jquery-lazyload.js，属于jQuery的插件，需要依赖jQuery。

引入插件

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>

html写法

<img class="lazy" data-original="images/p1.jpg" style="margin-top:500px" height="300">

jq代码进行参数调节

<script type="text/javascript">
    $(function() {
        $("img.lazy").lazyload();
    }) </script>

jquery-lazyload.js参数介绍
$(function() {
$(“img.lazy”).lazyload({
threshold :100, //实现滚到距离其xx px时就加载
placeholder: “images/loading.gif”//为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
event : “click” //触发定义的事件时，图片才开始加载
effects:”fadeIn” //图片显示时的效果，默认是show。
container: $(“#container”) //值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failure_limit : 20 //插件找到 20 个不在可见区域的图片时才停止搜索
skip_invisible : false //想要加载隐藏图片.设置skip_invisible为false
});
})

3.– echojs实现方式：（推荐）
echo.js相比与jquery-lazyload.js主要有以下两个优点：

不依赖jquery
参数短小精悍，是我们最需要设置的两项
轻巧适合普通工程

引入插件库

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

html

<img class="lazy" data-echo="images/p1.jpg" style="margin-top:500px" height="300">

js调参

echo.init({
//离可视区域多少像素的图片可以被加载
          offset: 500, 
 //图片延时多少毫秒加载
       　throttle: 1000
});

二.减少http请求

80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量。
主要通过以下途径
1.CSS Sprites：
可以直接参考相关的在线工具
2.合并css，js（效果明显）
在css/js 文件夹中创建debug.txt 输入下述代码

(其实就是windows自带的bat操作)
    copy 1.css+2.css sum.css \b

save之后将后缀txt改成bat文件运行即可
但是必须检验一下，防止莫名其妙出现一些问题= =

3.精简css/js 可采用压缩的方法
http://tool.oschina.net/jscompress?type=2

三.图片&视频压缩（最应该做的事情）

https://www.picdiet.com/
可以参考在线
进行压缩
能压多小压多小。。

四.使用cdn加速

去网上copy一段原理

cdn——维基百科给出的解释是：内容分发网络（Content delivery network或Content distribution
network，缩写：CDN）。简单来说它主要的工作是把我们需要被分发的内容分发到世界各地的各个节点上，让世界各地的人都可以在距离最近的网络节点拿到想要拿到的内容，减少网络传输距离从而达到加速的目的（需要提过资源绝对地址告诉cdn厂商，让厂商去智能拉取）。当用户发起内容请求时，通过cdn厂商的智能DNS域名解析拿到cdn厂商边缘节点服务器的ip（cdn厂商会在运营商注册），然后向边缘节点服务器发起请求，请求内容数据(这件事情由浏览器完成)，边缘节点会检测当前节点是否有数据，如果没有就去front（父级节点，父级可能还会有父级节点，不同的网络环境策略会略有不同）节点要，如果还找不到就去源站拿，并依次序返回。如果某个边缘节点可以找到，会先校验内容有效期，当确定有效期之后返回给用户。

五.还有其他一些小细节

CSS放在页面最上部，javascript放在页面最下面
写css时多class多合并，注意编程规范，尽量少写内联标签…
精简css js
避免css表达式
等等。

六.其他

其他的还有很多企业化工程需要考虑的性能优化方法，也许以后会接触吧~