项目总结与感悟：关于页面性能的优化

感悟

终于完成了这一项目，感觉。。。
又激动又刺激

将我的实战经验分享给大家：

先说说页面中的图片吧，
学前端的都知道的，图片的导入有两种方式：一是在HTML中用img格式；二是在css中用background属性。
可是问题来了，在css中导入时有时会引起某个属性值显示不出来，这就很尴尬了，你想对一个图片既旋转又拉伸，结果。。。
如下示例：
（HTML）

（css）

.bb4{
    float: right;
    width: 100px;
    height: 100px;
    margin-top: 0;
    -webkit-transition: transform .25s linear;
    -moz-transition: transform .25s linear;
    -o-transition: transform .25s linear;
    transition: transform .25s linear;
}
.bb4:hover{
    transform:rotate(360deg);
}
.bb4 img{
    clip-path: circle(40% at 50% 50%);
    -webkit-clip-path:circle(40% at 50% 50%);
    transition: all 400ms ease;
    cursor: pointer;
}
.bb4 img:hover{
    clip-path: circle(75% at 50% 50%);
    -webkit-clip-path:circle(75% at 50% 50%);
}

这就是用第一种方式导入的，可以发现，其中有两种transition和 -webkit-clip-path属性，
若是用background方式，可就有一种属性显示不出来（或者说：idea会报错）。

这就是img的相对好处。
BUT，它的坏处。。。也不小：

先不说像360、UC这种浏览器不支持某些特效img属性（会当做“广告弹窗”屏蔽掉！！！）；再者，img图片导入的加载速度也很慢。
如果你的服务器速度不高，额，你就考虑考虑少加点图片吧！

但一个网页怎么能没有图片？
如下两种解决办法：
1.首先，你要定义图片为预加载（这是超级超级有用的页面优化方式，可以大大提升用户体验感），
然后，（如果上面方法加载的也过慢）把图片压缩一下，尽量不要达到“M”，
最后，把你的图片格式转换为“JPEG”格式，这种格式是非常便捷且可用性极强的 预加载处理 的一种方式。
2.换一个服务器。。。

当然，并不是所有导致网速慢的原因都是图片（这个锅，，，有点大）
当一个页面静态资源太多时，同样会导致页面卡顿等一系列问题的产生
静态资源有哪些？
1.js文件
2.css文件
3.图片文件
4.字体文件（我说过：像淘宝，为了防止图片的加载导致用户体验变差，很多看着像是图片的地方其实都是用的“字符集”）
5.模板文件

当然，一些前端开发者可能还会想到第三种方法：用js隔离优化。
我们都知道，js可能会拖慢HTML加载速度，为此，我们想到了window.onload=function(){};
但在大型网站中，（假设有上百张图），页面加载完之前js特效不会显示，这样页面就会像“死了”一样完全静态。。。

为此我们又改进了：将js代码放在jQuery中：$(document).ready(function(){});
如下：可以自己试一下：

其实关于这个，还是有些说道的：

1. $(document).ready(function(){...});类似于window.onload=function(){}，但有些区别，它其实更像：window.addEventListener('DOMContentLoaded',function(){},false);——文档加载完就执行（不管图片了）
2. 它其实可以简写为：$(function(){...});

关于更多页面性能优化的实践，在本专栏都有涉猎。

OK，下面把我所做网站贴出：
南阳理工·优C社团官网

欢迎来访！