- 博客(56)
- 收藏
- 关注
RSS订阅原创 前端项目的性能优化
要想学好项目优化，一定要懂得底层原理。（1）减少HTTP请求次数和大小资源合并压缩 如：css合并，压缩图片懒加载音视频走流文件（2）减少DOM的回流和重绘放弃传统的DOM的操作，基于vue，react开始数据影响视图 mvvm mvc virtural dom dom diff ......分离读写操作（现代浏览器都有渲染队列的机制）offsetTop offsetLeft offsetWidth offsetHeight clientTop clientLeft
2023-06-07 17:28:07
700
原创 前端的路由模式
1.hash模式hash模式背后的原理是onhashchange事件，可以在window对象上监听这个事件：<!DOCTYPE html><html lang="en"><head> <title>Vue路由中hash模式的实现</title></head><body> <button id="myBtn">改变hash的值</button> <script&
2022-03-20 10:08:18
734
原创 js中for...in,for...of和遍历map的方法
目录1.for...in2. for...of3.for...in和for...of的区别4.可枚举属性，可迭代对象1）可枚举属性2)可迭代对象5.迭代器，生成器6.数组，伪数组7.map对象可以使用for...in吗？遍历map的方法！1.for…infor...in循环遍历的是可枚举属性（包括原型链上的可枚举属性）var obj = {a:1,b:2,c:3};for(let key in obj){ console.log(key); // a b c}使用for...in也可以
2022-03-14 09:38:18
3553
1
原创 react的状态管理库
1.Redux2.Mobx3.Recoil1）RecoilRoot2)常用的hook函数（1）useRecoilState（2）useRecoilValue（3）useSetRecoilState
2022-03-09 15:54:31
2817
原创 前端常见代码题
目录1.判断括号的合法性2.最长递增子序列（Longest Increasing Subsequence,简写LIS）1）使用动态规划的方法，时间复杂度为O(n2)O(n^2)O(n2)。2）使用动态规划+二分搜索3.最长公共子序列（longest common subsequence)4.最长不重复的子字符串（剑指 offer 48）1.判断括号的合法性function isValid(str){ let left = []; // 将右括号转换为左括号 let rightTo
2022-03-09 15:52:23
415
原创 webpack项目配置
目录config.jswebpack.common.jswebpack.dev.jswebpack.prod.jswebpack.dll.jsconfig.jsconst isDevelopment = process.env.NODE_ENV === "development"const isProduction = process.env.NODE_ENV === "production"const SERVER_HOST = "0.0.0.0"const SERVER_PORT = 800
2022-03-09 15:51:39
583
原创 JS中数组面试常见问题
目录1.判断是否是数组的方法2.数组扁平化的方法3.数组的迭代方法4.数组的常用方法1.判断是否是数组的方法1.instanceof 操作符判断let arr = [];console.log(arr instanceof Array)2.通过es6的Array.isArray()做判断let arr = [];console.log(Array.isArray(arr))3.通过Object.prototype.toString.call()做判断let arr = []conso
2022-03-03 20:41:48
614
原创 2.前端计网篇之HTTP状态码
目录HTTP状态码1） 2xx （Success 成功状态码）2）3xx （Redirection 重定向状态码）3） 4xx （Client Error 客户端错误状态码）4）5xx （Server Error 服务器错误状态码）HTTP状态码类别原因描述1xxInformation(信息性状态码)接受的请求正在处理2xxSuccess(成功状态码）请求正常处理完毕3xxRedirection(重定向状态码）需要进行附加操作-完成请求4xxClie
2022-03-01 16:59:57
1402
原创 10.浏览器原理之JS执行机制
关于js执行机制的文章JS执行机制、同步和异步、宏观任务和微观任务关于async/await、promise和setTimeout执行顺序# 关于js执行机制的题目：第一题：let arr = [1, 1, 1, 1, 1]for(let i = 0; i < arr.length; i++) { setTimeout(() => { console.log(i) //0 1 2 3 4 })}for(var i = 0; i < ar
2022-02-25 16:20:58
493
原创 9.浏览器原理之浏览器垃圾回收机制
目录1.V8的垃圾回收机制是怎样的2.哪些操作会造成内存泄漏1.V8的垃圾回收机制是怎样的V8实现了准确式GC，GC算法采用了分布式垃圾回收机制。因此，v8将内存（堆）分为新生代和老生代两部分。2.哪些操作会造成内存泄漏不合理的使用闭包，从而导致某些变量一直被留在内存当中。设置了setInterval定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法回收。获取一个DOM元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它无法
2022-02-25 14:56:44
1115
原创 7.浏览器原理之浏览器同源策略
目录1.什么是同源策略2.如何解决跨域问题3.正向代理和反向代理的区别4.NginX的概念及其工作原理1.什么是同源策略2.如何解决跨域问题3.正向代理和反向代理的区别4.NginX的概念及其工作原理NginX是一款轻量级的Web服务器，也可以用于反向代理，负载均衡和HTTP缓存等。NginX使用异步事件驱动的方法来处理请求，是一款面向性能设计的HTTP服务器。传统的Web服务器如Apache是process-based模型的，而Nginx是基于event-driven模型的。正是这个主要的区别
2022-02-25 14:19:49
3391
原创 6.浏览器原理之浏览器本地存储
目录1.浏览器本地存储方式及使用场景2.cookie有哪些字段，作用分别是什么3.cookie，localStorage，SessionStorage区别4.前端存储的方式有哪些5.IndexDB有哪些特点1.浏览器本地存储方式及使用场景2.cookie有哪些字段，作用分别是什么3.cookie，localStorage，SessionStorage区别4.前端存储的方式有哪些5.IndexDB有哪些特点...
2022-02-24 20:08:44
355
原创 5.浏览器原理之浏览器渲染
目录1.浏览器的渲染过程2.浏览器渲染优化3.渲染过程中遇到JS文件如何处理？4.什么事文档的预解析？5.CSS如何阻塞文档解析？6.如何优化关键渲染路径？7.什么情况下会阻塞渲染？1.浏览器的渲染过程2.浏览器渲染优化3.渲染过程中遇到JS文件如何处理？4.什么事文档的预解析？5.CSS如何阻塞文档解析？6.如何优化关键渲染路径？7.什么情况下会阻塞渲染？...
2022-02-24 15:38:36
296
原创 4.浏览器原理之浏览器组成
目录1.对浏览器的理解2.对浏览器内核的理解3.常见的浏览器的内核4.浏览器的主要组成部分1.对浏览器的理解2.对浏览器内核的理解3.常见的浏览器的内核4.浏览器的主要组成部分
2022-02-24 14:59:49
168
原创 3.浏览器原理之浏览器缓存
目录1.对浏览器的缓存机制的理解2.浏览器资源缓存的位置有哪些？3.协商缓存和强缓存的区别4.为什么需要浏览器缓存？5.点击浏览器刷新按钮或者按F5,按Ctrl+F5(强制刷新)，地址栏回车有什么区别？1.对浏览器的缓存机制的理解2.浏览器资源缓存的位置有哪些？3.协商缓存和强缓存的区别4.为什么需要浏览器缓存？5.点击浏览器刷新按钮或者按F5,按Ctrl+F5(强制刷新)，地址栏回车有什么区别？...
2022-02-24 14:13:54
325
原创 2.浏览器原理之进程和线程
1. 线程和进程1）进程和线程的概念进程Process是资源分配的最小单位；线程Thread是cpu调度的最小单位2）进程和线程的关系进程中的任意一个线程执行错误，都会导致整个进程的崩溃线程之间共享进程中的数据当一个进程关闭之后，操作系统会回收进程所占用的内存，当一个进程退出时，操作系统会回收该进程所申请的所有资源；即使其中任意线程因为操作不当导致内存泄露（不再用到的内存，没有及时释放，就算内存泄漏（memory leak)，当进程退出时，这些内存也会被正确回收。进程之间的内容相互隔离。进
2022-02-22 17:23:54
381
原创 JS中逻辑与和逻辑或的短路特性
短路特性逻辑与(&&)和逻辑或(||)都是短路操作符：短路特性的意思就是如果第一个操作数已经决定了结果，那么永远不会对第二个操作符求值。逻辑与 &&根据下面的例子来体会一下逻辑与的短路特性let found = true;let result = (found && someUndecaredVariable);//会报错console.log(result) //不会执行这一行对上面的结果做一下解释：对于&&来说，左右两边都
2022-02-15 13:29:18
1069
原创 exports和module.exports的区别
1.module对象在每个js自定义模块中都有一个module对象，它里面存储了和当前模块有关的信息。2.exports对象由于module.exports单词写起来比较复杂，为了简化向外共享成员的代码，Node提供了exports对象。3.exports和module.exports的区别？默认情况下，exports和module.exports指向同一个对象。最终暴露出去的结果，还是以module.exports指向的对象为准。它们俩区别的难点在于，当赋值对象给exports和module.e
2022-02-10 23:25:35
1461
1
原创 CommonJS模块和ES6模块
文章目录1.CommonJS模块2.异步模块定义3.通用模块定义4.ES6模块4.1模块导出4.2模块导入1.CommonJS模块CommonJS规范概述了同步声明依赖的模块定义。这个模块主要用于在服务器端实现模块化代码组织，但也可用于定义在浏览器中使用的模块依赖。CommonJS模块模块语法不能在浏览器中直接运行。一般认为，Node.js模块系统使用了CommonJS规范，实际上并不完全正确。Node.js使用了轻微修改版的CommonJS，因为Node.js主要在服务器环境下使用，所以不需要考虑网
2022-02-10 22:48:23
700
原创 TCP的三次握手和四次挥手
关于TCP的三次握手和四次挥手的面试回答：面试官你好，这个问题我是知道的，TCP协议是传输层的一个安全可靠的传输协议，三次握手的机制，是保证能建立一个安全可靠的连接，第一次握手是由客户端发起的，客户端会像服务器端发送一个报文，在报文里面SYN位是置1的，当服务端收到这个报文的时候，就知道客户端要和我发起一个新的连接，于是服务器端就向客户端发送一个确认消息报文，这个消息报文中ACK位置是置1的。以上两次握手之后，对于客户端而言，其实是已经知道了所有的信息了，即我能向服务器端发消息，也能收到服务器端发来的消息。
2022-02-10 16:41:38
40
原创 React hooks的使用
文章目录0.创建react项目1.ReactHooks简介2.useState3.useEffect3.1.useEffect代替常用的声明周期函数3.2.useEffect实现类似componentWillUnmount（组件将要被卸载时执行）4.useContext5.useReducer5.1理解什么是reducer5.2使用useReducer5.3实现useReducer useContext实现redux的状态管理和状态共享6.useMemo7.useCallback8.useRef0.创建r
2022-02-10 16:38:54
340
原创 Ajax技术
1.jQuery中的AjaxAjax是一种异步无刷新技术，get的参数会跟在后面，post的参数不会跟在后面，get相对于post没有那么安全，get传递的数据也没有post的传递的那么多，但是get比post快，因为get有缓存，post没有缓存。post服务器1.$.ajax请求<!DOCTYPE html><html lang="en"><head> <title>$.ajax请求</title></head>
2021-10-28 10:16:14
144
原创 JS中的浅拷贝和深拷贝
浅拷贝和深拷贝1.浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用。2.深拷贝拷贝多层，每一级别的数据都会拷贝。浅拷贝<!DOCTYPE html><html lang="en"><head> <title>浅拷贝</title></head><body> <script> // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用. var obj
2021-10-27 18:34:06
281
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人