前端难点(性能优化)

异步请求进行同步化

发展史: ajax 嵌套 ==> promise 方式（插件： when.js、A+.js、promise.js ） => async await

几种常见异步编程方案

回调函数
事件监听
发布/订阅
Promise 对象

函数式编程、异步编程、点阵。

java 堆、栈、静态存储区
js 堆、栈

纯硬件

微机原理：

• 8 位单片机、16 位单片机；（跑的指令为汇编语言）
  32 位机指的是 CPU GPRs(General-Purpose Registers，通用寄存器)的数据宽度为 32 位，32 位指令集就是运行 32 位数据的指令，也就是说处理器一次可以运行 32bit 数据。32 位处理器的寻址空间最大为 4GB。另外 64 位的处理器在理论上则可以达到 1800 万个 TB，1TB 等于 1024GB，1GB 等于 1024MB。
  1byte = 8bit (1 字节 = 8 位)
• 32 位机 Math.pow(2, 32) = 4294967296; Math.pow(2, 32) / 1000 / 1000 / 1000 = 4.295GB; 芯片有 32+8 引脚,能寻找空间 0x00000000-0xFFFFFFFF, 能同时处理 32 字节内容;
• 64 位机 Math.pow(2, 64) = 18446744073709552000; Math.pow(2,64)/1000/1000/1000/1000/1000/1000 = 18.446EB; 芯片有 64+8 引脚,能寻找空间 0x0000000000000000-0xFFFFFFFFFFFFFFFF 能同时处理 64 字节内容

cpu 的运算速度主要取决于主频(cpu 内部时钟频率)。cpu 内部时钟频率可以无限提供，cpu 的主频可以无限提高。但是外部设置频率有限。一般 外频率*倍频=主频。
主频越高同样时间处理的代码就越多。

cpu(主频内部时钟、位数(决定有多少东西可以处理))

硬软结合和区分

物理内存：（大量晶体管(二极管)的电状态）
逻辑内存： 堆、栈、静态存储区

堆和栈是内存的使用和数据的组织方法，用来管理所使用的内存和数据。

问： 每个计算机都有它自己的内存，但内存不都是储存用的空间吗，那么想问，在物理内存中，内存是都是一样的形式吗？把内存分为几种不同的区域，如，堆区，栈区，静态区，是内存中本来就有这些区域呢，还是操作系统（还是编译器?）用内存管理的方式，把他虚拟划分为这几个部分来应对不同的要求（那么这样划分后，又有什么样的变化呢？）

这个涉及到了 MMU 了，实际的例如说有 4G 的内存，那么他实际上就 0X00000000-0XFFFFFFFF 这样的存储单元，并没有区分堆栈这些逻辑意义上的分区。
那么为什么要这样分区呢，如果不涉及保护模式，那么你想如果你写了好几个程序，那么每个程序是不是会有全局变量，局部变量以及常量，代码段这些东西，如果你不加以区分一股脑将这些东西散漫的放在这物理内存上，那么会显得无比杂乱。所以这时候就人为的搞了这些逻辑上的分区，通过编译器，将不同的变量类型放到不同的内存地段，例如 0x0000-0x00ff 是放代码的，0x0100-0x01ff 是放局部变量等等。
接着我们发现如果单纯在实模式下编程，很容易这样写代码 int*p=0x0000 如果这个 0x0000 地址是放操作系统的，那么你就直接能修改他，显然不合理，所以我们就有了一个保护模式，也就是通过段页来实现
那么到了后来，我们发现内存的容量太小，这时候我们就希望把硬盘的容量充当内存的容量，所以就搞了一个虚拟内存至于你说的内存管理，这个是OS中的MMU负责的（1），那么编译器其实干了将代码中原来一团的变量等给区分开来，当然这只是编译器中的一部分功能。

堆栈的出现是为了配合程序中的局部变量函数传参，动态分配，等这些问题才出现的吧

堆栈只是一个数据结构而已，只是个复杂一点的数组（支持 pop 和 push 操作），然而不管什么数据结构，都需要在内存中表现，就是这样了。
在程序运行期间，堆栈用于保存函数临时变量。操作系统管理中，堆栈的内存具有线程私有性，可读写，不可执行的权限。

堆栈的出现解决了什么问题

通常内存分为两部分：一部分是栈（stack，也称堆栈），另一部分是堆（heap）。
栈：可以看作是一摞卡片，最上面的卡片表示程序的当前作用域，这往往就是当前正在执行的函数。当前函数中声明的所有变量都置于栈顶帧中，即占用栈顶帧的内存，这就相当于一摞卡片中最上面的一张卡片。如果当前函数调用了另一个函数，举例来说，当前函数 foo()调用了另一个函数 bar()，就会在这摞卡片上再加一个新的卡片，这样 bar()就有了自己的栈帧（stack frame）以供使用。从 foo()传递到 bar()的所有 参数都会从 foo()栈帧复制到 bar()栈帧中。（注：栈帧很有意义，因为栈帧可以为每个函数提供一个独立的内存工作区。如果一个变量是在 foo()栈帧中声明的，那么调用 bar()函数不会对它带来改变，除非你专门要求修改这个变量。另外，foo()函数运行结束时，栈帧即消失，该函数中声明的所有变量都不会再占用内存了。）
堆：一段完全独立于当前函数或者栈帧的内存区。如果一个函数中声明了一些变量，而且希望当这个函数完成时其中声明的变量仍然存在，就可以将这些变量置于堆中。 堆和栈相比，没那么清晰的结构性。可以把堆可作是一“堆”小玩艺。程序可以在任何时间向这个“堆”增加新的东西，或者修改堆中已有的东西。

