你没有return啊

if(i == s){
   i = 0;
   //执行完这一段后跳出了if
   p.style.background = '#000';
}
//又执行了这一段代码，所以又变成了红色
p.style.background = '#f00';

应该改成

if(i == s){
   i = 0;
   return p.style.background = '#000';
}
p.style.background = '#f00';

不是最后还有一句p.style.background = '#f00';么，你if里只是用了alert中断，但是并没有return跳出去啊，所以还是会继续向后执行的。

建议在i++前边加一句debugger然后单步跟一下吧。

       if(i == s){
            i = 0;
            p.style.background = '#000';
            alert("alert阻断,p变色了,为什么控制台没有变化,仍然是红色?");
        }else{
            p.style.background = '#f00';
        }

楼主，你的判断只有if，没有else，所以就算前面的背景颜色修改了，也会一直默认为红色，像楼上那样子改了之后就可以了

LZ不要纠结控制台的问题了，不同的浏览器可能会有不同的渲染优化方法。

比如说我在chrome上测的，连颜色都不会改变：

在firefox上面，颜色会变，值只会变一个：

所以其实这个浏览器的渲染机制有关，和代码无关。。。

你要是想知道的话，考虑研究一下chrome渲染的机制是什么吧。。。

你的这个写法应该是这样的吧

var p = document.querySelector('.p');
    var i = 0;
    var s = 3;
    p.onclick = function(){
        i++;
        if(i == s){
            i = 0;
            p.style.background = '#000';
            console.log(i)
            // alert("alert阻断,p变色了,为什么控制台没有变化,仍然是红色?");
        }else{
            p.style.background = '#f00';
        }
    };