jrNote

2019

步伐规划

  1. 完善简历
  2. 多刷面试题
  3. vue 系列源码
  4. 组件库开发
  5. webpack 深入系列
  6. 表达训练（自信心，肢体语言）

前言

鉴于实力水平的提高，笔记会更加简洁扼要，分类的标准是知识（问题）的难度。

世界轮廓：性能优化，移动端经验，node 经验，算法，网络，编译原理，

一. 基础题

1. 盒模型

  border-box （怪异）
  content-box （标准）

2. http请求缓存

缓存可以说是性能优化中简单高效的一种优化方式了,拓展涉及前端工程化工具，状态码，多种重定向。

这里讲的是response header中的字段。
字段记忆不清晰.
(1) 强缓存cache-control： max-age(http 1.1缓存最长时间)  public 代理服务器/ private 客户端 immutable:它这么设置的意思是为了让用户在刷新页面的时候不要去请求服务器 no-cache 跳过设置强缓存，不影响协商缓存   no-store 禁用所有缓存 ; expires(http1.0 版本)
(2) 协商缓存(eTag last-modified) 
请求回来时 带上etag（hash） last-modified:文件的修改时间，精确到秒 再次请求查询是否缓存过期时 带上if-modified-since /if-none-match

发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->没过期-->返回304状态码-->客户端用缓存的老资源。

发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->过期-->返回200状态码-->客户端如第一次接收该资源一样，记下它的cache-control中的max-age、etag、last-modified等。

优点：减少请求数量，节约带宽，降低服务器的压力

参考资料 缓存位置

3. 图片类型

拓展：图片在项目中的使用情况，性能的把控以及技巧

.jpg png gif bmp svg webp ,了解字体图标库,图标库可以相当于文字库，对应图标用一个unicode 码表示，另外可以设置颜色，非常方便

  • jpg 有损
  • png 无损, 支持透明度，png-24 支持更复杂的渐变
  • webp 图片数据量大时可以使用,注意兼容性问题。

webp 在减少图片体积和流量上的效果如何？—— WebP 技术实践分享

4. 了解各种网络协议 tcp/ip协议簇，http,https，websocket,udp,tcp，ssl,ftp 协议,DNS 域名系统

应用层(http,ftp)，传输层(tcp,udp)，网络层(ip)，链路层（ARP,RAPR）

超文本传输协议

  • http1.0 keep-alive 实现tcp 长连接

  • http/1.1 协议

  1. 定义特点：用于客户端和服务端进行通信，基于tcp 的应用层协议，无状态协议（新的请求没有记录上次请求的信息，两者没有关系），所以cookie 一定程度上也是为了存储状态，大小在4kb 左右
  2. 组成：请求报文是由请求方法、请求 URI、协议版本、可选的请求首部字段和内容实体构成的。是由请求方法、请求 URI、协议版本、可选的请求首部字段和内容实体构成的。
  3. 新增了管道，不再需要声明 keep-alive 复用 tcp 链接
  • http 2.0 协议 新增多路复用，提高请求效率，基于流的概念，多个请求是用不同流，解决了1 版本连续请求队头阻塞的问题

5. 原型/原型继承/闭包/this

  参考高级程序设计,js 忍者秘籍，你不知道的javascript 核心技术下

6. 事件循环

  js 单线程， （执行栈）任务队列（时间队列/微任务队列） ，宏任务, 微任务

7. 跨域

  1 同源策略
  浏览器禁止从一个源加载的文档脚本去请求另外一个源的资源。出于安全考虑

参考网站

8. 堆栈内存管理

 变量的存储 ，基本类型栈  引用放在堆  闭包数据也放在堆

9. 移动端适配

移动端适配 移动端适配 移动端适配

10. BFC

  • 块级格式上下文,一个独立的容器，不受外部影响
  • 5个条件 position:fixed/absolute; float; 根元素；display：nline-block，table-cell，table-caption；overflow 除了 visible 以外的值
  • 作用 (可以清除浮动/2个不同bfc的 元素不会外边距重叠)

11. 清除浮动

.clearfix:after{
  content:'';
  display: block;
  height:1px;
  clear: both;
  visibility: hidden;
}

