2020前端基础知识学习第三节

　　JS实现快速排序

　　思路：选择一个值作为基础数

　　答案：
　　　　function quickSort(arr, begin, end) {
　　　　　　let key = arr[begin];
　　　　　　let i = begin;

　　　　　　let j = end;

　　　　　　if (begin < end) {
　　　　　　　　while (i < j) {
　　　　　　　　　　while (i < j && arr[j] >= key) {
　　　　　　　　　　　　j --;
　　　　　　　　　　}

　　　　　　　　　　if (i < j) {

　　　　　　　　　　　　let tmp = arr[j];

　　　　　　　　　　　　arr[j] = arr[i];

　　　　　　　　　　　　arr[i] = tmp;　

　　　　　　　　　　}

　　　　　　　　　　while (i < j && arr[i] < key) {
　　　　　　　　　　　　i ++;
　　　　　　　　　　}

　　　　　　　　　　if (i < j) {
　　　　　　　　　　　　let tmp = arr[i];

　　　　　　　　　　　　arr[i] = arr[j];

　　　　　　　　　　　　arr[j] = tmp;
　　　　　　　　　　}

　　　　　　　　}

　　　　　　　　arr[i] = key;

　　　　　　　　quickSort(arr, begin, i - 1);

　　　　　　　　quickSort(arr, i + 1, end);
　　　　　　}
　　　　}
　　　　let arr = [47, 29, 71, 99, 78, 19, 24, 47];
　　　　quickSort(arr, 0, arr.length); // 执行结果：[19, 24, 29, 47, 47, 71, 78, 99]

　　实现一个merge函数

　　let arr = [{ start: 1, end: 2 }, { start: 2, end: 3 }, { start: 5, end: 6 }, { start: 3, end: 5 }, { start: 8, end: 9 }];

　　输出结果：[{ start: 1, end: 6 }, { start: 8, end: 9 }]

　　arr.sort((a, b) => {
　　　　return a.start - b.start;
　　}).reduce((acc, cur) => {
　　　　if (acc) {
　　　　　　let last = acc[acc.length - 1];

　　　　　　if (cur.start <= last.end) {
　　　　　　　　last.end = cur.end;
　　　　　　} else {
　　　　　　　　acc.push(cur);
　　　　　　}

　　　　　　return acc;
　　　　}

　　　　return [cur]; // 初始化值为数组第一个元素
　　}, null);

　　JS实现冒泡排序

　　思路：对数组中的元素两辆进行比较

　　答案：

　　bubbleSort(arr); // 执行结果：[29, 45, 51, 68, 68, 72, 97]]

　　Function.prototype.b = () => alert(1);
　　Object.prototype.a = () => alert(2);
　　function Foo() {};
　　var f1 = new Foo(); // 这里f1.__proto__指向Foo.prototype，Foo.prototype.__proto__指向Object.prototype, Object.prototype.__proto__指向null
　　f1.a(); // 打印2
　　f2.b(); // Object.prototype没有b方法，所以这里抛异常f1.b is not a function
　　附图：

　图片来自：https://blog.csdn.net/cc18868876837/article/details/81211729
5.

　　HTTP1/2/3

　　HTTP1.x 有连接无法复用、队头阻塞、协议开销大和安全因素等多个缺陷

　　HTTP2 通过多路复用、二进制流、Header 压缩等等技术，Server push，极大地提高了性能，但是还是存在着问题的

　　HTTP3使用QUIC作为底层支撑协议，该协议基于UDP，又取了 TCP 中的精华，实现了即快又可靠的协议
6.

　　前端性能优化有哪些方案？

　　1) HTTP部分

　　　　1.1 缓存控制，强制缓存、协商缓存

　　　　1.2 GZIP压缩

　　　　1.3 Cookies优化cookie体积以及合理设置cookie的路径和域名

　　　　1.4 减少HTTP请求数量CSS Sprites、图片Base64等

　　　　1.5 多域名分发解决浏览器并发下载资源限制

　　　　1.6 使用CDN

　　　　1.7 避免重定向和404

　　　　1.8 DNS预取

　　2) HTML

　　　　2.1 减少DOM操作

　　　　2.2 CSS放在head中引用，JS放在body结束位置

　　　　2.3 脚本延迟加载可以通过脚本的defer和async属性来异步加载脚本

　　　　2.4 减少使用iframe

　　3) CSS

　　　　3.1 开启GPU加速

　　4) JS

　　　　4.1 事件委托

　　　　4.2 代码压缩

　　　　4.3 懒加载（路由懒加载）、预加载

　　浏览器缓存原理

2020前端基础知识学习第三节

猜你喜欢