首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

图解浏览器

口味:仔梅烧小排 本文同步视频版 01 浏览器架构演进 开篇我们先来简单回顾下历史,从 1993 年发布的第一款“好用”的浏览器 Mosaic,到 1994 年网景公司推出的红极一时的 Navigator...02 浏览器导航渲染流程 从输入 URL 到页面展示,这中间发生了什么? 这是一道十分常见的面试题,不过大多数人回答这个问题时都不够系统和全面,可见这道题能够充分考察应试者的知识深度。...优化LCP方案 FID First Input Delay 首次交互延迟 FID用于衡量从用户第一次与页面进行交互到浏览器实际上能够开始处理事件处理程序的时间。...在上图中,有一个元素在一帧中占据了视口的一半。然后,在下一帧中,元素下移视口高度的 25%。...在上图中,最大视口尺寸是高度,不稳定元素已经移动了视口高度的 25%,所以距离分数是 0.25。

1.5K30

常考vue面试题(附答案)

LRU(Least rencently used)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是 "如果数据最近被访问过,那么将来被访问的几率也更高"。...+ jquery图片传统的 MVC 指的是,用户操作会请求服务端路由,路由会调用对应的控制器来处理,控制器会获取数据。...patch将前面获得vnode转换为dom;同时首次执行渲染函数会创建它内部响应式数据之间和组件更新函数之间的依赖关系,这使得以后数据变化时会执行对应的更新函数来看一下源码,在src/core/instance...子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。如果这样做了,Vue 会在浏览器的控制台中发出警告。...的缓存特性,避免每次获取值时,都要重新计算;当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率

