一、为什么要优化移动端
- 提升用户体验
- 移动端网络速度慢
- 移动端设备性能低
二、性能优化策略分类
1. 网页资源请求与加载类
2. 网页渲染类
3.js脚本类
三、访问网站的过程
- 输入网站的域名,不可能直接就直接访问到服务器,要寻找他的IP地址,只有找到IP地址才能直到服务器,IP地址和域名有一个映射关系
- 通过DNS解析找到目标服务器
- 找到目标服务器之后,浏览器端和服务器之间建立连接,服务器会收到浏览器端发出的请求,
- 将响应数据发送到用户浏览器
- 浏览器处理从服务器端发来的响应数据,完成网页的渲染呈现
四、事件优化
1.事件委托
绑定事件不用每一次遍历所有节点,分别绑定,利用事件委托直接绑定,既方便而且性能也会提高
sliderIndicatorContainer.addEventListener('click',function(){
if(ev.target && /(^|\s).slider\-indicator($|\s)(ev.target.className)){
console.log('click');
}
},false)
2.事件节流
针对执行很频繁的事件,让他们在一定的时间执行少一点
利用定时器
var timer = null;
window.addEventListener('scroll',function(){
clearTimeout(timer);
timer = setTimeout(() => {
console.log('scroll');
}, 100);
},false)
五、资源的按需加载和预加载
var lazyLoadClass = '.lazyload-img';
var imgArr = Array.prototype.slice.call(document.querySelectAll(lazyLoadClass));//将类数组转换为数组
lazyLoadImgs();
var timer = null;
window.addEventListener('scroll',function(){
clearTimeout(timer);
timer = setTimeout(function(){
lazyLoadImgs();
},100);
},false)
function lazyLoadImgs(){
for(var i=0;i<imgArr.length;i++){
if(isInVisibleArea(imgArr[i])){
imgArr[i].src = imgArr[i].getAttribute('data-src');
imgArr[i].splice(i,1);
i--;
}
}
}
function isInVisibleArea(){
var rect = el.getBoundingClientRect();
return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left<window.innerWidth;
}
智图——压缩图片
webP更高压缩比格式的图片