总结

潇洒重名了73553
273 阅读11分钟

css

重排(Reflow)：元素的位置发生变动时发生重排，也叫回流。此时在关键渲染路径中的 Layout 阶段，计算每一个元素在设备视口内的确切位置和大小。当一个元素位置发生变化时，其父元素及其后边的元素位置都可能发生变化，代价极高 重绘(Repaint): 元素的样式发生变动，但是位置没有改变。此时在关键渲染路径中的 Paint 阶段，将渲染树中的每个节点转换成屏幕上的实际像素，这一步通常称为绘制或栅格化

BFC中文翻译是块级格式化上下文，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素（浮动元素，绝对定位元素，行内块元素，overflow 值不为 visible 的块元素，弹性元素）

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

absolute和relative：1 absolute脱离文档流 2 absolute是绝对定位，绝对定位就是相对于父元素的定位，不受父元素内其他子元素的影响；而relative是相对定位，相对定位是相对于同级元素的定位，也就是上一个同级元素。

js

节流 ：函数节流就相当于技能冷却，执行一次后在一段时间内不能在执行了。防抖：规定在一个单位时间内，只能触发一次函数

原型： 万物皆对象，每个对象都有原型（null和undefined除外），你可以把它理解为对象的默认属性和方法。(child.proto === Child.prototype)

原型链：每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向）

数组的方法：join(结合字符串)，pop（删末尾），push，shift（开头删），unshift(开头添加)，length，delete（删除留undefined），splice（拼接，删除），concat，slice（截取），toString，every，some,filter,map,forEach,find,includes，reduce

forEach和map的区别:map会创建一个新数组，创建新空间，接受原始数组

事件捕获:当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。事件冒泡:当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

基本数据（栈）：Boolean，String，underfined，Null，Number，symbol。引用数据类型（堆）：Array，Object，引用数据类型的大小的不可控的，动态的，所以储存在堆中，判断数组：Array.isArray([])，Object.prototype.toString.call(arr) === '[object Array]'

symbols 是一种无法被重建的基本类型：1 作为对象的属性 2 阻止对象属性名冲突 3 模拟私有属性

instanceof用来检测某个对象是不是另一个对象的实例

bind(this,b,c)(),call(this,a,b,c),apply(this,[a,b,c]);

强缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。 协商缓存，让客户端与服务器之间能实现缓存文件是否更新的验证、提升缓存的复用率，将缓存信息中的Etag和Last-Modified 通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存

webpack的加载从右往左进行，Webpack选择了compose方式

优化Webpack的构建速度：1 使用高版本的 Webpack 4 2 缩小打包作用域 3 利用缓存提升二次构建速度

优化Webpack的打包体积：1 压缩代码 2 提取页面公共资源 3 图片压缩

webpack常用插件：html-webpack-plugin，extract-text-webpack-plugin（分离css）,CommonsChunkPlugin(提取代码中的公共模块),UglifyJsPlugin,HotModuleReplacementPlugin

浏览器事件循环：宏（setTimeout、setInterval、script（整体代码）、 I/O 操作、UI 渲染），微（new Promise().then(回调)、MutationObserve ），微任务永远在宏任务之前执行。

node事件循环：timers～I/O callbacks～idle, prepar～poll～check～close callbacks process.nextTick不在Event Loop的任何阶段，他是一个特殊API，他会立即执行，然后才会继续执行Event Loop

一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数

Web Socket是基于TCP的一个全双工通信协议。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。 Service Worker实际上是浏览器和服务器之间的代理服务器

函数柯里化：是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术

new做了啥：1、创建一个空对象。2、设置原型链。3、让Func的this指向obj，并执行Func函数体 4 判断Func的返回值类型

commonJs是被加载的时候运行，esModule是编译的时候运行 commonJs输出的是值的浅拷贝，esModule输出值的引用 commentJs具有缓存。在第一次被加载时，会完整运行整个文件并输出一个对象，拷贝（浅拷贝）在内存中。下次加载文件时，直接从内存中取值

跨站请求伪造：Token 验证，Referer 验证，只接受本站的请求，服务器才做响应；如果不是，就拦截 跨域脚本攻击：通过输入或者评论的操作，向你的页面注入脚本，1 转义字符 2 建立白名单 HTTPHeader 中的 Content-Security-Policy或者 meta 标签的方式

Promise有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)，Promise.all()，Promise.race()，Promise.resolve()，现有对象转为Promise对象

vue

vue生命周期：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，activated，deactivated，beforeDestroy，destroyed，errorCaptured

Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树 diff 算法，vue2双端比较，vue3最长递增子序列，react递增法

因为对象是一个引用数据类型,如果data是一个对象的情况下会造成所有组件共用一个data。而当data是一个函数的情况下,每次函数执行完毕后都会返回一个新的对象,这样的话每个组件都会维护一份独立的对象