12. get post 的区别

   本质都是tcp 链接，只是http 不一致。
  * get 携带参数在url 上， post 在body 或者url 上
  * 参数 长度不一样，post 没有长度限制
  * get 只能传递 ascle 码, post 还能传递2进制
  * 编码方面 get 是url 编码，post 是多种编码
  * get 回退时无害，post 回退时会重新提交请求

13. 原型链的一些知识

  • instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

foo instanceof Foo===true

  • 继承

js 是面向对象的语言，跟面向类语言不同，继承不是通过复制构造函数的属性，而是通过属性prototype实现对象之间的关联，委托间接实现继承

es5 原型链继承, 构造函数继承

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/29

14. 异步操作

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。

发展历史：

  • 回调函数
  • promise
  • generator
  • async/await

15. 数组的三种判断方法

instanceof 第3，扩展来说只能检测对象。不能检测原始值

Object.prototype.toString.call() 最好

Array.isArray() ie8 兼容性

16. 重绘和重排(回流)的概念，以及使用中的注意事项

参考：https://github.com/sisterAn/blog/issues/33

1、渲染机制

（1）html 解析成dom， css 解析成cssom ，2者组成RenderTree ，此时节点的样式和位置都能知道了 （2）根据流式布局渲染，table 布局需要多次计算，有关资料显示约3倍，影响性能，逐步被抛弃

2、重绘，回流

  • 重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。

  • 回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

3、 浏览器优化

现代浏览器大多都是通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有会影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值。

主要包括以下属性或方法：

  offsetTop、offsetLeft、offsetWidth、offsetHeight
  scrollTop、scrollLeft、scrollWidth、scrollHeight
  clientTop、clientLeft、clientWidth、clientHeight
  width、height
  getComputedStyle()
  getBoundingClientRect()
  所以，我们应该避免频繁的使用上述的属性，他们都会强制渲染刷新队列。

4、 减少重绘与回流

（1）CSS

  • 使用 transform 替代 top

  • 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局

  • 避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。

  • 尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。

  • 避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。

  <div>
    <a> <span></span> </a>
  </div>
  <style>
    span {
      color: red;
    }
    div > a > span {
      color: red;
    }
  </style>

对于第一种设置样式的方式来说，浏览器只需要找到页面中所有的 span 标签然后设置颜色，但是对于第二种设置样式的方式来说，浏览器首先需要找到所有的 span 标签，然后找到 span 标签上的 a 标签，最后再去找到 div 标签，然后给符合这种条件的 span 标签设置颜色，这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽量少的添加无意义标签，保证层级扁平。

  • 将动画效果应用到position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame，详见探讨 requestAnimationFrame。

  • 避免使用CSS表达式，可能会引发回流。

  • 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。

  • CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

（2）JavaScript

  • 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
  • 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
  • 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
  • 对具有复杂动画的元素使对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。用绝对定位

注意：回流必定会发生重绘，重绘不一定会引发回流。

17. == 使用类型隐式转换

