sinat_34896766的博客

比如从 B 组件跳转到 A 组件的时候，A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候，实际上是希望 B 组件重新渲染的，也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性，用来控制 A 组件是否读取 Storage 中的状态。在这里需要用到 state 参数，在 B 组件中通过 history.location.state 就可以拿到 state 值，保存它。要切换的组件作为子组件全屏渲染，父组件中正常储存页面状态。

js中的对象是引用数据类型，当多个实例引用一个对象的时候，只要一个实例操作这个对象，其他实例中的数据也会发生变化。vue中，数据以函数返回值的形式定义，当复用组件时，会返回一个新的data，即每个组件有自己的私有数据空间，不会感染其他组件的操作。

MVC、MVP和MVVM都是常见的软件架构设计模式。

同时，每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后，当依赖项的setter被调用的时候，会通知watcher重新计算，从而使它关联的组件得以更新。使用proxy的好处是可以完美的监听到任何方式的数据改变，缺点是兼容问题。vue的双向数据绑定采取的是数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各属性的setter和getter，在数据变动时，发布消息给订阅者，触发相应的监听回调。

JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。标签的引入资源方式有三种，有一种就是我们常用的直接引入，还有两种就是使用 async 属性和 defer 属性来异步引入，两者都是去异步加载外部的JS文件，不会阻塞DOM的解析（尽量使用异步加载）。

同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。协议端口号域名必须一致。同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。当前域下 ajax 无法发送跨域请求。

Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求。b、Cookie无法跨域。

如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。对于浏览器的缓存，主要针对的是前端的静态资源，最好的效果就是，在发起请求之后，拉取相应的静态资源，并保存在本地。如果服务器的静态资源没有更新，那么在下次请求的时候，就直接从本地读取即可，如果服务器的静态资源已经更新，那么我们再次请求的时候，就到服务器拉取新的资源，并保存在本地。这样就大大的减少了请求的次数，提高了网站的性能。

JavaScript代码运行时，需要分配内存空间来储存变量和值。当变量不在参与运行时，就需要系统收回被占用的内存空间，这就是垃圾回收。虽然浏览器可以进行垃圾自动回收，但是当代码比较复杂时，垃圾回收所带来的代价比较大，所以应该尽量减少垃圾回收。浏览器通常使用的垃圾回收方法有两种：标记清除，引用计数。

但是构造函数存在一个缺点就是，造成了不必要的函数对象的创建，因为在 js 中函数也是一个对象，因此如果对象属性中如果包含函数的话，那么每次都会新建一个函数对象，浪费了不必要的内存空间，因为函数是所有的实例都可以通用的。它的一个缺点和工厂模式一样，无法实现对象的识别。（2）第二种方式是使用借用构造函数的方式，这种方式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种方法解决了不能向超类型传递参数的缺点，但是它存在的一个问题就是无法实现函数方法的复用，并且超类型原型定义的方法子类型也没有办法访问到。

这四种方式，使用构造器调用模式的优先级最高，然后是 apply、call 和 bind 调用模式，然后是方法调用模式，然后是函数调用模式。this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。call()和apply()作用一样，区别仅在于传入参数的形式的不同。

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。闭包的作用：a、使我们在函数外部能够访问到函数内部的变量。通过使用闭包，可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，使用这种方法来创建私有变量b、使已经运行结束的函数上下文中的变量对象继续留在内存中let a = 1A()B() // 1。

在JavaScript中是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性，它的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。JavaScript 对象是通过引用来传递的，创建的每个新对象实体中并没有一份属于自己的原型副本。，所以，原型链的终点是。

在这两个空间中，必定有一个空间是使用的，另一个空间是空闲的。新分配的对象会被放入 From 空间中，当 From 空间被占满时，新生代 GC 就会启动了。算法会检查 From 空间中存活的对象并复制到 To 空间中，如果有失活的对象就会销毁。第二种情况是设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。第三种情况是获取一个 DOM 元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它也无法被回收。

浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。浏览器可以分为两部分，shell （浏览器的外壳，主要是提供给用户界面操作，参数设置等等）和 内核（浏览器的核心，是基于标记语言显示内容的程序或模块）。（2） Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核；- ⽤于⽹络调⽤，⽐如 HTTP 请求。

XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。XSS 可以分为存储型、反射型和 DOM 型。XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。获取页面的数据，如DOM、cookie、localStorage；DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器；破坏页面结构；

a、优化Loader--影响Loader打包速度的首要元素是Babel，Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，d、代码压缩--不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间。

回流就是当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程。重绘就是当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制的过程。当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。

防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。

c、小图使用bse64格式；a、用css代替图片；b、用CDN加载图片；e、选择正确的图片格式。d、使用css精灵图。

1、懒加载的概念 懒加载也叫延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的我那个也性能优化的方式。在较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，损耗了性能。 使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域外的图片不会进行加载，在滚动屏幕时才进行加载。这样使网页的加载速度更快，减少了服务器的负载。 懒加载适用于图片较多，页面列表较长的场景中。2、懒加载的特点

通过本地DNS对点击的url进行解析，发现该url对应的是一个CDN专用的DNS服务器，DNS系统就会将域名解析权交给CNAME（在域名解析中，实际上解析出来的指定域名对应的IP地址，或者该域名的一个别名，然后再根据这个别名查找对应的IP地址）指向的CDN专用的DNS服务器；CDN的全局负载均衡设备根据用户的IP地址，以及用户请求的内容url，选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求；性能方面，引入CDN的好处在于：用户收到的内容来自最近的数据中心，延迟更低，内容加载更快；

块级作用域：let和const具有块级作用域，var不存在块级作用域。块级作用域解决了内层变量可能覆盖外层变量，以及用来计数的循环变量泄露为全局变量的问题。 变量提升：var存在变量提升，let和const不存在变量提升（只能在声明后使用，否则会报错） 给全局添加属性：浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但let和const不会。 重复声明：var可以重复声明变量，let和

ToPrimitive 方法，是js中每个值隐含的自带方法，用来将值转换为基本类型。如果值为基本类型，则返回本身，否则，进行转换，返回基本类型值。操作符的两边至少一个string类型变量时，两边的变量都会被隐式转换为字符串；默认情况下，如果对象为Date对象，则type默认为string；其他情况下，type默认为number。调用obj的toString方法，如果为原始值，则返回，否则，进行下一步；调用obj的valueOf方法，如果为原始值，则返回，否则，进行下一步；其他情况下，转换为数字再比较。

在js中，基本数据类型是没有属性和方法的，但是为了便于操作基本数据类型的值，在调用基本类型的属性和方法时，js会在后台隐式地将基本数据类型的值转换为对象。在访问"abc".length时，js将'abc'在后台转换成String('abc')，然后再访问其length属性。js也可以用Object函数显示地将基本类型转换为包装类型。被包裹成包装类型后就成了对象，所以其非值为。，所以循环体中的内容不会运行。虽然包裹的基本类型是。

在二进制科学表示法中，双精度浮点数的小数部分最多只能保留52位，再加上前面的1，其实就是保留53位有效数字，剩余的需要舍去，遵从“0舍1入”的原则。对js来说，这个值通常为2-52，ES6为我们提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，则可以判定0.1+0.2==0.3。计算机是通过二进制的方式存储数据的，所以计算机在计算0.1+0.2的时候，实际上是计算的两个数的二进制的和。

对象、数组和函数是引用数据类型。null的值是机器码null指针（null指针的值全是0），即null的类型标签时000，和Object的类型标签一样，所以typeof null 的值是Object。Object.is()来进行相等判断时，一般情况下和三等号的判断相同，它处理了一些特殊的情况，比如 -0 和 +0 不再相等，两个 NaN 是相等的。isNaN接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的值都会返回为true，非数字值传入也会返回true，会影响NaN的判断。

使用css的transform缩放属性transform:scale(0.5);收缩的是整个元素的大小，这时候，如果是内联元素，必须将内联元素转换成块元素。1px指的是在某些屏幕的机型上，移动端页面的1px会变得很粗，呈现出不止1px的效果。解决思路1：直接写0.5px，利用设备渲染属性，会显示为1px。css一般用border属性实现三角形。在三角形的基础上加上border即可。还可使用切图，将小字体以切图形式展示。

