面试
文章平均质量分 56
面经
不能懒鸭
努力写出优雅的代码
展开
-
HashRouter与 BrowserRouter的区别
1.原理上HashRouter:在路径中包含了#,相当于HTML的锚点定位。(# 符号的英文叫hash,所以叫HashRouter)BrowserRouter:使用的是HTML5的新特性History,没有HashRouter(锚点定位)那样通用,低版本浏览器可能不支持。2.用法上BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信HashRouter不能(除非手动拼接URL字符串),因此一般配合Redux使用,实现组件间的数据通信。3.生产实践上H原创 2022-03-13 20:08:50 · 7547 阅读 · 0 评论 -
react中关于组件的一些概念(有无状态组件、组件封装与继承 、高阶组件)
怎么理解“在react中,一切皆为组件 ” 句话react采用组件化的思想,最小的组件单位就是原生HTML元素,采用JSX语法组件声明调用react的虚拟dom,就是一个大的组件树,从父组件层到子组件,在react-router v4版开始,路由本身也是组件各个库提供的hoc返回也是组件,如withRouter、connectreact中的基础数据state props的传递也是以组件为基础1. 什么是组件?组件就是页面上的一部分,可以是一个按钮、一张图片,可以是任意一个html元素。2.原创 2022-03-08 22:08:35 · 659 阅读 · 0 评论 -
Real DOM 和 Virtual DOM含义、区别、优缺点
1. 含义1. Real DOM :(真实的DOM) 在页面渲染出的每个节点都是一个真实的DOM结构,比如:<div class="root"> <h1>hello Real </h1></div>2. Virtual DOM:(虚拟dom,本质是以js对象形式存在的,对DOM的描述)Virtual DOM 是一个轻量级的js对象,它最初只是real DOM的副本,也是一个节点树,它将元素、它们的属性和内容作为该对象及其属性。Virtu原创 2022-03-06 21:02:01 · 1329 阅读 · 0 评论 -
js图片懒加载原理、实现及节流优化
1.懒加载原理在图片没有进入可视区域时,先给的src一个默认加载的图片,这样浏览器就不会发送请求了,等到图片进入可视区域再把真实的图片路径data-src给src。2.具体实现1. 效果2. 代码如下:<style> .imgList{ width: 600px; } .lazy { width: 600px; }</style><body>原创 2022-02-27 22:33:38 · 2033 阅读 · 0 评论 -
能不能说一说XSS攻击?
回答面试的话:(简单说即可)XSS攻击就是指 不法分子在浏览器中执行恶意脚本,然后拿到用户的信息进行操作,主要分为存储型、反射型和文档型,防范措施有:一个信念:不要相信用户的任何输入,对输入的内容进行转码或者过滤,让其不可执行两个利用:利用 浏览器中的内容安全策略CSP、利用Cookie的HttpOnly属性1.XSS全称 XSS:(全称Cross Site Scripting),即跨站脚本,为了和CSS区分,故叫XSS。2.XSS是啥?能干啥XSS攻击是指 浏览器中执行恶意脚本,拿到原创 2022-02-26 23:01:00 · 3669 阅读 · 0 评论 -
谈谈你对重绘和回流的理解
先了解浏览器的渲染流水线1.回流(也叫重排)触发条件:当我们对DOM结构的修改引发DOM几何尺寸变化的时候,重新渲染DOM树,发生回流。具体一点:一个DOM元素的几个属性变化,常见的集合属性有width height padding margin left top border等使DOM节点发生增减 移动读写 offset族 scroll族 client族 属性的时候,浏览器为了获取这些属性值,需要进行回流操作调用window.getComputedStyle 方法2.重绘触发条件:当原创 2022-02-25 14:48:04 · 544 阅读 · 0 评论 -
说一说从输入URL到页面呈现发生了什么?
由于里面原理三两句讲不完,本文只罗列简要过程1.网络部分:构建请求查找强缓存DNS解析建立TCP连接(三次握手、四次挥手)发送HTTP请求网络响应完成了网络请求和响应,如果响应头中Content-Type的值是text/html,那么接下来就是解析和渲染工作了。2.解析部分:构建DOM树样式计算生成布局树(Layout Tree)3.渲染部分:前面解析部分中,已经有了DOM节点、样式和位置,但是并不可以开始绘制页面,因为比如:一些3D动画如何呈现出变化效果、当元素含有层叠原创 2022-02-25 14:41:12 · 459 阅读 · 0 评论 -
能不能说一说浏览器缓存?
为啥要知道浏览器缓存?为了更好的进行 性能优化。回答面试的话:服务器首先通过Cache-Control验证强缓存是否有效,如果强缓存有效,直接使用;否则进入协商缓存,即发送HTTP请求,服务器通过请求头中的If-Modified-Since或者If-None-Match字段检查资源是否更新,如果资源更新,返回最新资源和200状态码,否则返回304,告诉浏览器直接从缓存获取资源。如果想了解更多,可以继续往下看哦,要慢慢品,理解了会发现:天空飘来五个字,这都不是事,,哈哈。。。。。1.原创 2022-02-24 22:16:10 · 235 阅读 · 0 评论 -
防抖与节流 (场景、函数封装)
防抖场景:输入框实时查询第一次输入触发事件时,开始计时:(比如计时500ms)计时500ms到了,执行第一次触发的查询如果计时500ms还没有到,第二次事件又触发了,则清除第一次的计时,重新计时,如果计时500ms到了,执行查询,如果未到第三次事件又触发了,则又重新计时…(用户触发事件过于频繁,只执行最后一次)比喻:一条公路上规定时间内只允许通过一辆车如果在规定的时间内,第一辆车跑完了,就去领奖如果这辆车到时间了还没跑完,就扔下去,第二辆车上路,重新计时…<input type原创 2022-02-23 22:17:27 · 423 阅读 · 0 评论 -
原型链图解
图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的线:详解:https://github.com/mqyqingfeng/Blog/issues/2原创 2022-02-22 16:50:29 · 86 阅读 · 0 评论 -
什么是闭包、闭包原理、怎么解决内存泄露的问题、闭包使用场景
什么是闭包?闭包:如果一个函数可以访问其外部函数的变量,它就是闭包。举个例子:outFn(name){ return function(){ console.log(name) }}const fn = outFn("张三")//fn得到outFn的返回值,为一个匿名函数fn()//调用匿名函数//console.log("张三")闭包原理虽然outFn已经执行完毕,但是其活动对象OA也不会销毁,因为返回的匿名函数仍然引用着outFn函数中的变量,这就是闭包(匿名函数维护着一个作原创 2022-02-22 16:03:38 · 623 阅读 · 1 评论 -
js手写call、apply、bind方法
先熟悉一下call的功能及使用//// 需求:想让函数打印出user 的name,即想让函数中的this指向user(修改this指向) const user = { name: "zhangsan" } function sayYourName(title) { console.log(title,this.name) } // 使用js内置的api call方法 sayYourName.call(user,'hello')原创 2022-01-05 16:28:16 · 236 阅读 · 0 评论 -
new 过程都发生了什么?(手写函数模拟new过程)
function Person(name){ this.name = name}Person.prototype.say=function(){ console.log('我的名字'+this.name)}const person1 = new Person('xiaoming')person1.say()模拟new 实现(手动实现New过程)function myNew(Fn,...args){ //1.创建一个空对象 const obj = {} //2原创 2022-01-12 09:55:08 · 111 阅读 · 0 评论