堆和栈的区别：

• 一、堆栈空间分配区别：
  • 1、栈（操作系统）：由操作系统自动分配释放 (3)，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；
  • 2、堆（操作系统）： 一般由程序员分配释放， 若程序员不释放，程序结束时可能由 OS 回收，分配方式倒是类似于链表。
• 二、堆栈缓存方式区别：
  • 1、栈使用的是一级缓存， 他们通常都是被调用时处于存储空间中，调用完毕立即释放；
  • 2、堆是存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定（并不是一旦成为孤儿对象就能被回收）。所以调用这些对象的速度要相对来得低一些。
• 三、堆栈数据结构区别：
  • 堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
  • 栈（数据结构）：一种先进后出的数据结构。（2）

纯软件

激活程序、操作系统、编译器及其他软件[数据库软件、服务器软件 iis…]（1）

数据结构与算法（排序算法、查找算法）（2）dom 树、虚拟 dom 以及比较算法; 虚拟化、linux 可做将部分硬盘转化为内存

GC 系统垃圾回收机制（3）性能优化 1 代码层面、2 网络层面

性能优化

性能高低 ==> 页面流畅、不卡顿 ==> fps>=24 (一般为 60),42ms 一帧动画(一幅画)切换速度 ==> 只有减少没有必要的代码运行才能保证 fps>=24。 ==> 性能优化
动画

• transform
• animetion
• 步进动画
• gif

《为什么认为游戏帧数要到 60 帧每秒才流畅，而大部分电影帧数只有 24 帧每秒？》 答：http://www.360doc.com/content/14/1212/20/14106735_432475244.shtml

• 性能优化
  • 网络层面
    • 减小请求大小
      • 1、 采用 webpack 打包可以进行压缩和混淆
      • 2、 包传递可以在服务器端开启 gzip 压缩
      • 3、 采用 cdn 加速
    • 减少请求个数
      • 1、 采用 webpack 打包合并压缩混淆打包
      • 2、 图片采用 scss 的自动合并为雪碧图，将多个小图合并为一个大图。到底将整个项目 icon 合并为一个 img 还是按功能去区分还是别。看具体情况。
      • 3、 上传的图片可以先进行压缩 eg:https://tinypng.com/
      • 4、 对于图片多的一次要并发几十张图片，由于浏览器的限制到一个域名并发最多 6 个。这是可以采用多个二级域名处理。 这样并发量会加快。
    • http 缓存
      • 1、 浏览器缓存或者通过 http 请求头设置缓存 ()
  • 代码层面
    • 首页可以采用直出加快首页加载速度
    • html 方面
      • 1、标签不要过分嵌套，嵌套太深，影响渲染性能同时影响样式寻找需要修饰的节点。不必要节点不要要去掉，不要多出不必要的渲染。
      • 2、使用语义化标签，不要遇到什么都使用 div。这样导致 css 多出很多没有必要的样式
    • css 方面
      • 1、在寻找节点方面，能通过 class 找到的，没有必要先通过原生标签查找然后再通过 class 找再并。这样会多一次无效的性能损耗。
      • 2、在使用 css 寻找节点前最好先采用 id 将页面划分功能块，每次 css 找节点尽可能在一个小范围查找。
      • 3、在含有节点动画的页面，需要运动的节点，最好脱离文档流。这样在运动是不至于后面元素回流（重排）导致重绘。重排很消耗性能，因为会导致重新计算。domTree① + cssTree② ==>③ renderTree④; ①②③④每一步都是一个复杂的算法，影响性能。能少运行尽量少执行;
    • js 方面
      • 1、绑定的事件在使用完后需要进行解除绑定;
      • 2、不需要使用的对象也需要及时手动释放;eg var obj ={name: ‘ft’, age: 30} 不用了释放 obj = null;
      • 3、尽量少用 js 闭包, 有些可以采用 es6 的指令 let 代替。被闭包的变量在堆进行 GC 回收时是不会被回收的
      • 4、可以根据项目需求情况适当缓存请求的数据。可以减少请求个数，提高程序性能。
    • img 加载
      • 1、按需加载，懒加载后续需要的资源

计算机网络与安全

1、不要使用 innerhtml
xxx.innerHTML = "<script>alert(1)</script>"

打包 grunt,gult,webpack,fs3,rallup …

模块化开发（cmd、amd、umd、require） seajs、requirejs、nodejs

es6,es7,es8…

写一个自定义事件

设计模式

vue

小程序

任何一个项目开发对需要面对的问题

开发流程
项目规范（代码规范、目录规范等）
模块化开发
基础工具方法

请求（https）
传值（组件传值，页面传值）
路由（route）
UI组件

主流问题

+ 原型与原型链
+ 作用域和闭包
+ 同步和异步
+ 事件循环机制
+ 算法
+ 设计模式
+ 事件代理
+ Gitflow工作流

前端相关零碎

高聚合低耦合