两个块级元素的上外边距和下外边距可能会合并为一个外边距，其大小会取其中外边距值大的那个，这个行为就是外边距折叠。脱标的元素，如浮动元素和绝对定位元素等的外边距不会重叠，且重叠只会出现在垂直方向上。计算原则：如果两者都是正值，就取最大值；一正一负，就是算正负相加的和；如果都是负值，就用0减去两个中绝对值大的那个。解决办法：兄弟折叠底部元素变为行内盒子：display: inline-block底部元素设置浮动：float底部元素的position的值为absolute/fixed。

对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。：是相对长度单位，em是相对父元素的字体大小倍数，rem是相对根元素的字体大小倍数。：页面布局的基础，一个像素表示终端屏幕所能显示的最小区域，可分为css像素（为开发者提供，在css中使用的一个抽象单位）和物理像素（只与设备的硬件密度有关，任何设备的物理像素都是固定的）c、绝对定位+margin负值。

是无损的、使用索引色的点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积，还支持透明度的调节。是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。是无损的、采用索引色的点阵图。，是无损的、既支持索引色也支持直接色的点阵图。

媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成。媒体查询允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容的本身，针对web网页应对不同型号的设备而做出相应的响应适配。使用@media查询，可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面。当重置浏览器大小时，页面也会根据浏览器的宽度和高度，重新渲染页面。

4、如果固有尺寸含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。2、HTML尺寸：只能通过HTML原生属性改变，如width、height的大小。1、内容的外观不受页面上的CSS的影响：样式表现在css作用域之外。1、如果没有CSS尺寸和HTML尺寸，则使用固有尺寸做为最终的宽高。2、如果没有CSS尺寸，则使用HTML尺寸做为最终的宽高。替换元素指的是通过修改某个属性值呈现的内容就可以被替换的元素。4、所有的替换元素都是内联水平元素。1、固有尺寸：替换内容原本的尺寸。

webpack通过安装css-loader和style-loader处理css，css-loader的作用是导入 CSS 模块，对 CSS 代码进行编译处理，style-loader的作用是创建style标签，把 CSS 内容写入标签。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。预处理器的特性可以更好的优化css，解决css的一些问题。PostCss和预处理器的不同就在于，预处理器处理的是类CSS，而 PostCss 处理的就是 CSS 本身。

1、关键选择器：选择器最后面的部分作为关键选择器，因为css选择符是从右向左进行匹配的，当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素。2、css单一样式：使用margin-left，margin-bottom这种，比使用margin复合属性更快。1、具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。2、如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签，过滤掉无关的规则。4、尽量少的用标签选择器，而是使用class选择器。

1、css选择器及优先级 选择器优先级：内联样式>id选择器>类选择器、属性选择器、伪类选择器>标签选择器、微元素选择器 注意： !important优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式优先级最低； 通用选择器、子选择器和相邻兄弟选择器的权重均为0；

SVG可缩放矢量图形是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素添加JavaScript事件。在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，浏览器会自动重现图形。矢量图也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。canvas是画布，是通过JavaScript来绘制2D图形，是逐像素进行渲染的。

如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器就会去对比新的manifest与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果有改变，就会重新下载资源并进行离线存储。h5的离线存储是基于一个新建的.appcache文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就像cookie一样被存储了下来，之后当网络在处于离线状态下时浏览器会通过被离线存储的数据进行展示。离线的情况下，浏览器会直接使用离线存储中的资源。

闭包就是一个函数对周围状态的引用捆绑到一起，可以让开发者从内部函数访问外部函数的作用域。简单来说，闭包可以让你在内层函数中访问到外层函数的作用域。闭包可以实现数据的私有化，避免全局污染。return nreturn f2 //返回内部函数f2。

b、怪异盒模型---在怪异盒模型中，width的宽度等于content+border+padding。a、标准盒模型---在标准盒模型中，width的宽度指的是content的宽度。切换盒子模型的话，使用box-sizing。