构建过程中可能会产生的阻塞 html的代码，是从上到下一行行执行的，也就是说如果js代码写在head头里，且没有用加在window.onload方法里，那么他是无法读取到body里的标签的。...脚本加载不阻塞页面的解析，脚本在获取完后并不立即执行，而是等到DOM树加载完毕执行。...元素； 元素位置改变——display、float、position、overflow等等； 元素尺寸改变——边距、填充、边框、宽度和高度 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变...DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。...DOM的作用 DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。
Ajax它是一种异步通信的方法，通过直接由 js 脚本向服务器发起 http 通信，然后根据服务器返回的数据，更新网页的相应部分，而不用刷新整个页面的一种方法。...，然后使用 replace() 方法将字符串中所有的[ 或 ] 替换成空字符，从而达到扁平化处理，此时的结果为 arr 不包含 [] 的字符串。...LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。替换元素的概念及计算规则通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。...a，虽然 Foo 中有优先级更高的属性方法 a，但 Foo 此时没有被调用，所以此时输出 Foo 的静态方法 a 的结果：4let obj = new Foo(); 使用了 new 方法调用了函数，返回了函数实例对象...，不转译node_moudules中的js文件 其次在缓存当前转译的js文件，设置loader: 'babel-loader?
二、js基础： 1、js代码的位置： 在html，通过下面的标签编写js： // js编写区 不过不建议将..._self和_top，_self表示在当前窗口打开新页面，_top表示在框架网页中在上部窗口中显示目标网页；第三个参数字符串可以设置如下内容： 参数 值 说明 top Number 窗口顶部离开屏幕顶部的像素数...image.png 常用的一些方法在本文js基础部分已经讲过，这里不再赘述。...DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树），如下图： ?...重点要理解DOM以及对DOM的一些操作。由于本人学后端的，所以DOM部分对节点操作的很多方法没有进行研究，不过这些方法都很易懂，需要用时自行百度即可。
但是在使用内部样式表的时候，style标签和script标签一样，可以放置在html文件中的anywhere，任何地方。 4.JavaScript如何获取html元素的宽度和高度？...能拿到宽度，也可以使用第一种方法。...二、offsetTop 只读，而 style.top 可读写。 三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。...实测，在Chrome中有效果，在IE9以及Fire Fox中没有效果。 8.js（JavaScript）中单引号和双引号有什么区别？ 一个Web大神告诉我说没什么区别，我实验了，还没发现有什么区别？...： （1）js单引号和双引号基本上没有区别，只是在同时使用的时候，有些细节要注意上面的细节； （2）js中支持字符串中包含变量，即”+var+”这种运算。
·行内元素 和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列； 高度、宽度是不可控的，设置无效，由内容决定。 根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。...重绘与回流 在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒模型的位置、大小及其他属性后...DOM的变化 适用场景： 第一种：有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是created与mounted函数执行时一般dom并没有渲染完毕，所以就会出现获取不到...那么在直接js操作dom的过程中,比方说一个循环10次插入dom元素,其实每一次都会经历上面的过程..经历大量的重绘回流.代价特别大.性能低下.所以出现了虚拟dom 48. diff算法 diff 算法是一种通过同层的树节点进行比较的高效算法...，得到一个新值，应用到视图中，和methods本质区别是computed是可缓存的，也就是说computed中的依赖项没有变化，则computed中的值就不会重新计算，而methods中的函数是没有缓存的
document.ready是 dom 树创建完成就执行的方法，原生中没有这个方法，jquery中有 $().ready(function) 16.”==”和“===”的不同 ==会自动转换类型,再判断是否相等...defer和async 动态创建 DOM 方式（创建script，插入到 DOM 中，加载完毕后callBack） 按需异步载入js 29.Flash、Ajax各自的优缺点，在使用中如何取舍？...共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM 30.不使用循环，创建一个长度为100的数组，并且每个元素的值等于它的小标。...(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象 42.js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？...不包含滚动条宽度 46.节点的种类有几种，分别是什么？
forEach：只能遍历数组使用，不能用作其他也能迭代对象 3、for…in：是唯一一个可以迭代对象的一种语法结构，当然，也可以迭代数组、字符串 map： 创建一个新数组，新数组的结果是原数组中的每个元素都调用一次提供的函数后的返回值...原理：diff算法 1.vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素只操作数据，就可以重新渲染页面，而隐藏在背后的原理是高效的Diff算法 2.当页面数据发生变化时，Diff算法只会比较同一层级的节点...枚举：用于取值被限定在一定范围内的场景 Mixin：可以接受任意类型的值 泛型编程：写代码时使用一些以后才指定的类型 名字空间：名字只在该区域内有效，其他区域可重复使用该名字而不冲突 元组：元组合并了不同类型的对象...: 0px（或者不设置）； 方法二：float+margin， 左侧元素float:left;给一个固定宽度,右侧元素margin-left: 左侧元素的宽度； 方法三：float+float，左侧元素...且给一个固定宽度，右侧元素display: table-cell，不设置宽度即可； 方法五：absolute+margin, 左侧元素设置一个绝对定位定位在左侧且给一个固定宽度， 右侧元素，充满空间且给一个
全局函数isNaN可以判断一个变量的值是否为数字。 可以使用运算符type、instanceof判断变量值的数据类型。 6、什么是Bom什么是Dom?你如何理解Dom?...①创建XMLHttpRequest对象，注意兼容IE6的情况 ②使用XMLHttpRequest对象的open方法，其中有三个参数： a.字符串，代表html的请求:GET,POST。...如果没有数据，可以不传或者传递null；如果post请求传递数据：首先设置xhr的请求头信息： 再传递参数： 3、解释XMLHttpRequest是什么？...这些特性使JSON成为理想的数据交换语言。 所以它往往在AJAX中替代XML，交换数据。 6、你的项目中有使用到跨域吗？你在项目中是如何处理JS跨域问题的？ ①有。...没有用到，但我知道html的websockets、flash的socket、ajax长轮询等都可以实现。 8、你在AJAX中有遇到乱码吗？如果遇到，你是如何解决的？ ①遇到过。
总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列 宽度缺少时是它的容器的100%，除非设置一个宽度 高度、行高以及外边距和内边距都是可以设置的 块级元素可以容纳其它行级元素和块级元素 行内元素...使用场景：若该 JS 资源与 DOM 元素没有依赖关系，也不会产生其他资源所需要的数据时，可以使用async 模式，比如埋点统计、广告等。...不同的对象类型调用toString方法时，根据原型链的知识，调用的是对应的重写之后的toString方法（function类型返回内容为函数体的字符串，Array类型返回元素组成的字符串…），而不会去调用...正确地管理组件状态当渲染动态列表时，使用相同的组件而不设置 key，可能导致状态被错误复用。 设置 key 可以确保组件在切换时重新创建，从而避免状态混淆。...，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面 父组件在使用的时候，直接在子组件的标签内写入内容即可 子组件Child.vue 插槽后备的内容 父组件
Ø Boolean对象描述 在 js中，布尔值是一种基本的数据类型。...否则设置为 true（即使 value 参数是字符串 "false"）。 2．Number Ø Number对象描述 在 js中，数字是一种基本的数据类型。...Ø String 对象描述 字符串是 js的一种基本的数据类型。...HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。...XML DOM与HTML DOM的关系 XML DOM 定义了访问和处理 XML 文档的标准方法 HTML文档格式 符合XML语法标准，所以可以使用XML DOM API 在XML DOM每个元素 都会被解析为一个节点
对于没有任何依赖的 JS 文件可以加上 async 属性，表示 JS 文件下载和解析不会阻塞渲染。...例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行...以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度；而如果有一把尺子来实际测量这部手机的物理像素...如果在操作 DOM 时涉及到元素、样式的修改，就会引起渲染引擎重新计算样式生成 CSSOM 树，同时还有可能触发对元素的重新排布和重新绘制可能会影响到其他元素排布的操作就会引起重排，继而引发重绘修改元素边距...如果采用字符串拼接的形式，先将 1 万个 div 元素的 html 字符串拼接成一个完整字符串，然后赋值给 body 元素的 innerHTML 属性就可以明显减少耗时const times = 10000
子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。 7、Vue.js内置的指令，用什么开头？ v-开头的 8、CSS隐藏元素的几种方法？...js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）。...77、http协议 例如：http://www.abc.com:8080 http 协议 www.abc.com 域名 8080 端口 78、字符串插值 79、字符串常用方法 slice方法返回字符串的片段...DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性 82、js 定时器有以下两个方法： setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。...盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
在函数内部没有使用var定义的=变量则为全局变量， *在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。 ...js函数定义的参数没有默认值（目前只有最新的火狐浏览器支持） JavaScript 系统中常用的内置函数 escape() //字串编码 unescape() //字串反编码...*eval(string) -- 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 ...DOM 基本概念 HTML DOM 定义了访问和操作HTML文档的标准方法。 ...HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
ECMA : 欧洲计算机协会 有ECMA组织制定的js的语法，语句….. (2) BOM broswer object model: 浏览器对象模型 (3) DOM document object model...而强弱类型定义的区别就是在开辟变量存储空间的时候，是否定义空间将来存储的数据类型 Javascript 中定义变量均使用关键字 var 原始类型 代码表示 string：字符串 var str = "...("参数列表"，方法体和返回值) (7) 全局变量和局部变量 全局变量：在script标签里面定义一个变量 这个变量在页面中js部分都可以使用 在方法外部使用，在方法内部使用，在另外一个script标签使用...，这个时候把数组当做一个整体字符串添加进去 pop()：表示 删除最后一个元素，返回删除的那个元素 reverse(): 颠倒数组中的元素的顺序 (3) Date对象 在java里面获取当前时间...可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作 想要对标记型文档进行操作，首先需要 对标记型文档里面的所有内容封装成对象 -- 需要把html
src引入 （在外链式中，script脚本块中间不可以写js代码，写了也不执行） 为什么先加载css，后加载js？...在js中定义一个变量非常简单： var name=’张三’; 定义一个变量name，把字符串张三赋给这个变量 。 Js中的变量是松散类型的：通过var变量名就可以存储任何数据类型。...，在ie6~8下不兼容 indexOf()、lastIndexOf() (字符串中也有这两个方法,字符串中的这两个方法兼容所有的浏览器，而数组的这两个方法是不兼容的) indexOf()、...（了解） 思考：实现1-100之间求和（用递归的方法实现） DOM DOM：document object model 文档对象模型 在DOM中提供了很多获取元素的方法和之间的关系属性以及操作这些元素的方法...兼容所有浏览器的获取当前屏幕的宽度 var curWidth=document.documentElement.clientWidth||document.body.clientWidth; 在移动端获取元素的常用方法
（mounted），你都可以通过 react-dom 提供的 findDOMNode() 方法拿到组件对应的 DOM 元素 另外一种方式就是通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称...，然后通过 this.refs.name 来访问对应的 DOM 元素 JSX React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化...JSX 是可选的 可以直接用 React 提供的这些 DOM 构建方法来写模板 在 JSX 里使用注释也很简单，就是沿用 JavaScript，唯一要注意的是在一个组件的子元素位置使用注释要...这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。 Data Flow “单向数据绑定”是 React 推崇的一种应用架构的方式。...我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom
常见的类数组对象有 arguments 和 DOM 方法的返回结果，还有一个函数也可以被看作是类数组对象，因为它含有 length 属性值，代表可接收的参数个数。...清除浮动的方式 浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...当从后端接收到 JSON 格式的字符串时，可以通过这个方法来将其解析为一个 js 数据结构，以此来进行数据的访问。 iframe 有那些优点和缺点？...在客户端和服务器两端建立“字典”，用索引号表示重复的字符串，采用哈夫曼编码来压缩整数和字符串，可以达到50%~90%的高压缩率。...在BFC中上下相邻的两个容器的margin会重叠 计算BFC的高度时，需要计算浮动元素的高度 BFC区域不会与浮动的容器发生重叠 BFC是独立的容器，容器内部元素不会影响外部元素 每个元素的左margin
1、 property是DOM中的属性，是JavaScript里的对象；而attribute是HTML标签上的特性，它的值只能够是字符串； 2、DOM对象初始化时会在创建默认的基本property；只有在...中； 4、propety是对象，而attribute的值都是字符串； 5、最关键的两句话： attribute（特性），是我们赋予某个事物的特质或对象。...calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。...margin-top，margin-bottom的bug 父元素的第一个子元素设置了margin-top,会作用于父元素（值为父元素的margin-top与该margin-top两者中的最大值)，而子元素和父元素的边距则没有发生变化...rem是一个相对单位，是相对于根节点的font-size的比例。我们还会引用一个外部的js，这个js可以通过屏幕宽度动态计算根节点的font-size值。
, 相对根节点html的字体大小来计算 vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单 4.CSS 垂直居中有哪些实现方式？...先说下结论： css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行 为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法...在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。...具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
前言 在React中针对DOM操作的最常见方法是使用refs来访问DOM节点，其实还有一种方法，就是使用useLayoutEffect来访问DOM节点，根据实际 DOM 测量（例如元素的大小或位置）来更改元素...❝当强制执行布局时，浏览器会暂停JS主线程，尽管调用栈不是空的。 ❞ 有很多我们耳熟能详的操作，都会触发强制布局。 其中有我们很熟悉的getBoundingClientRect(),下文中会有涉及。...要想实现响应式，我们需要计算「可用空间」中可以容纳多少个项目。为此，我们需要知道容器的宽度以及每个项目的尺寸。...，但是主要的逻辑就是实现在响应式的组件，并且能够在屏幕大小发生变化时重新计算宽度。...因此，任何涉及计算元素实际大小的操作（就像我们在 useLayoutEffect 中做的那样）在服务器上将不起作用：只有字符串，而没有具有尺寸的元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