67720
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    资深Android开发的5个经典面试题

    面试题目1:谈谈你对Android中的内存泄漏和内存溢出的理解,以及如何检测和解决它们。 解答: 内存泄漏是指应用程序中的某些对象不再被使用,但仍然被引用,导致垃圾回收器无法回收它们,从而消耗内存。...当一个进程想要与另一个进程通信时,它会通过Binder驱动获取目标进程的Binder对象引用。...MVP(Model-View-Presenter)是MVC的变体,它将控制器替换为Presenter,Presenter负责从Model获取数据并更新View。...Handler通常与特定的线程绑定,因此它可以访问该线程的上下文(Context),并且可以在该线程中安全地更新UI。...Context的作用包括: 提供资源访问,例如通过getResources()方法获取资源。 提供系统服务,例如通过getSystemService()方法获取系统服务。

    15610

    京东前端高频vue面试题

    与vuex都是对mvvm思想的服务,将数据从视图中抽离的一种方案;形式上:vuex借鉴了redux,将store作为全局的数据中心,进行mode管理;v-model 可以被用在自定义组件上吗?...通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据MVC 的思想:一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来,换句话说就是在 Controller...View 层显示会自动改变(对应Vue数据驱动的思想)整体看来,MVVM 比 MVC 精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作 DOM 元素。...值只是客户端的一种状态,也就是说当向服务器端发出请求时,hash 部分不会被发送;hash 值的改变,都会在浏览器的访问历史中增加一个记录。...Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。

    1.2K70

    “终于懂了“系列:Jetpack AAC完整解析(四)MVVM - Android架构探索!

    仓库层 要做的主要工作是判断调用方请求的数据应该是从本地数据源中获取还是从网络数据源中获取,并将获取到的数据返回给调用方。...本地数据源可以使用数据库、SharedPreferences等持久化技术来实现,而网络数据源则通常使用Retrofit访问服务器提供的Webservice接口来实现。...数据更新时,它们知道从何处获取数据以及进行哪些 API 调用。您可以将Repository视为不同数据源(如持久性模型、网络服务和缓存)之间的媒介。...现在,UserListViewModel 是不知道数据来源的,因此我们可以为ViewModel提供从几个不同的数据源获取数据。...将一个数据源指定为单一可信来源。每当需要访问数据时,都应一律源于此单一可信来源。例如 UserRepository会将网络服务响应保存在数据库中。

    2.1K20

    MVVM之Vue源码分析

    . addEventListener: input监听(输入过程中发生)与change监听(失去焦点时发生) 该方法将指定的监听器注册到对应元素上,当元素触发指定的事件时,指定的回调函数就会执行....MVVM框架的三大基本原理 1. 数据代理: Vue实现: ? 现在的问题就是:我明明是定义在data中的name,为什么可以通过vm.name直接访问到呢?...简单来说,当为{{name}}时,代码会执行对其进行大括号解析,然后从data中获取的相应属性值,然后修改其元素的textContent值....想象一种场景:当页面初始化完成之后,如果要对页面的某个数据进行修改,从原生层面来讲,正常的思路就是:获取元素标签修改DOM值,那既然咱已经用了框架,那么就不能使用这么low的技术了吧,来看看人家的思路:...当页面的数据发生改变时(即执行this.name="Cathrine"),即发生在数据更新阶段,会建立dep与watcher的关系~ ?

    86330

    设计模式 | MVC、MVP、MVVM详析

    MVVM与MVP非常相似, 它们间的区别: View和Model进行双向绑定(data-binding), 两者之间有一方发生变化则会反应到另一方上; MVP中的View更新需要通过Presenter...【对控制器瘦身】 MVVM可以看成是MVC的进化版, 它可以把Activity中的大量VC逻辑【UI、控制调度、业务逻辑】封装到ViewModel层中, 使得Activity代码架构性能提升不少;..., 静态变量长期维持到大数据对象的引用,阻止垃圾回收,容易产生内存泄漏。...【测试时部分问题难度增加】 数据绑定使得部分bug调试难度增加。 当界面异常时, bug可能出在View代码中,也可能出在 Model 的代码。 MVC实例分析 ?...更直白地说, Model是封装了数据库DAO或者网络获取数据的角色, 或者两种数据获取方式的集合。

    3.1K10

    关于 MVVM和MVC的这些,你知道吗?

    MVVM的视图模型是一个值转换器, 这意味着视图模型负责从模型中暴露(转换)数据对象,以便轻松管理和呈现对象。在这方面,视图模型比视图做得更多,并且处理大部分视图的显示逻辑。...() 或 $apply() 数据劫持(vue.js):数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。...当多个View与一个 Model进行绑定时,每次更新 Model时需要在Model 的set访问器属性中更新多个 View,这样硬编码的方式不利于后期的维护。...实现双向数据绑定步骤[^7] 要实现mvvm的双向绑定,就必须要实现以下几点: 实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数 实现一个数据监听器...在系统运行过程中,一旦系统中的数据模型发生了变化,观察者 Observer的 setter 访问器属性就会被触发,此时消息订阅中心 Dep 会遍历它所维护的所有订阅者,对于每一个订阅了该数据的对象,向它发出一个更新通知

    79500

    js面试题系列003

    垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。...闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环) WEB应用从服务器主动推送Data到客户端有那些方式 Javascript数据推送 Commet:基于HTTP长连接的服务器推送技术...基于WebSocket的推送方案 SSE(Server-Send Event):服务器推送数据新方式 javascript对象的几种创建方式 1,工厂模式 2,构造函数模式 3,原型模式 4,混合构造函数和原型模式...AMD推荐的风格通过返回一个对象做为模块对象,CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的 mvvm的理解 Angular它采用双向绑定(data-binding...,将View的Command传送到Model; Model:数据访问层 请解释什么是事件代理 事件代理(Event Delegation),又称之为事件委托。

    99930

    关于 MVVM和MVC的一些总结

    MVVM的视图模型是一个值转换器, 这意味着视图模型负责从模型中暴露(转换)数据对象,以便轻松管理和呈现对象。在这方面,视图模型比视图做得更多,并且处理大部分视图的显示逻辑。...或 apply() 数据劫持(vue.js):数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。...当多个View与一个 Model进行绑定时,每次更新 Model时需要在Model 的set访问器属性中更新多个 View,这样硬编码的方式不利于后期的维护。...实现双向数据绑定步骤 要实现mvvm的双向绑定,就必须要实现以下几点: 实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数 实现一个数据监听器...在系统运行过程中,一旦系统中的数据模型发生了变化,观察者 Observer的 setter 访问器属性就会被触发,此时消息订阅中心 Dep 会遍历它所维护的所有订阅者,对于每一个订阅了该数据的对象,向它发出一个更新通知

    2.7K30

    前端必会vue面试题(必备)_2023-03-15

    Vue 实现响应式并不是在数据发生后立即更新 DOM,使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用,则可以在回调中获取更新后的 DOM。...+ jquery图片传统的 MVC 指的是,用户操作会请求服务端路由,路由会调用对应的控制器来处理,控制器会获取数据。...就要响应这些操作,所以可以说它是Model for View.总结 : MVVM模式简化了界面与业务的依赖,解决了数据频繁更新。...$nextTick 来访问 DombeforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。...当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

    51330

    Android UI 架构演进:从 MVC 到 MVP、MVVM、MVI

    虽然有解决办法,但还是存在风险点和复杂度(弱引用 / onDestroy() 回收 Presenter)。...在实现细节上,View 和 Presenter 从双向依赖变成 View 可以向 ViewModel 发指令,但 ViewModel 不会直接向 View 回调,而是让 View 通过观察者的模式去监听数据的变化...: 存储界面相关的数据,这些数据不会在手机旋转等配置改变时丢失。...并且 View 只需要订阅一个 ViewState 就可以获取所有状态和数据,相比 MVVM 是新的特性; 响应式: ViewState 包含页面当前的状态和数据,View 通过订阅 ViewState...但是不可否认,从 React 到 Flutter,从 MVI 到 Compose,响应式编程似乎有一统天下的趋势。未来会怎么样,我们拭目以待。

    1.5K10

    已中招!Android 基础面试常常吊死在这几个问题上……

    面试官:我给你讲讲吧,你去别的公司面试你,你可以这样回答: OnCreate():这是第一次创建视图时。通常,这是我们创建视图,从包中获取数据等的地方。...第三波 11、面试官:你是如何做到旋转屏幕时防止数据重新加载和重置的?...无法从 Thread 更新 UI 。 AsyncTask 可用于处理持续时间少于5毫秒的任务。使用 AsyncTask ,您可以更新与JavaThread不同的UI。...确实完成而不是更新新Activity的UI时,它更新了Activity的前一个实例(即创建它的实例,但不再显示!)。...即使适配器返回膨胀视图以进行回收,仍然需要查找元素并进行更新。重复使用的一种方法 findViewById() 是使用 “ViewHolder” 设计模式。

    2K20

    内存泄露从入门到精通三部曲之排查方法篇

    1 最原始的内存泄露测试 重复多次操作关键的可疑的路径,从内存监控工具中观察内存曲线,是否存在不断上升的趋势且不会在程序返回时明显回落。...Heap视图中部有一个Type叫做data object,即数据对象,也就是我们的程序中大量存在的类类型的对象。...当垃圾回收器准备回收一个对象时,如果发现它还有虚引用,就会在回收对象的内存之前,自动把这个虚引用加入到与之关联的引用队列中。...利用PhantomReferences(虚引用)和ReferenceQueue(引用队列),当PhantomReferences被加入到相关联的ReferenceQueue时,则视该对象已经或处于垃圾回收器回收阶段了...别着急,下周同一时间,Bugly将为大家推送内存泄露从入门到精通三部曲的下篇:内存泄露常见原因。

    1.9K140

    听GPT 讲Go源代码--mbitmap.go

    其次,它被用于在垃圾回收的过程中访问位图。当垃圾回收扫描堆中的对象,并尝试将它们标记为可达时,可以通过访问相应的位图来确定它们的标记信息,从而支持垃圾回收的进一步操作。...总的来说,该函数以及类型 _typeBits 是实现垃圾回收机制的重要组成部分,可以快速访问位标记所在的字节,并设置或获取位标记的值。...当回收器扫描堆时,它会遍历所有内存块,将活动对象标记为已访问,以便回收器可以及时清除不再使用的内存。在并发的垃圾回收器中,为了避免不稳定的行为和竞争条件,所有标记操作都必须是原子操作或使用锁来保护。...堆位图是Go语言运行时系统中的一种数据结构,用于记录堆中哪些内存块被分配,哪些没有被分配。在堆上分配内存时,Go运行时系统会从空闲内存中分配一块可用的内存块,然后将其标记成已分配状态,同时更新堆位图。...而在清除阶段中,GC 会将垃圾对象从内存中移除。 在 Go 1.14 中,引入了一项新功能,即可以在垃圾回收期间将某些位于内存中的数据结构从物理地址转换为虚拟地址。

    22720

    腾讯前端二面常考vue面试题(附答案)_2023-02-27

    通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据 MVC 的思想:一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来,换句话说就是在 Controller...View 层显示会自动改变(对应Vue数据驱动的思想) 整体看来,MVVM 比 MVC 精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作 DOM 元素。...Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。...()的方式定义数据拦截,当数据被访问或发生变化时,我们感知并作出响应;如果是数组则通过覆盖数组对象原型的7个变更方法 ,使这些方法可以额外的做更新通知,从而作出响应。...$nextTick 来访问 Dom beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。

    61420

    前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

    如DNS解析优化,减少后端服务处理时间等 合并雪碧图,大轮播图下面的菜单分类那里的图标,可以用一张雪碧图来集合这些图标 顶部轮播图,在首次加载时,可以先加载第一帧的图片,后面几帧延后一下 图片较多,可以的话...更多内存泄露产生的原因及分析方法,可以参照我的这篇文章《Chrome 浏览器垃圾回收机制与内存泄漏分析》 最下方就是页面的一个整理耗时概况,如果 Scripting 时间过长,则说明 js执行的逻辑太多...区域,可以帮助分析动画卡顿、是否开启GPU加速等问题,而 Memory 面板 和 JavaScript Profiler 面板主要是分析内存泄露的,这里就不说了,可以看我另一篇文章《Chrome 浏览器垃圾回收机制与内存泄漏分析...First Meaningful Paint:可以简单理解为用户看到网页主要内容的时间,分数越低,页面显示其主要内容的速度就越快。图中例子,网页首次有效绘制时间为2.5s。...图中的每一项都可以展开来看明细解释,其中: 可优化项有2个建议: 延迟会阻塞渲染的资源加载,这里是一个 navfoot.6bf68af7.css 延迟视口外的图片加载,这里列举了不必要加载的图片(和我上文提的优化建议一致

    2.6K10

    vue高频面试题合集(四)附答案

    Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。...说一下Vue的生命周期Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。...形式进行指定变更;弱化reducer,基于commit参数直接对数据进行转变,使得框架更加简易;(2)共同思想单—的数据源变化可以预测本质上:redux与vuex都是对mvvm思想的服务,将数据从视图中抽离的一种方案...nextTick 使用场景和原理nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。...LRU(Least rencently used)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是 "如果数据最近被访问过,那么将来被访问的几率也更高"。

    72440

    vue理解MVVM

    ViewModel负责处理View的展示逻辑,并将数据从Model传递给View,同时也负责将用户的操作反馈回Model。...MVVM的结构MVVM模式的结构主要包含以下三个组件:Model:表示应用程序的数据和业务逻辑。它负责数据的获取、存储和处理。View:表示用户界面。它负责将数据展示给用户,并接收用户的操作。...ViewModel与View之间通过双向数据绑定建立关联,ViewModel与Model之间通过数据获取、更新等方法进行交互。...View根据ViewModel提供的数据进行更新,展示最新的视图。整个过程是一个闭环,数据的变化会自动反映到视图中,用户的操作也会自动反馈到数据中。...在computed中,我们定义了一个计算属性reversedMessage,它会根据message的值进行计算,并返回反转后的字符串。这个计算属性会自动更新,并将最新的值反映到视图中。

    37810

    Sentry中的Web指标学习

    LCP 帮助开发人员了解用户看到页面上的主要内容需要多长时间。 首次输入延迟 (FID) 首次输入延迟 (FID)测量用户尝试与视口交互时的响应时间。...操作可能包括单击按钮(button)、链接(link)或其他自定义 Javascript 控制器。FID 提供有关应用程序页面上成功或不成功交互的关键数据。...首次渲染(FP) 首次渲染 (FP) 测量第一个像素出现在视口中所需的时间,呈现与先前显示内容相比的任何视觉变化。...FCP 帮助开发人员了解用户在页面上看到内容更新需要多长时间。 首字节时间 (TTFB) 首字节时间(TTFB)测量用户浏览器接收页面内容的第一个字节所需的时间。...默认情况下,异常值将从直方图中排除,以提供有关这些生命体征的更多信息视图。异常值是使用上外栅栏(upper outer fence)作为上限来确定的,任何高于上限的数据点都被视为异常值。

    2.3K00
    领券