感悟
终于完成了这一项目，感觉。。。
又激动又刺激
将我的实战经验分享给大家：
先说说页面中的图片吧，
学前端的都知道的，图片的导入有两种方式：一是在HTML中用img格式；二是在css中用background属性。
可是问题来了，在css中导入时有时会引起某个属性值显示不出来，这就很尴尬了，你想对一个图片既旋转又拉伸，结果。。。
如下示例：
（HTML）
<div class="bb4">
<img src="img/QQ图片20190508133039.jpg" width="100" height="110">
</div>
（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(){}); 如下：可以自己试一下：
<div id="showMsg"></div>
<div>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>
<script>
var d=document;
var msgBox=d.getElementById("showMsg");
var imgs=d.getElementsByTagName("img");
var time1=null,time2=null;
myReady(function () {
msgBox.innerHTML += "dom已加载！<br>";
time1=new Date().getTime();
msgBox.innerHTML += "时间戳："+time1+"<br>";
});
window.onload=function () {
msgBox.innerHTML += "onload已加载！<br>";
time2=new Date().getTime();
msgBox.innerHTML += "时间戳："+time2+"<br>";
msgBox.innerHTML += "domReady比onload快："+(time2-time1)+"ms<br>";
};
</script>
其实关于这个，还是有些说道的：
-
$(document).ready(function(){...});类似于window.onload=function(){}，但有些区别，它其实更像：window.addEventListener('DOMContentLoaded',function(){},false);——文档加载完就执行（不管图片了） - 它其实可以简写为：
$(function(){...});
关于更多页面性能优化的实践，在本专栏都有涉猎。