博哥的二进制世界

前端性能检测是确保网页或Web应用程序在用户设备上快速、流畅运行的重要步骤。这一过程涉及多个方面，包括使用专门的工具进行性能分析、优化代码和资源加载方式等。

简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。如果是引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值。那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了。如果是基本数据类型，名字和值都会储存在栈内存中。

思考一下，如果构造函数返回了一个新对象或者返回其它基本类型的数据，结果还一样吗？new 操作符是可以创建一个用户定义的对象的实例或具有构造函数的内置对象的实例。从上图中可以看出和没有写return是一样的，返回的都是新创新的Car实例。继续修改上面的例子，使其构造函数返回一个基本类型的数据。知道了new的执行过程，手写一个new,就变得很容易了。

他们都是基于TCP的传输协议， WebSocket 可以双向发送和接受数据，而 HTTP 是单向的(HTTP通信只能由客户端发起，不具备服务器主动推送的能力)， WebSocket 的使用，需要先进行一次客户端和服务器的握手，两者建立连接后才可以正常双向通信，而HTTP是一个主动的请求对应一个被动的响应。每次1像素移动一个动画，但是如果此动画使用了100%的CPU，动画就会看上去是跳动的，因为浏览器正在与更新回流做斗争，每次移动3像素可能看起来平滑度低了，但它不会导致CPU在较慢的机器中抖动。

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。7、轮廓样式属性:outline-style、outline-width、outline-color、outline。font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 “x” 的高度与。8、页面样式属性:size、page-break-before、page-break-after。所有主流浏览器都不支持。

上一节讲到了z-index，而众所周知，z-index仅适用与定位的元素，定位极易造成脱离文档流的情况。而什么是文档流呢？

z-index适用范围：它必须在被设定了 position 属性元素上时才会生效，这意味着， z-index 只有在 position 设置为除 static 属性上的元素上时，它才能更改层叠顺序，在元素没有设置任何 position 的情况下，z-index 将不会起任何作用。文档的默认层叠上下文(或"根层叠上下文")将 HTML 元素标记为其"根层叠"，并且默认情况下，所有元素都属于此根层叠上下文，但是，任何元素节点也可以是其"局部层叠上下文"中的根层叠。新的堆叠上下文适用于该元素的任何子元素。

使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；

px是相对于显示器屏幕分辨率而言的，且一旦设置就无法因为适应页面大小而改变，所以通常可以设置字体、内外边距、border等一些不需要依据页面而改变数值大小的属性。em是依据父盒子的字体大小来调整数值的，因为其是依据父盒子字体来确定实际大小，不同元素的字体有可能不同，所以通常也不用于自适应。rem是依据根节点的字体大小来调整数值的，所以通常会配合媒体查询做自适应，但其自适应通常需要引入js文件。百分比%是依据父盒子宽高的百分比来确定实际大小的，通常会用百分比做一些局部的宽高调整。

pc端和移动端是两套代码的，通常pc端不做响应式；用px，移动端做响应式，用rem，可能移动端会用@media做细小的微调。媒体查询通常会结合百分比实现自适应，它经常应用于pc端与移动端是一套项目代码的情况，依据媒体查询写多套不同的样式。vh/vw通常用于移动端的布局，由于其和百分比类似，因此也叫百分比布局。项目中部分布局结构会用flex做自适应。

浏览器想要渲染出网页必须要先将CSS等文件下载下来，所有文件越小，那么就能够更快的下载和渲染，特别是在一些网络速度比较慢的场景下效果尤为明显。我们都知道CSS有一些属性是可以继承的，比如color，font-size，font-family等等，但是很多开发人员不注意这种细节，编写很多重复性代码，从而使得CSS文件变得比较大，影响加载速度。法2的写法，性能更高，因为css选择器是从右到左解析的，法2可以直接获取child，而法1需要先获取所有的child，再获取family下的所有child。

/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;

前端面试题汇总css篇css篇

浏览器是我们日常开发的重要的工具，那么你了解浏览器吗？即使在前端面试中，我们也经常会遇到：在浏览器地址中从输入url地址到出现页面，这个过程发生了什么？介绍一下重绘和回流？这一类关于浏览器的问题。我们可能会知道大概的轮廓但对于具体的细节却是不那么清楚，那么今天我们就从浏览器组成开始来了解一下浏览器的渲染机制。

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。

常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置（很多官网就是依靠这个来实现部分效果的）。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

css层级图解

前端面试题汇总之typeof和instanceof问题描述与答案答案解析typeofinstanceof问题描述与答案求下面表达式的结果[typeof null, null instanceof Object]答案[“object”, false]答案解析这里有两个知识点typeof和instanceoftypeof用于判断数据类型typeof可能返回的值有：类型结果Undefined“undefined”布尔值“boolean”null，a

Object.prototype.toString.call()

前端面试题汇总之parseInt和parseFloat问题描述与答案答案解析mapparseInt说明parseFloat问题描述与答案求下面表达式的结果[“1”, “2”, “3”].map(parseInt)答案： [1, NaN, NaN]答案解析map先说说map方法map() 方法接收一个函数做为参数，遍历数组，依次用回调函数处理数组元素，回调函数会被接收三个参数，currentValue,index,arrmap() 方法返回一个新数组，数组中的元素为原始数组元素调用函数