computed只有当页面数据变化时才会计算，当数据没有变化时，它会读取缓存。而watch每次都需要执行函数，methods也是每次都需要执行 数据变化时执行异步操作，这个时候使用watch是合适的

v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

双向数据绑定：通过Object.defineProperty()来实现数据劫持的，dep 做依赖收集，Watcher观察数据的变化，然后重新编译模板，渲染到视图上

nextTick延时函数：先判断是否原生支持promise，如果支持，则利用promise来触发执行回调函数；否则，如果支持MutationObserver，则实例化一个观察者对象，观察文本节点发生变化时，触发执行所有回调函数。 如果都不支持，则利用setTimeout设置延时为0

keep-alive：LRU 缓存淘汰算法，如果数据最近被访问过,那么将来被访问的几率也更高

vm.$set()：如果目标是数组,使用 vue 实现的变异方法 splice 实现响应式 如果目标是对象,判断属性存在,即为响应式,直接赋值 如果 target 本身就不是响应式,直接赋值 如果属性不是响应式,则调用 defineReactive 方法进行响应式处理，主要根据ob.dep.notify()，这个里面放着订阅者模式里面的订阅者，通过notify来通知订阅者做处理

vue超长列表优化，冻结对象，vue-virtual-scroll-list

v-modle 绑定vue值，可以用计算数据set和get

vue数组变异方法：push，pop，shift，unshift，splice，sort，reverse

其他

TCP与UDP区别总结：

  1. TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接
  2. TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付
  3. TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）
  4. 每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信
  5. TCP首部开销20字节;UDP的首部开销小，只有8个字节
  6. TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道

输入url页面发生事情：

  • 首先浏览器主进程接管，开了一个下载线程。
  • 然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次捂手，等待响应，开始下载响应报文。
  • 将下载完的内容转交给Renderer进程管理。
  • Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的，所以一般我会把link标签放在页面顶部。
  • 解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的重新下载资源。
  • css rule tree和dom tree生成完了之后，开始合成render tree，这个时候浏览器会进行layout，开始计算每一个节点的位置，然后进行绘制。
  • 绘制结束后，关闭TCP连接，过程有四次挥手。

css在加载过程中不会影响到DOM树的生成，但是会影响到Render树的生成，进而影响到layout，所以一般来说，style的link标签需要尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，解析DOM树下的body节点和加载css样式能尽可能的并行，加快Render树的生成的速度。

js脚本应该放在底部，原因在于js线程与GUI渲染线程是互斥的关系，如果js放在首部，当下载执行js的时候，会影响渲染行程绘制页面，js的作用主要是处理交互，而交互必须得先让页面呈现才能进行，所以为了保证用户体验，尽量让页面先绘制出来。

H5的新特性

  1. 用于绘画 canvas 元素。
  2. 用于媒介回放的 video 和 audio 元素。
  3. localStorage，sessionStorage 的数据在浏览器关闭后自动删除。
  4. 语意化更好的内容元素，比如 article、footer、header、nav、section
  5. 表单控件，calendar、date、time、email、url、search。

（1）.HTTP2使用的是二进制传送，HTTP1.X是文本（字符串）传送。（2）.HTTP2支持多路复用（3）.HTTP2头部压缩 （4）.HTTP2支持服务器推送

垃圾回收：周期性运行

  1. 标记清除，就是当变量进入执行环境的时候标记为"进入环境",离开执行环境的时候标记为"离开环境"
  2. 引用计数,跟踪记录每个值被引用的次数,引用次数是0清除

对称加密：就是有一个密钥，它可以对一段内容加密，加密后只能用它才能解密看到原本的内容

非对称加密：有两把密钥，通常一把叫做公钥、一把叫做私钥，用公钥加密的内容必须用私钥才能解开，同样，私钥加密的内容只有公钥能解开。

HTTPS 的特点：采用混合加密技术，中间者无法直接查看明文内容，通过证书认证客户端访问的是自己的服务器，防止传输的内容被中间人冒充或者篡改

浏览器内核：IE内核(Trident)，Firefox（Gecko）Safari（Webkit），Chrome（Blink）Opera（Presto）

小程序

1、原生组件遮盖的问题，能通过cover-view和cover-image组件(其实这两个组件也是原生组件)来进行遮盖；

2、小程序有些图片是不支持base64格式的，例如cover-image，地图marker的iconPath等。在配合webpack构建小程序代码时需要注意不要对这些图片进行base64转换。

3 wx.navigateTo 新窗口打开页面 新页面有返回按钮 ，wx.redirectTo 关闭当前页面，跳转到应用内的某个页面 新页面没有返回按钮

4 部分CSS3属性不能用，transform:rotate

5 在微信开发者工具中，Styles不会显示css伪类

avatar
文章
阅读
粉丝