-向一个父节点中添加一个子节点 整合上面操作的小案例 父节点.insertBefore(新节点，旧节点): 在指定子节点前插入新的子节点 父节点.replaceChild(新节点，旧节点)： 使用指定的子节点替换已有的子节点...时，表明垂直滚动条滚动到底了 阅读知情同意书的小案例 onmousemove事件和事件对象 获取鼠标的坐标 页面滚动条的归属者 解决浏览器兼容性常使用以下写法 div跟随鼠标移动 事件的冒泡和事件对象event...JS修改元素样式的一些思考 JSON JSON字符串转化为JS对象 JS对象转换为JSON字符串 eval函数 ---- window.onload:事件 浏览器加载一个页面时，是按照自上而下的顺序加载的...，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载 window.onload事件会在整个页面加载完成之后，才会触发，将对应的script代码，写在里面，可以确保...script代码可以在页面加载完成之后，才会执行 <!
center: 弹性盒子元素将向行中间位置对齐 space-around: 弹性盒子元素会平均地分布在行里 space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的...space-around：第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 stretch：拉伸，不设置高度的情况下。...360浏览器 fullpage的使用 fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。...fullpage是jquery插件 引入fullpage的js文件 页面结构 编写js代码 <!...,diretion) 当我们离开一个section时，会触发这个函数，index是离开的页面的序号，从1开始计算。
下图是两者官方示例的简单对比： 本文就是介绍如何使用 mCustomScrollbar 这个插件，大部分的内容是翻译自 mCustomScrollbar 官方的介绍页面，但是根据自己的理解做了部分的调整和修改...总之，你知道非常好用就是了，:-) 下载 | 演示 如何使用 mCustomScrollbar mCustomScrollbar 这个插件的下载包里面包含了所有的插件文件和一些例子。...其中以下的四个文件时必须要上传到服务器上： jquery.mCustomScrollbar.js jquery.mousewheel.min.js jquery.mCustomScrollbar.css...我还用了window load ((window).load()) 来激活我的插件功能，因为这样，就可以保证在页面对象全部加载完成之后，加载我的插件。...");：滚动到内容区域中的最后一个对象位置 $(selector).mCustomScrollbar("scrollTo",Integer);：滚动到某个位置（像素单位） scrollTo 方法还有两个额外的选项参数
在此之前，我们先聊聊在非微前端时，页面加载是怎么操作的： 通常前端页面应用打包结果的入口就是一段 标签加载 js 文件，执行后往某一个 dom 节点下挂载内容，类似如下 ... 当在页面访问不同路由 (url) 时，原本打包的 js 内部会去异步加载对应路由、组件的 chunk js，拿到代码后再去渲染这个路由下的内容 / 组件； 以 webpack...如何选择不同版本 上线 / 回滚 / 灰度？ 如何查看现在所有子应用的列表？ 多个版本之间切换如何集成联调？ ....../ 替换 这一部分业界的方案和演进比较多，下一章会展开讲讲 异常处理 - 以上所有东西在报错时的统一处理，比如加载失败、或者路由匹配失败 沙箱隔离 通常在多个应用间，需要做隔离的就两个部分， JS &...，实际上这也并没有形成“隔离”，只是防止多个子应用互相“污染”；限制也非常多： 父子子应用不能共存，一个 url 路由下整个页面都是某一子应用 多个子应用之间不能共存，因为全局 window 只有一个，
2、加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载。...1、在css样式表中书写时，id选择符前缀应加"#“，class选择符前缀应加”." 2、id属性在一个页面中书写时只能使用一次，而class可以反复使用 3、id作为元素标签用于区分不同结构和内容...1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了 2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。...3.js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。...另一方面可以节省加载时间，使页面能够更加的加载，提高用户的良好体验 但是随着JS技术的发展，JS也开始承担页面渲染的工作。
firstElementChild 返回指定元素的第一个子元素节点 lastElementChild 返回指定元素的最后一个子元素节点 3....> 答案：parentNode 观察元素结构可知，div元素为span元素的父级的父级，使用parentNode即可返回指定节点的父节点，父级的父级即为 .parentNode.parentNode...’：元素自身的前面 ‘afterbegin’：插入元素内部的第一个子节点之前 ‘beforeend’：插入元素内部的最后一个子节点之后 ‘afterend’：元素自身的后面 3....七、窗口事件 常用鼠标事件： 名称 描述 load 当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件 beforeunload window、document 和它们的资源即将卸载时触发...写在了h1元素上方，所以需要等待页面加载完成才能获取到此元素，此处需使用页面加载完成时触发的事件。
使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动 背景 滚动边界和滚动链接 滚动是与页面交互的最基本的方式之一，但是由于浏览器的诡异默认行为...作为一个例子，带一个应用程序抽屉带有大量用户可能需要滚动的项目。当它们到达底部时，溢出容器将停止滚动，因为没有更多内容可供使用。换句话说，用户到达“滚动边界”。...最好的部分是，使用overscroll行为不会对页面性能产生负面影响 该属性有三个可能的值 auto - 默认,源于元素的滚动可能会传播给祖先(父级)元素 contain - 防止滚动链接。...注意:overscroll-behavior还支持overscroll-behavior-x和overscroll-behavior-y的简写，如果您只想定义特定轴的行为 让我们深入一些例子来看看如何使用...为了防止导航，你可以使用overscroll-behavior-x：none 完整Demo 把它放在一起，完整的聊天框演示，使用overscroll-behavior行为来创建一个自定义的拉动到刷新动画
我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...编写页面结构 编写html的页面结构，每个section独占一屏幕，默认显示第一屏。...布尔值 false 滚动到最底部后是否滚回顶部 loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling...是离开的“页面”的序号，从1开始计算； nextIndex 是滚动到的“页面”的序号，从1开始计算； direction 判断往上滚动还是往下滚动，值是 up 或 down。...afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink
1、使用Vue.js滚动到一个元素 我们可以通过为想要滚动到的元素分配一个引用来使用Vue.js滚动到该元素然后，我们可以在分配给引用的元素上调用scrollIntoView方法来滚动到该元素。...然后我们有一些p元素，其中最后一个引用被分配给最后一个p元素。在scrollToElement方法中，我们通过解构使用this.$refs.last获取分配给最后一个引用的元素。...然后我们调用el.scrollIntoView，并使用一个具有behavior属性的对象来更改滚动行为。 2、如何在Vue.js组件中监听窗口滚动事件？...3、如何在页面加载时调用Vue.js方法？ 我们可以在页面加载时通过在 beforeMount 组件钩子中调用Vue.js方法来调用它。...在这个阶段，Vue.js 已经将组件实例挂载到了指定的 DOM 元素上，并且执行了一次渲染。
iframe 在企业中，各个研发部门往往各自开发自己的应用。当需要把这些应用聚合在一起时。以往的解决方案是在主应用中嵌入 iframe，使用 iframe 加载和切换子应用页面。...当父应用页面被刷新时，iframe 会丢失跳转的路径状态（你可以将iframe中的页面状态保存在父应用的URL上，然后在刷新页面的时候从URL上读取状态再来修改iframe中的页面地址。...好处是 iframe 中的 DOM、CSS、JS 不会影响到父级，但坏处是当你想覆盖整个窗口来展示一个模态框时，它只会展示在 iframe 那一块区域。 iframe 与父级通信困难。...那么，如果不使用 iframe，应该如何聚合多个应用呢？ 结合前端组件化，我们可以使用动态渲染组件的方式来实现这一效果，不过需要原有项目做一些规范化的改动。...scoped CSS隔离CSS代码需要对子应用的代码进行特殊处理，也就是将所有CSS选择器前面加一个父级元素，如下 /* 原来为span，加上父级后为 */ div[data-app-name=myApp
使用qiankun进行微前端改造后，页面被拆分为一个基座应用和多个子应用，每个子应用都运行在独立的沙箱环境中。...2.2 方案二：同一时间仅加载一个子应用，同时保存其他应用的状态实现思路： 通过registerMicroApps注册子应用，qiankun会通过自动加载匹配的子应用； 参考keep-alive实现方式...方案优势： 同一时间，只是展示一个子应用的active页面，可减少DOM节点数； 非active子应用卸载时同时会卸载DOM及不需要的事件监听，可释放一定内存。...应用级缓存 子应用vnode、router等属性，子应用切换时缓存；页面级缓存 通过vue-keep-alive缓存组件的vnode； 删除页签时，监听remove事件，删除页面对应的vnode； vue-keep-alive...组件中所有缓存均被删除时，通知删除整个子应用缓存；3.4 整体框架最后，我们从整体的视角来了解下多页签缓存的实现方案。
文章最后一题，欢迎同学们积极回答，分享各自的经验 ~~~ 1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？...一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。...： 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载； 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，...所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。...有两种常见的试图改变一个 prop 的情形: 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。
可以将性能优化分为两个大的分类： 加载时优化 运行时优化 加载时性能 顾名思义加载时优化 主要解决的就是让一个网站加载过程更快，比如压缩文件大小、使用CDN加速等方式可以优化加载性能。...6.按需加载代码，减少冗余代码 按需加载 在开发SPA项目时，项目中经常存在十几个甚至更多的路由页面， 如果将这些页面都打包进一个JS文件， 虽然减少了HTTP请求数量， 但是会导致文件比较大，同时加载了大量首页不需要的代码...，有些得不偿失，这时候就可以使用按需加载， 将每个路由页面单独打包为一个文件，当然不仅仅是路由可以按需加载。...使用 Defer 加载JS 尽量将 CSS 放在文件头部，JavaScript 文件放在底部 所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。...比如判断页面是否滚动到底部，然后展示相应的内容；就可以使用节流，在滚动时每300ms进行一次计算判断是否滚动到底部的逻辑，而不用无时无刻地计算。
/编写js代码 将代码编写到外部的js文件中，然后通过标签将其引入 script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略 ,如果需要则可以在创建一个新的...() 求多个数中的最小值 Math.sqrt() 对一个数进行开方 DOM 页面加载 window.onload = function () { } getElementById()：返回带有指定ID...var firstChild = city.firstChild; lastChild获取当前元素的最后一个子节点 var lastChild = city.lastChild; parentNode...; event.cancelBubble = true; }; 事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件...，作用和直接修改location一样 reload() 用于重新加载当前页面，作用和刷新按钮一样,如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面 replace() 可以使用一个新的页面替换当前页面
下面就是一段结构化的 HTML 文本： LIYI yishulun.com 两个子标签 span 包含在一个父标签...在使用 opacity、transform、will-change 这些样式时要小心，能够合并的样式尽量合并，例如在多个子元素上使用 opacity 样式，就不如直接在父元素上使用 opacity 样式...合成与渲染：如果有分层，那必有合成，将散开的层按正确的上下层遮挡关系合在一起。最后渲染输出。每次页面至少要控制在 16.7 毫秒以内，这样才感觉不到页面卡顿。...这里的描述有没有问题？ 计算机大厦是一级一级向上建起来的，早期 C++编译器甚至都是直接将 C++代码编译为 C 代码，然后直接扔给 C 编译器处理。...如果脚本需要等待页面解析，且依赖于其他脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。
提供的，只能用于加载CSS； ②页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载； ③import是CSS2.1 提出的，只在IE5以上才能被识别，而link是...适用于以下情况： ①静态图片，不随用户信息的变化而变化 ②小图片，图片容量比较小 ③加载量比较大 17、清除浮动的几种方式，各自的优缺点 （1）父级div定义height。...当然也可以直接使用成熟的框架、比如html5shim。 Javascript 1、JS如何使页面跳转?怎么引入一个外部JS文件?...我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名...（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。 （7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
一次性加载的用户体验肯定不太顺畅，按照主流的手机尺寸，将整站分成三部分：首屏+次屏+尾屏。基本的加载流程如下图： ?...首屏组件是第一级子组件，次屏是第二级子组件，尾屏是第三级子组件。整体结构如下图： ? vue实现按需加载动态组件要考虑以下几点： 1、组件容器位置； 2、组件数据如何传递。...对比上图可以看出子组件容器的位置： Themes组件作为第一级子组件App的一个子组件，容器位置如下代码： Tails组件作为第二级子组件Themes的一个子组件，容器位置如下代码： <template...这个全局变量是为了尾屏的Tail组件渲染使用。这就是上文提到的“组件数据如何传递”。 使用全局变量传递数据的方式固然不是很优雅，但是不失为一个适合快速开发的方案。这也是后续迭代的优化点之一。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