css中的BFC什么是BFCBFC布局规则如何触发 BFCBFC的应用什么是BFC在了解BFC之前，先了解两个概念：box就是盒模型。box是css布局的对象和基本单位，说白了就是咱们网页布局的基石，简单来说一个页面是由很多box（盒模型）组成的。元素的类型也就是display属性。元素的类型和display属性决定了这个 box的类型。 不同类型的box，会参与不同的Formatting Context（一个决定如何渲染文档的容器-人话就是网页布局的一个范围），因此box内的元素会以不同的方

CSS弹性盒总结弹性盒简介弹性盒的使用创建html文件定义一个弹性盒弹性盒的对齐方式justify-contentalign-items排列方向 flex-directionflex 设置弹性盒子的子元素如何分配空间order 设置弹性盒子的子元素排列顺序flex-wrap 设置弹性盒子的子元素超出父容器时是否换行排列方向 flex-direction与换行（列） flex-flow 缩写形式弹性盒多属性之间的相互配合弹性盒简介弹性盒（Flex Box）是 CSS3 的一种新的布局模式，是一种当页面需

css清除浮动的几种办法清除浮动实际上就是为了触发BFC，因为两个BFG不会互相影响，BFC是一种布局环境9、BFC①什么是BFC？在了解BFC之前，先了解两个个概念：1.box就是盒模型。box是css布局的对象和基本单位，说白了就是咱们网页布局的基石， 简单来说一个页面是由很多box（盒模型）组成的。2.元素的类型也就是display属性。元素的类型和display属性决定了这个 Box的类型。 不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器-

官方描述：使用持久化缓存提高构建性能；使用更好的算法和默认值改进长期缓存（long-term caching）；清理内部结构而不引入任何破坏性的变化；引入一些breaking changes，以便尽可能长的使用v5版本。通俗版描述：减小打包后的文件体积按需加载支持文件名模式使用long-term caching解决生产环境下moduleIds & chunkIds变化的问题使用cache: {type: “filesystem”}配置实现持久化缓存，提高构建速度优化minSize

css实现1px的几种办法背景物理像素和逻辑像素为什么css设置1px，但是在移动端上显示却感觉有些粗呢？css如何实现1px的物理像素法一：利用box-shadow法二：设置 border-image 方案法三：使用background-image实现法四：多背景渐变实现法五：用小数来写px值法六：viewport + rem 实现法七：伪类 + transform 实现背景物理像素和逻辑像素物理像素(physical pixel)物理像素也叫硬件像素或者设备像素，一个物理像素是显示器（手机屏

先说说中间件的理解：中间件的作用就是在执行某一任务过程的时间节点中，如执行前，执行中，执行后等等时间节点，插入某一项操作。redux-thunk就是一款中间件，它能让我们在修改redux的state这一过程中，插入判断，让原本能够自动dispatch改变state的行为------变成需要我们在获取到正确的value值，进行判断之后，再通过手动调用dispatch来改变state加入redux-thunk和不加入redux-thunk的体验上的区别，可以简单概况为，使用redux-thunk，我们需要手

数据结构中的几种时间复杂度分析方式前言大O表示法（渐进上界（最坏情况））大Ω表示法（渐进下界（最好情况））θ表示法（渐进上下界）小o表示法时间复杂度分析的最坏、最好与平均情况前言时间复杂度，顾名思义，就是计算（说是预估可能更为准确）程序中运行所消耗的时间，数据结构中计算时间复杂度分别有以下方式：OΩθo大O表示法（渐进上界（最坏情况））定义：如果存在正常数c和n0使得当N ≥\geq≥ n0 时，T(N) ≤\leq≤ cf(N)，则记为T(N) = O(f(N));如图所示，当N大于

大厂前端面试题js：怎么实现this对象的深拷贝文件上传如何做到断点续传表单可以跨域吗promise,async有什么区别搜索请求如何处理（防抖）搜索请求中文如何请求介绍观察者模式介绍中介者模式观察者和订阅发布的区别，各自用在哪里介绍service worker介绍promise，异常捕获浏览器事件流向介绍事件代理及其优缺点介绍this各种情况前端怎么控制管理路由使用路由时出现问题如何解决js异步解决方案的发展历程以及优缺点对async,await的理解，内部原理介绍

js继承的超详细讲解前言原型链继承原型链继承的定义以及简单示例前言作为对象三大特性（继承、封装、多态）之一的继承，到底是什么呢？简而言之，继承就是可以使得子类具有父类的各种方法和属性。接下来我们就详细描述一下前端的js继承。原型链继承原型链继承的定义以及简单示例先说说什么是原型链继承。通过prototype实现继承的即为原型链继承比如说想让子类Child构造函数继承父类Person构造函数的属性和方法先让Child.prototype = new Person(),简而言之：让新实例的pro

函数柯里化详解

前端防抖与节流超详细讲解前言防抖什么是防抖实现防抖函数节流什么是节流实现节流函数防抖与节流注意事项前言防抖与节流通常作为项目优化的手段，一般都是为了防止用户在短时间内快而频地多次操作，触发动作执行。比如防止用户点击多次提交按钮，触发表单多次提交；防止用户拉动滚动条，多次触发加载更多等情况防抖什么是防抖防抖，顾名思义，就是防止抖动，简而言之就是多次快速频繁地触发事件，也只会执行一次事件函数，但是要记住，需要加上一个时间限制（总不能上一次触发和下一次触发前后相隔半个钟，也才执行一次吧？这样就不是防抖了

toFixed四舍五入出现的问题

前端this指向详解

箭头函数详解

linux常用命令

call\apply\bind详解

CSS3新特性

vue如何通过VNode渲染节点

js小数计算丢失精度问题