valueOf / toString

 if(a==1&&a==2&&a==3）{
   console.log('1')
 }

 var a={
   i:0,
   toString(){
     return ++this.i
   }
 }

18. 作用域的一道小题

        var a = 10;
        (function () {
            console.log(a)
            a = 5
            console.log(window.a)
            var a = 20;   //测试去掉不去掉的区别
            console.log(a)
        })()

19.为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？

  • 没有跨域问题，一般这种上报数据，代码要写通用的；（排除ajax）
  • 不会阻塞页面加载，影响用户的体验，只要new Image对象就好了；（排除JS/CSS文件资源方式上报）
  • 在所有图片中，体积最小；（比较PNG/JPG）（最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节）

20. div 垂直水平居中 （常考问题）

flex+属性,grid,absolute,flex+/margin

21. Proxy 比 Object.defineProperty 好的地方

Object.defineProperty无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy可以劫持整个对象，并返回一个新的对象。
Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

22. opacity， display，visible

opacity 可以点击 visible 不可以点击

23. 箭头函数 和 构造函数对比

  • this 创建时确定的。而不是等执行时根据上下文情况确定
  • 没有arguments 字段 可以用...args
  • 没有prototype 属性

24. ast 抽象语法树

参考教程

25. BFC,IFC,GFC,FFC

BFC（Block formatting contexts）：块级格式上下文 页面上的一个隔离的渲染区域，那么他是如何产生的呢？可以触发BFC的元素有float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC有什么作用呢？比如说实现多栏布局’

IFC（Inline formatting contexts）：内联格式上下文 IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同 IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。 那么IFC一般有什么用呢？ 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC（GrideLayout formatting contexts）：网格布局格式化上下文 当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC（Flex formatting contexts）:自适应格式上下文 display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

26. input 原生事件有哪些

change(blur 时才会促发), input(每一个都促发),keypress,keydown ,keyup, focus,blur,mousedown, mouseup,compositionstart,compositionupdate,compositionend

27. input type 类型有哪些(你不是说你基础扎实吗)

text, button,password,radio,checkbox, file ,submit

28. html 标签

  • 按照html 文件回答

html，body,meta, div，span， input，label,textarea, a， img ，video， audio, header,footer,asider,article ,section....

29. ECMAScript,DOM,BOM

  • ECMAScript:js 核心语言功能
  • DOM: 操作网页的部分方法接口
  • BOM: 操作涉及浏览器窗口的方法或接口

30.script 中的属性以及DOCTYPE 作用

  • src type async（延迟执行）
  • DOCTYPE 告诉浏览器解析html 的原则
  • 标识符的规则 $ _ 字母

31.值类型以及怎么判断类型，判断空值（细节严谨的写法）

String,Number,Boolean,Null,Object,Undefined, Symbol

typeof instanceof isNaN Object.prototype.toString() ===

业务简单判断：!undefined !null 注意会排除掉0 if(obj)； 比较好的用： if(obj!==undefined&&obj!==null) 一般封装function使用

32. 运算符

弱势：位操作符，优先级高低方面。(用得比较少) 其他细节例如比较全等一些特殊情况会发生隐式类型转换 例如 false==0 ,使用es6 === 不会出现这种问题

  • ~8 -9 非
  • & 与
  • | 或
  • ^（异或） >>(右移) <<（左移） >>>(无符号右移) <<<（无符号左移） !(逻辑非) && ||（&& ||有一阵子以为是返回boolean值，实际上并不是）
  • arguments 严格模式修改不会修改参数值。非严格模式会修改参数

33. 垃圾回收机制

  1. 标记清除法
  2. 引用计数法 循环引用会不删。

二. 中等题

1. webpack 的优化做了哪些

2. http2 多路复用

(1) 在 HTTP/1 中，每次请求都会建立一次HTTP连接，也就是我们常说的3次握手,4次挥手，这个过程在一次请求过程中占用了相当长的时间，即使开启了 Keep-Alive ，解决了多次连接的问题，但是依然有两个效率上的问题：

  • 第一个：串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒，依此类推。（注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输）
  • 第二个：连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。 HTTP/2的多路复用就是为了解决上述的两个性能问题。
  • 在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。 帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。 多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。

(2) 简单版回答： HTTP/2 复用 TCP 连接，在一个连接里，客户端和浏览器都可以同时发送多个请求或回应，而且不用按照顺序一一对应。

举例来说，在一个TCP连接里面，服务器同时收到了A请求和B请求，于是先回应A请求，结果发现处理过程非常耗时，于是就发送A请求已经处理好的部分， 接着回应B请求，完成后，再发送A请求剩下的部分。

历史原因解释：

1、HTTP/1.0 版本 该版本主要缺点是，每个TCP连接只能发送一个请求。发送数据完毕，连接就关闭，如果还要请求其他资源，就必须再新建一个连接。为了解决这个问题，需要使用 Connection: keep-alive 这个字段。

2、HTTP/1.1 版本 该版本引入了持久连接（persistent connection），即 TCP 连接默认不关闭，可以被多个请求复用，不用声明 Connection: keep-alive。还引入了管道机制（pipelining），即在同一个TCP连接里面，客户端可以同时发送多个请求。这样就进一步改进了HTTP协议的效率。

虽然1.1版允许复用TCP连接，但是同一个TCP连接里面，所有的数据通信是按次序进行的。服务器只有处理完一个回应，才会进行下一个回应。要是前面的回应特别慢，后面就会有许多请求排队等着。这称为"队头堵塞"（Head-of-line blocking）。

3. vuex vs redux

（1）本质：共享状态的统一管理，来源于软件通用思想： 隔离变化(一些容易变化的地方找到共性，隔离出来，不要去影响其他的代码)，约定优于配置(view 文件夹里只能放视图，不能放过滤器，过滤器必须放到 filter 文件夹里，那这就是一种约定，不用谢大量的配置，nuxt 就是这方面的例子) （2）vuex，redux 思想大致相同，全局维护一个统一的store ，好处是方便查看整个状态的快照。单向数据流，不直接修改state ，修改数据时自动更新view。 mobx 则是全新的体系，所有用到的地方都更新

参考资料：Vuex、Flux、Redux、Redux-saga、Dva、MobX

4. vue 双向绑定原理（重新看源码巩固）

  • Observer 给数据增加 getter 和 setter ,用于依赖收集 和 派发更新
  • Watcher
  • Dep 有一个target

5. 你做过哪些性能优化？

  1. 打包体积 (剥离第三方库/不打包没使用到的css/)
  2. 缓存
  3. webpack 打包优化
  • sourcemap 不开启或者设置为hidden-source-map
  • 将第三方库外挂到cdn, 生产环境注意使用最小化的库，例如vue采用最小化的运行时版本，项目已经预编译过
  • 开启gzip ,路由懒加载
  1. prefetch

6. https 协议的认知

1、首先什么是HTTP协议? http协议是超文本传输协议，位于tcp/ip四层模型中的应用层；通过请求/响应的方式在客户端和服务器之间进行通信；但是缺少安全性，http协议信息传输是通过明文的方式传输，不做任何加密，相当于在网络上裸奔；容易被中间人恶意篡改，这种行为叫做中间人攻击；

2、加密通信： 为了安全性，双方可以使用对称加密的方式key进行信息交流，但是这种方式对称加密秘钥也会被拦截，也不够安全，进而还是存在被中间人攻击风险； 于是人们又想出来另外一种方式，使用非对称加密的方式；使用公钥/私钥加解密；通信方A发起通信并携带自己的公钥，接收方B通过公钥来加密对称秘钥；然后发送给发起方A；A通过私钥解密；双发接下来通过对称秘钥来进行加密通信；但是这种方式还是会存在一种安全性；中间人虽然不知道发起方A的私钥，但是可以做到偷天换日，将拦截发起方的公钥key;并将自己生成的一对公/私钥的公钥发送给B；接收方B并不知道公钥已经被偷偷换过；按照之前的流程，B通过公钥加密自己生成的对称加密秘钥key2;发送给A； 这次通信再次被中间人拦截，尽管后面的通信，两者还是用key2通信，但是中间人已经掌握了Key2;可以进行轻松的加解密；还是存在被中间人攻击风险；

3、解决困境：权威的证书颁发机构CA来解决； 3.1制作证书：作为服务端的A，首先把自己的公钥key1发给证书颁发机构，向证书颁发机构进行申请证书；证书颁发机构有一套自己的公私钥，CA通过自己的私钥来加密key1,并且通过服务端网址等信息生成一个证书签名，证书签名同样使用机构的私钥进行加密；制作完成后，机构将证书发给A； 3.2校验证书真伪：当B向服务端A发起请求通信的时候，A不再直接返回自己的公钥，而是返回一个证书； 说明：各大浏览器和操作系统已经维护了所有的权威证书机构的名称和公钥。B只需要知道是哪个权威机构发的证书，使用对应的机构公钥，就可以解密出证书签名；接下来，B使用同样的规则，生成自己的证书签名，如果两个签名是一致的，说明证书是有效的； 签名验证成功后，B就可以再次利用机构的公钥，解密出A的公钥key1;接下来的操作，就是和之前一样的流程了； 3.3：中间人是否会拦截发送假证书到B呢？ 因为证书的签名是由服务器端网址等信息生成的，并且通过第三方机构的私钥加密中间人无法篡改； 所以最关键的问题是证书签名的真伪；

4、https主要的思想是在http基础上增加了ssl安全层，即以上认证过程

6. https 握手过程

  1. 客户端 发送协议号，支持的加密方法，一个随机数字 给 服务器

  2. 服务器确定加密方法，给出数字证书， 服务器生成随机数

  3. 客户端确认数字证书有效，生成随机数，用数字证书中的公钥给随机数加密，发送给客户端

  4. 服务端使用自己的私钥，解析随机数

  5. 客户端使用3个随机数，生成对话密钥，加密接下来对话过程

7. https客户端如何确定数字证书的合法性

  1. 检测证书的有效时间等信息，
  2. 根据证书机构的公钥客户端生成签名同证书签名比较，签名相同则证明证书合法

8. 怎么设计登录模块（open问题）

  1. 判断哪些功能是需要用到权限的，哪些不用

  2. 登录方式支持几种，账号，手机号，第三方登录

  3. 登录有效期限设置多长？

9. ioc 和 aop 的理解

ioc 控制反转，上层不再直接初始化下层，而是通过注入依赖，让容器初始化下层，降低耦合度。

aop 面向切面编程，使用预编译技术添加功能，可以在不修改源代码的基础上给程序动态统一添加功能，减低耦合度 ，日志，事务管理，异常处理等

10. 怎么搭建一个项目，考虑哪些东西（open问题）

11. 前端埋点

  1. 目的 获取用户行为数据，为产品的优化指明方向，前端监控（数据，性能，异常）

  2. 分类

  • 手动埋点 （开发人员开发代码实现埋点功能，可自定义化程度高，缺点是：与业务耦合，代码维护难度高，开发成本较大）

  • 可视化埋点 （能由产品运营维护，不需要程序员，本质是使用程序插入埋点代码）

  • 无痕埋点 （所有的操作数据上传，由后台过滤出有用的信息,流量消耗压力大，数据成本高

    实例：

    1. 通过window 获取用户信息，浏览器语言，访问入口等。
    2. 通过performance 实现性能监控 为了准确获取我们的 web 应用程序的性能特性，我们就得知道该应用程序在各个阶段的响应时间，比如：DNS 解析时间、TCP 建立连接时间、首页白屏时间、DOM 渲染完成时间、页面 load 时间等。好在这些信息都可以通过 Performance 接口获取相关信息来计算得出。
    3. css 埋点
          <style>
        .link:active::after {
          color: red;
          content: url("http://192.168.1.110:3000/someapi?params=someInfo");
        }
      </style>
      <a class="link btn">点击访问</a>

12. 浏览器兼容性问题

三. 难题

技术较难，或者是综合性较强的题

1. 对于持续集成的理解

持续集成是定期的集成所有人员的开发成果。做统一构建和测试，可以规范开发流程，并很大程度上提高效率

2大特点：自动化；制度化（数据采集，代码校验）

2. 对于前端性能的理解

-指标

  • 页面加载性能 （最重要，用户加载时见，首屏加载时间，秒开率）
  • 动画和操作性能
  • 内存和电量

  • 技术方案 -----》 体积/请求数/缓存 还有一些代码上的优化（js,dom,这些比较细节，另外影响很大，对我这个经常写出bug 的人来说）

  • 其他一些备注：

  • 让移动端首屏数据小于14k
  • 图片大小小于200k ,此时载入速度基本一致
  • 多用css 动画， js 动画需要使用定时器，会导致频繁渲染,多使用requestAminationFrame,使用CSS3 transitions，CSS3 3d，transforms，Opacity，Canvas等来触发GPU渲染。
  • 代码中合理利用缓存，例如 canvas 绘制的数据,不做缓存出现卡顿问题。
  • 写代码时像websocket 这些不能频繁创建，事件的绑定需要及时销毁，避免出现内存泄漏问题
  • 安卓下多使用webp
  • 移动端优化，长列表滚动优化，函数防抖和函数节流，使用touchstart，touchend代替click，html的viewport设置，开启gpu渲染加速。
  • 技术实施

制度化+ 自动化

3. http 优化，webpack 优化， vue 原理 ，vue 项目中的优化， 前端工程。

上次更新: 2020-2-3 17:24:55

← 面试系列2 →