前端面试总结

最新推荐文章于 2023-03-20 17:26:05 发布

PickSeven

最新推荐文章于 2023-03-20 17:26:05 发布

阅读量231

点赞数

分类专栏：前端学习笔记文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/weixin_42554695/article/details/115499049

版权

前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 防抖和节流
在这里插入图片描述
什么是防抖和节流，他们的应用场景有哪些？

//防抖第一次立即执行
function debounceImmediate(f, wait){
    let timer;
    let flag = true;
    return (...args) => {
        clearTimeout(timer);
        if (flag) {
            f(...args);
            flag = false;
        }
        timer = setTimeout(() => {
            flag = true;
        }, wait);
    }
}
//防抖合并实现（通过传参判断是否需要第一次立即执行）
function debounceMerge(f, wait, isImmediate) {
    let timer;
    let flag = true;
    return (...args) => {
        clearTimeout(timer);
        if (flag) {
            flag = false;
            isImmediate && f(...args);
        }
        timer = setTimeout(() => {
            !isImmediate && f(...args);
            flag = true;
        }, wait);
    }
}
//节流第一次立即执行
function throttleImmediate(f, wait) {
    let timer;
    let flag = true;
    return (...args) => {
        if (timer) return;
        if (flag) {
            f(...args);
            flag = false;
            timer = setTimeout(() => {
                flag = true;
                timer = null;
            }, wait);
        }
    } 
}
//节流合并实现（通过传参判断是否需要第一次立即执行）
function throttleMerge(f, wait, isImmediate) {
    let timer;
    let flag = true;
    return (...args) => {
        if (timer) return;
        if (flag) {
            isImmediate && f(...args);
            flag = false;
            timer = setTimeout(() => {
                !isImmediate && f(...args);
                flag = true;
                timer = null;
            }, wait);
        }
    }
}

2. HTTP缓存
在这里插入图片描述
彻底弄懂HTTP缓存机制及原理

3. 浏览器同源策略
在这里插入图片描述
浏览器同源政策及其规避方法
 跨域资源共享 CORS 详解

4. 前端安全
在这里插入图片描述

前端安全美团技术团队

5. HTTP 2.0有哪些特性
在这里插入图片描述
HTTP----HTTP2.0新特性

6. 原型、原型链
在这里插入图片描述
一张图搞定JS原型&原型链
 原型链的面试题

7. 闭包
在这里插入图片描述
深入理解javascript原型和闭包系列
 闭包，看这一篇就够了——带你看透闭包的本质，百发百中

8. 作用域、作用域链
在这里插入图片描述
深入理解JavaScript作用域和作用域链

9. JS 继承方式
在这里插入图片描述
js继承的6种方式

10. JS 深拷贝、浅拷贝
在这里插入图片描述
深拷贝与浅拷贝的区别，实现深拷贝的几种方法
 JavaScript 如何完整实现深度Clone对象？

11. JS 对象的遍历方法
在这里插入图片描述
js遍历对象的几种方法

12.Promise函数、async/await
在这里插入图片描述
Promise对象
 简单实现Promise
async/await 原理及执行顺序分析

13. 用 setTimeout 实现 setInterval、clearInterval
在这里插入图片描述

var timeWorker = {};
var mySetInterval = function (f, time) {
	//用来标识定时器
	let key = new Symbol();
	//定义一个递归函数，持续调用定时器
	var excute = function (f, time) {
		timeWorker[key] = setTimeout(function() {
			f();
			excute(f, time);
		}, time);
	}
	excute(f, time);
	return key;
}
var myClearInterval = function (key) {
	if (timeWorker.hasOwnProperty(key)) {
		clearTimeout(timeWorker[key]);
		delete timeWorker[key];
	}
}

如何用setTimeout实现setInterval、clearInterval

14. JS 事件循环机制
在这里插入图片描述
JavaScript 运行机制详解：再谈Event Loop
Js_事件循环机制、微任务、宏任务

