前端
sifanchao
这个作者很懒,什么都没留下…
展开
-
浏览器
浏览器是如何渲染UI的浏览器获取HTML文件,然后对文件进行解析,形成DOM Tree与此同时,进行CSS解析,生成Style Rules接着将DOM Tree与Style Rules合成为 Render Tree接着进入布局(Layout)阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标随后调用GPU进行绘制(Paint),遍历Render Tree的节点,并将元素呈现出来浏览器重绘与重排的区别重排: 部分渲染树(或者整个渲染树)需要重新分析,并且节点尺寸需要重新计算,表现为重原创 2020-06-02 21:15:08 · 351 阅读 · 0 评论 -
ajax
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:创建XMLHttp原创 2020-06-01 14:48:15 · 329 阅读 · 0 评论 -
前端网络安全
有哪些可能引起前端安全的的问题跨站脚本 (Cross-Site Scripting, XSS): 一种代码注入方式, 为了与 CSS 区分所以被称作 XSS. 早期常见于网络论坛, 起因是网站没有对用户的输入进行严格的限制, 使得攻击者可以将脚本上传到帖子让其他人浏览到有恶意脚本的页面, 其注入方式很简单包括但不限于 JavaScript / VBScript / CSS / Flash 等iframe的滥用: iframe中的内容是由第三方来提供的,默认情况下他们不受我们的控制,他们可以在ifram原创 2020-05-31 22:13:41 · 1876 阅读 · 0 评论 -
Webpack
webpack与grunt、gulp的不同Grunt、Gulp是基于任务运行的工具它们会自动执行指定的任务,就像流水线,把资源放上去然后通过不同插件进行加工,它们包含活跃的社区,丰富的插件,能方便的打造各种工作流。Webpack是基于模块化打包的工具自动化处理模块,webpack把一切当成模块,当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack原创 2020-05-31 21:12:49 · 477 阅读 · 0 评论 -
js模块化解决方案规范
AMD是由RequireJS推动一个异步加载模块的规范,通过define定义模块,require去引用模块推崇依赖前置,在定义模块的时候就要声明其依赖的模块,提前执行CMD是由SeaJS推动的模块化规范,推崇一个模块一个文件,通过define定义模块,seajs.use来加载模块推崇就近依赖,只有在用到某个模块的时候再去require,延迟执行CommenJS是一种同步加载模块的规范,被nodejs推广开,使用module.exports和require开发UMD是AM..原创 2020-05-31 16:03:16 · 322 阅读 · 0 评论 -
Vue中的key到底有什么用
key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速。diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后找出差异。diff过程可以概括为:oldCh和newCh各有两个头尾的变量StartIdx和EndIdx,它们的2个变量相互比较,一共有4种比较方式。如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明oldC原创 2020-05-30 22:38:38 · 901 阅读 · 0 评论 -
虚拟DOM
为什么使用虚拟DOM因为真实dom的实现内容太多了,如果直接操作真实dom对象,对性能是巨大的浪费。虚拟dom就是一个简化后的dom对象,只存储了重要的参数。virtual dom很多时候都不是最优的操作,但它具有普适性,在效率、可维护性之间达平衡。虚拟dom类似于计算机中的缓存。包括几个步骤:用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把2所记录原创 2020-05-30 22:03:39 · 460 阅读 · 0 评论 -
Vue是如何实现双向绑定的
vue的双向绑定指的是数据变化更新视图,视图变化更新数据。视图变化更新数据一般就采用事件监听的方式就可以了,数据变化更新视图就需要涉及响应式原理。vue2.x的响应式原理的基础是Object.defineProperty属性。利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应,在vue3.0中通过Proxy代理对象进行类似的操作。Vue三要素双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕原创 2020-05-30 17:39:46 · 2352 阅读 · 0 评论 -
computed和watch有什么区别
computedcomputed是计算属性,也就是计算值,它更多用于计算值的场景computed具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算computed适用于计算比较消耗性能的计算场景watch更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作无缓存性,页面重新渲染时值不变化也会执行当需要原创 2020-05-30 14:53:57 · 1669 阅读 · 0 评论 -
Vue组件如何通信
如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与E是堂兄关系(非直系亲属) 针对以上关系我们归类为:父子组件之间通信非父子组件之间通信(兄弟组件、隔代关系组件等)Vue组件通信的方法如下:props/$emit+v-on: 通过props将数据自上而下传递,而通过$emit和v-on来向上传递信息。prop 只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改.原创 2020-05-30 14:42:39 · 265 阅读 · 0 评论 -
Vue的生命周期
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是Vue的生命周期。各个生命周期的作用生命周期描述beforeCreate组件实例被创建之初,组件的属性生效之前created组件实例已经完全创建,属性也绑定,但真实dom还没有生成,$el还不可用beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用mountedel 被新创建的原创 2020-05-30 12:55:30 · 220 阅读 · 0 评论 -
Vue中的MVVM
MVVM 模式,顾名思义即 Model-View-ViewModel 模式。它萌芽于2005年微软推出的基于 Windows 的用户界面框架 WPF ,前端最早的 MVVM 框架 knockout 在2010年发布。Model 层:对应数据层的域模型,它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里,它主要用于抽象出 ViewModel 中视图的 ModelView 层:作为视图模板存在,在 MVVM 里,整个 View 是一个动态原创 2020-05-30 12:43:45 · 281 阅读 · 0 评论 -
CSS基础
元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right原创 2020-05-28 22:24:17 · 546 阅读 · 0 评论 -
HTML基础
doctype的作用是什么(重要)DOCTYPE是 html5 标准网页声明,且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。文档解析类型有:BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。(如果没有声明DOCTYPE,默认就是这个模式)CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。IE8还有一种介乎于上述两者之间的近乎标准的模式,但是原创 2020-05-28 21:04:13 · 270 阅读 · 0 评论