用户对App或者web的响应速度决定是否留下访问的各种大数据已经很多,这里就不说性能的重要性了.
1.要从哪开始思考这个问题呢?
2.深入浅出问题的根本
3.再结合STAR法则回答该问题
1.我个人是从IP协议、TCP协议、DNS服务、各协议在使用HTTP协议通信的过程开始思考这个问题的。直接上图
来自《图解HTTP》
那么我们可以理解为发送端从低到高封装，接收端从高到低解封。直接上图
来自《图解HTTP》
那么知道了HTTP协议要经过这么多步骤，才能把一个请求发送到服务器，再经过这么多步骤响应回来我们的浏览器。再不说还有HTTPS了，步骤更为复杂，耗时更长，响应要比HTTP慢两到三倍！
那么优化的方法有很多，首先要从代码规范开始
（1）避免javascript操作DOM
大家都会想到这点，那么一定要操作的话，如何去降低成本的操作DOM呢？
（1.1）不要频繁的用js修改元素的样式，那么当修改多条样式的时候可以直接编写一个class，为需要操作的元素添加class即可！
element.style.background="...";x
element.style.border="...";x
element.style.color="...";x
element.className="...";//使用jQuery
（1.2）缓存操作结果，避免重复计算。从页面获取一个元素是很累的，计算宽高之类的操作也是很繁重的，还有取length，ajax的响应也都统统缓存起来，讲一个最经典的demo——Fibonacci
我们都知道Fibonacci是要不断的重复计算的，那么我们就可以把每次计算的结果缓存到数组里面，下次计算直接取，这样就方便高效很多了
var Fibonacci=function(){
cache=[0,1];
return function(n){
if (n<2) {
return n;
}
var temp=Fibonacci(n-1)+Fibonacci(n-2);
cache[n]=temp;
return temp;
}
}();
（1.3）可以使用worker！进行巨量计算。之前文章提过worker
（1.4）使用documentFragment进行频繁操作，操作完再一次添加到页面
document.createDocumentFragment
（1.5）如果要对页面元素频繁操作的时候，为了避免不必要的重绘和重排可以先将元素display:none;再进行频繁的操作，操作完了再把元素显示回页面，那么久可以缩小到两次的重绘或者重排
（2）使用懒加载：触发条件后动态添加img的src，可以有效加快首屏的响应速度
（3）使用图片服务器
（4）布置CDN，
（5）整合压缩代码，减少请求，减少请求体积
。。。等等等等，想起来再写了
那么遵循STAR法则回答问题比如：
场景：我们的网站有很多很多的图片，加载很慢
方案：使用了懒加载与图片服务器的优化方案
结果：使用前加载首屏需要一个小时，优化后只用0.035ms
后续更新修改
网友评论