JS中的浏览器加载原理和流程控制

浏览器加载原理

1、浏览器按照从上到下的顺序下载HTML文档，一边下载一边加载到内存，不是全部下载后再全部加载到内存。另外DOM树结构的绘制优先于关联元素 的加载，比如图片
2、通常来说，浏览器执行JavaScript脚本有两大特性：
①载入后马上执行。
②执行时会阻塞页面后续内容（包括页面的渲染、其它资源的下载）载入后马上执行 document.getElementById(“but1”).οnclick=function(){ alert(“DOM树”);

特殊案例:
script
ddd(); //这样的调用方式正常，但是如果将函数定义在其他script标签中，则不能正常调用function ddd(){
alert(“小张说：‘我爱小王!’”);
/script
阻塞后续执行
alert(‘dddd’);如果不点击确认按钮，则后续的代码不执行

3、浏览器加载HTML文档时如果遇到script标签就会停止后面元素的加载， 先对JavaScript脚本文件进行解析和执行

流程控制

流程控制：就是程序代码执行顺序，通过规定的语句让程序代码有条件的按照一定的方式执行

按照结构编程的原理，任何程序都是由顺序结构、选择结构和循环结构三种结构组成

分支选择

if–else if—else

• var kk=接收一个数据;
  if(kk==3)
  输出一个数据;
  else
  输出另外的数据;

<input id="in1" /><span id="sp1"></span><br />
    <input type="button" onclick="ff()" />
    <script>
        function ff() {
            var kk = document.getElementById("in1").value;
            var ss = "";
            if (kk == '')
                ss = "请输入数据";
            else {
                try {
                    var re = /^\d*$/;
                    if (!re.test(kk))
                        throw new Error("格式错误!");
                    ss = parseInt(kk);
                    ss = "您输入的数据为:" + kk;
                } catch (error) {
                    ss = "请输入合法的整数";
                }
            }
            document.getElementById("sp1").innerHTML = ss;
        }
    </script>

语法结构：
switch(expression){
case condition1:
break;
default:
语句n;
}

swith工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用break 来阻止代码自动地向下一个 case 运行

<input id="in2"><span id="sp2"></span>
    <input type="button" onclick="ff2()" />
    <script>
        function ff2() {
            let in2 = document.getElementById("in2").value;
            let kk = Math.round(in2 / 10);
            var ss = "";
            //不考虑具体逻辑
            switch (kk) {
                case 10:
                    ss = "满分";
                    break;
                case 9:
                case 8:
                    ss = "良好";
                    break;
                case 7:
                case 6:
                    ss = "及格";
                    break;
                default:
                    ss = "不及格"
            }
            document.getElementById("sp2").innerHTML = ss;
        }
    </script>

do/while循环

do{

}while(expression);

for循环

for(初始化语句; 条件判断语句; 步长长度值){
}

break和continue

continue用于终止本次循环，接着开始下一次循环。
break用于完全终止循环，开始执行循环后续的代码