15. 八大排序
在这里插入图片描述

数据结构常见的八大排序算法（详细整理）
JS 实现八大排序及分析
 JS实现全排列

16. 用 Promise 函数实现 Ajax 请求

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject) {
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText()));
      }
    };
    const client = new XMLHttpRequest();
    client.open('GET', 'url');
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
  });
  return promise;
}

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

17. vue3 有哪些特性？
vue3 迁移指南

18. ES6 新增了哪些特性/内容？
在这里插入图片描述
ES6 入门教程—阮一峰

19. 你是怎么学习前端的？
在这里插入图片描述
20. 什么是“大前端” ？
大前端是什么？

21. Node.js 有了解过吗？
Node.js 教程

22. HTTP、HTTPS
在这里插入图片描述
HTTP与HTTPS的区别

23. SSL 、TSL、CA
在这里插入图片描述
HTTPS 和 SSL/TLS 协议[1]：背景知识、协议的需求、设计的难点
 HTTPS 和 SSL/TLS 协议[2]：可靠密钥交换的难点，以及身份认证的必要性
 HTTPS 和 SSL/TLS 协议[3]：密钥交换（密钥协商）算法及其原理

数字证书及 CA 的介绍
 CNNIC
CNNIC 证书 clear

SSL/TLS协议运行机制的概述
 SSL与TLS的区别以及介绍

24. CSS 水平、垂直居中怎么实现？
CSS水平垂直居中解决方案(6种)

25. flex 布局
Flex 布局教程：语法篇

26. 浏览器从输入一个 url 到页面展示经过了什么？
从输入 URL 到页面展示到底发生了什么？

27. 浏览器渲染过程？
【干货】十分钟读懂浏览器渲染流程

28. BFC是什么？
BFC原理详解

29. 有用过 webpack 吗？
webpack

30. Cookie, LocalStorage 与 SessionStorage？
详说 Cookie, LocalStorage 与 SessionStorage
cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式

31. JS 数组、字符串有哪些方法和属性？
Array—MDN
String—MDN

32. 怎么实现文件上传？
JS之——纯js实现最简单的文件上传(后台使用MultipartFile)

33. 前端性能优化方式有哪些？
前端性能优化 24 条建议（2020）

34. vue 的双向绑定原理是什么？怎么实现？
Object.defineProperty()—MDN
vue 的双向绑定原理及实现

35. vue 中父组件、子组件怎么通信？
vue中8种组件通信方式, 值得收藏!

36. 计算机网络系统性扫盲
计算机网络通讯的【系统性】解读——从“基本概念”到“OSI 模型”

37. DNS原理
DNS 原理解读

38. 首屏时间与白屏时间
首屏时间(FCP) VS 白屏时间(FP)

39. TCP三次握手与四次挥手
彻底搞懂TCP协议：从 TCP 三次握手四次挥手说起

40. 执行上下文与this
JavaScript漫谈之执行上下文与this

41. DOM对象、BOM对象
BOM对象和DOM对象

42. ajax/XHR
AJAX详解

43. 正则表达式
正则表达式

44. JavaScript的装载和执行
javascript的装载和执行

45. 事件冒泡/捕获、事件委托
前端面试题：JS的事件委托-事件的捕获与冒泡

46. javascript设计模式
JavaScript设计模式es6（23种)

47. 面向对象编程
看完这篇，真正理解JS面向对象编程思想 - 掘金

48. HTML5新特性
Service Worker - 概念篇
 Web Workers 的基本信息
 WebWorker简介
 Canvas - 廖雪峰的官方网站
 Canvas简介
 History API 使用指北

49. CSS 文档流
CSS 文档流

PickSeven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
前端面试总结

1. 防抖和节流什么是防抖和节流，他们的应用场景有哪些？//防抖第一次立即执行function debounceImmediate(f, wait){ let timer; let flag = true; return (...args) => { clearTimeout(timer); if (flag) { f(...args); flag = false; }
复制链接

扫一扫

专栏目录