美文网首页
前端知识体系学习~浏览器

前端知识体系学习~浏览器

作者: WEB前端含光 | 来源:发表于2020-09-01 12:07 被阅读0次

    常见的浏览器内核

    1.webkit内核(v8引擎)
    谷歌chrome
    Safari
    opera >=v14
    国产浏览器
    手机浏览器
    ....
    2.Gecko
    火狐FireFox
    3.presto
    Opera <v14
    4.Trident
    IE
    IE EDGE 开始使用双内核(其中包含chrome迷你)

    谷歌浏览器的控制台(f12/fn+f12)

    Elements:查看结构样式,可以修改这些内容
    Console:查看输出结果和报错信息,是js调试的利器
    Source:查看项目源码
    NetWork:查看当前网站所有资源的请求信息(包括和服务器传输的HTTP报文信息)、加载时间(根据加载时间进行项目优化)
    Application:查看当前网站的数据存储和资源文件(可以盗图,在此处可以做音视频防盗)
    浏览器常用的输出方式

    在控制台输出

    console.log/dir/table....在控制台输出
    console也是一个【内置对象】,其中提供了好多方法
    log:正常输出
    dir: 输出一个对象的详细键值对信息
    table:把一个多维JSON数组在控制台按照表格的方式呈现出来

    //如
        [12,13]//一维数组
        [12,[12]]//二维数组
        [12,[{xxx:xxx}]]//三维数组
        //二维及以上都称为多维数组
    复制代码
    

    多维对象:几维对象就看对象当中嵌套了几级

    //如
                            {name:xxx}//一维对象
                            {name:xxx,[12,23]}//二维对象
                            {name:{name:{name:function(){}}},[12,13]}//三维对象
                            //二维及以上都称为多维对象
    复制代码
    
    let a = 10;
                let b = [{id:1,name:'张三'},{id:2,name:'李四'}];
                //1. console.log/dir/table....在控制台输出
                    console.log(a);//数字类型10
                    console.dir(a);//字符串类型10
                    console.table(a);//
    复制代码
    

    在浏览器弹窗

    alert/confirm/prompt
    弹窗的三种方式输出的结果都必然经过toString转换为字符串

    alert(1);//=>'1'
    复制代码
    
    + 弹窗的三种方式会阻断JS代码的执行,只有当窗口关掉,JS才会继续执行
             
    复制代码
    
    for(let i = 1;i<=5;i++){
                        alert(i);
                        console.log('哈哈');
                      }  
                
    复制代码
    
    + confirm:确定和取消【选择型弹窗】
              
    复制代码
    
    confirm('确定干啥嘛?');
    复制代码
    
    + prompt:确定和取消【选择型弹窗】不同的是多出一个文本框
    复制代码
    
    prompt('确定干啥嘛?写出原因');
                     
    复制代码
    

    document.write【没人用了】

    输出的结果是字符串,写入并覆盖掉页面的全部内容,

    Script标签的位置

    一般把script标签放在body的末尾位置,因为js一般是用来操作结构的,如果结构没加载出来,js无法执行就获取不到,所以一般涉及到操作结构的,都建议放在body末尾
    但是,也可以放在前面
    不涉及操作结构
    利用window.onload=function(){//把js代码放在这里}【利用事件,当页面中的结构和内容都加载完成,才执行这里的代码】
    jQuery中也有一个对应的方法,$(document).reday(function(){}),【和window.onload的区别是:reday是当dom结构加载完成就可以执行,而onload是所有的dom结构以及内容都加载完成才能执行,所以reday一定比window.onload早先触发,而且reday在页面中可以用多次,而window.onload只能用一次【原因是一个是dom零级事件绑定,另一个是dom二级事件绑定】】

    代码调试

    在代码前加debugger;在执行时会进入debug模式,通过加断点来运行程序
    f10 逐过程,
    f11 逐语句执行,一行行代码执行

    在浏览器控制台中打印引用数据类型的结果

    若是访问引用数据类型,得出并打印某引用数据类型的结果。
    则在展开这个结果之前,略所方式查看的是当时的结果
    而一旦展开这个结果,永远展示的是堆中最新的数据

    后话

    如果你现在也想学习前端开发技术,在学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以加入到我的Q群中:前114中6649后671,里面有许多前端学习资料以及2020大厂面试真题 点赞、评论、转发 即可免费获取,希望能够对你们有所帮助。


    相关文章

      网友评论

          本文标题:前端知识体系学习~浏览器

          本文链接:https://www.haomeiwen.com/subject/gbfvsktx.html