首页 > 其他分享 >页面渲染原理以及异常

页面渲染原理以及异常

时间:2023-04-22 13:04:31浏览次数:44  
标签:function load console log 渲染 333 addEventListener 原理 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!--
    解析HTML : JS放在html结构下方,css放入html上方,避免解决样式未加载出来
    生成Dom树:
        DOMContentLoaded = Dom树完全生成,就会触发
        load  = 等所有资源加载完毕生成
    生成渲染树:浏览器一遍计算样式规则,一边生成Dom树
    布局layout/重排reflow:根据窗口大小,盒子宽高等需要重新计算,称为重排
    重绘repaint:一边重排一边生成对应图形绘制到页面。凡是不会影响盒子宽高等,仅会导致repaint

    报错:
    TypeError = 类型错误,去读取一个undefined属性 var a; a.toString()
    ReferenceError = 未定义变量 var a;
    SyntaxError = 语法错误 fosssr(vwwwwasssr i = 0 ; i < 10 ;i++)
    每一个对象都是一个对象,都是构造函数造的   
    当满足以下条件,才可以抛出异常
    1.知道哪里会报错,知道异常后做什么(一般用于场景,网络中断情况)
    手动抛出错误:
    throw new TypeError('必须等于number,否则给错')
    规范:如果抛出错误,在函数文档中阐述清楚

     -->
</head>
<body>
    <h1>你好</h1>
    <script>
        addEventListener("DOMContentLoaded",function(){
            console.log('333')
        })
     addEventListener("load",function(){
        console.log('222')
     })
    </script>
</body>
</html>

标签:function,load,console,log,渲染,333,addEventListener,原理,页面
From: https://blog.51cto.com/u_15722979/6215242

相关文章

  • win10 锁屏页面获取
    因为觉得win10锁屏页面比较好看,有时候能够根据日期变换,因此写个脚本获取锁屏页面封面《冬天的谎言-SnowWorldEnd-》win10原生锁屏根据查阅资料,win10的锁屏图片保存在 C:\Users\你的用户名\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txy......
  • 微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序
    目录H5微信小程序测试代码文档页面生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle组件生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle经测试,得出结论:H5和微信小程序的生命周期函数调用顺序不一致H5pagebeforeCreatepag......
  • 步骤条的接口渲染
     难点: 这些固定的文字渲染首先创建一个数组数组里装的是需要的四个文字 <el-steps:active="stepsData.identifying"align-center><el-stepv-for="(item,index)instepsData.convertRecords":key=&qu......
  • 05-目录-计算机基础(组成原理、微机原理、汇编、操作系统、网络)
    :链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接:链接12:链接13:链接14:链接15:链接16:链接17:链接18:链接19:链接20:链接:链接:链接:链接:链接:......
  • 《花雕学AI》26:多维度了解ChatGPT思维链提示的原理、方法、使用和发展的22个问题
    早上5点起床,没有去打羽毛球,打开电脑,漫无边际的浏览,偶然发现了一个提法:ChatGPT思维链提示。于是,我使用与ChatGPT同源技术的新Bing引擎(GPT-4),来进行搜索与了解相关情况。这里尝试连环提问的穷追猛打的暴力套路,呵呵,不到黄河不死心,我的22个问题是:1、什么是ChatGPT的思维链提示?请给我一......
  • Redis布隆过滤器的原理和应用场景,解决缓存穿透
    大家好,我是哪吒。一、布隆过滤器BloomFilter是什么布隆过滤器BloomFilter是一种专门用来解决去重问题的高级数据结果。实质就是一个大型位数组和几个不同的无偏hash函数,无偏表示分布均匀。由一个初值为零的bit数组和多个哈希函数组成,用来判断某个数据是否存在,它和HyperLogLog一样,不......
  • 数据对比DataCompare系统设计原理
    1背景介绍在日常数据研发工作中,我们会遇到如下常见场景问题,其一为:数据测试人员要对产出多表的一致性进行检测,其二为:数据对账体系,如资金流和订单数据要保持一致,其三为:数据模型迁移过程中,要对迁移前后的数据进行对比,其四为:数据存储在不同库中,例如A存储到ODPS,B存储到ADB,其中AB库中数据......
  • React+hook+ts+ant design封装一个具有编辑和新增功能的页面
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣需求分析在前端项目中最常......
  • 从原理聊JVM(一):染色标记和垃圾回收算法
    作者:京东科技 康志兴1JVM运行时内存划分1.1运行时数据区域•方法区属于共享内存区域,存储已被虚拟机加载的类信息、常量、静态变量、即时编译器编译后的代码等数据。运行时常量池,属于方法区的一部分,用于存放编译期生成的各种字面量和符号引用。JDK1.8之前,Hotspot虚拟机对方法区......
  • threejs_动态heatmap渲染
    heatmap>heatmap2d.tsimport{Mesh,Texture,MeshBasicMaterial,PlaneGeometry,Box3,Vector3,}from'three';importBasefrom'../Base';importHeatMap,{DataPoint}from'heatmap-ts';import{log}from......