- 博客(84)
- 收藏
- 关注
RSS订阅原创 首次登录界面使用大图片做背景，加载缓慢
使用骨架屏：骨架屏是需要自己画的，你需要把布局画好做成一个组件，在需要的页面引用，然后等数据请求回来以后隐藏掉再显示正常的页面就可以。通常仅仅在接口请求比较多的页面用到骨架屏，路由懒加载：webpack打包时会把懒加载的路由组件打包成单独的js bundle，在出发时再调用。预渲染： 使用 Preload/Prefetch 优化。解决首次登录，加载缓慢的过程。
2022-11-07 16:55:00
1172
1
原创 flex的缩写值的使用
flex: initial等同于设置flex: 0 1 auto flex属性的默认值。flex-basis:0%表示建议支持是0，因此，设置flex:0的元素的最终尺寸表现为最小内容宽度；flex-basis:auto表示固定尺寸由内容决定,最终尺寸通常表现为最大内容宽度。flex:none等同于设置flex: 0 0 auto（推荐）flex:1等同于设置flex: 1 1 0% （推荐）flex:auto等同于设置flex: 1 1 auto。flex:0等同于设置flex: 0 1 0%
2022-11-04 20:10:03
742
原创 前端面试过程中关于浏览器多线，开启子线程，核心组件
浏览器是多线程的，有js引擎线程，Gui渲染线程，事件触发线程，定时触发线程，异步请求线程。使用h5的新特性web work开启js的子线程，但是完全受主线程控制，不允许操作dom。渲染引擎： Blink-》（chrome，opera）浏览器的核心组件，一是渲染引擎，另一个是JS引擎。js引擎： V8-》（chrome，opera）
2022-10-20 16:37:10
427
原创 浏览器缓存，如何选择，各有什么优缺点，存储图片呢，强制缓存与协商缓存用在哪些地方
因为他是应用的入口，只有加载它之后才会加载它引用的资源文件，如css、js、img等，所有要保证index.html不被缓存，这样你才能保证本地资源版本跟服务器一致。至于css、js等资源文件如果重新打包那么他们的文件名也会根据内容发生变化（contentHash），都是不同的文件了也就不担心缓存带来的副作用了。2）js、css、img等文件可以进行强缓存 ，会在打包后生成对应的hash标识，所以这些文件可以设置一个比较长的缓存时间；3）逻辑处理之类的必须要准确数据，也就不会做缓存。
2022-10-20 16:35:57
223
原创 local storage在不同标签页，不同浏览器之间通用吗，可以跨域吗
local storage不可以跨域，但是可以使用iframe+postmessage可以实现。localStorage相比而言可以在多个标签页中共享数据，sessionStorage只适用于同一个标签页，：同源页面，也就是协议，端口，域名相同的页面。当然不能跨浏览器啦，都不是一个存储系统。
2022-10-20 15:49:37
2638
原创 在浏览器中和在node中跑js的差异
2.JS需要浏览器的JS引擎进行解析执行，但是不同浏览器的JS引擎不同，存在兼容性问题。1.浏览器和node.js都可以看作是JS的运行平台，浏览器是JS在客户端的运行时环境，而node.js是JS在服务端的运行环境。3.node.js无法使用DOM和BOM的操作，浏览器无法执行node.js中的文件操作等功能。5.浏览器用的是ES的模块化，nodejs常用的的是CommonJs的模块标准。浏览器端，microtask 在事件循环的 macrotask 执行完之后执行。
2022-10-20 15:48:52
1082
原创 js阻止多个事件不生效
在多个事件的最外层添加一个div，拿到最外层的div设置属性pointerEvent=“none”可以组织div中的事件发生，但是如果内部是button,会禁用方法，但是样式不会改变。拿到所有的元素一个一个阻止。
2022-10-13 10:58:51
479
原创 webpack打包文件过大，如何解决
（webpack遇到import()时会将引入的模块打包成独立的js模块-bundle （import()函数会返回一个Promise），需要时会异步加载这些bundle）
2022-10-12 17:29:39
1414
原创 js中forEach与for循环实现按顺序输出promise
首先拿到4个pending的promise对象，然后分别.then注册成功的回调，一秒后res1、res2、res3, res4状态变为fulfilled，最后从上到下依次打印结果，四块代码会同时执行。如果使用for循环，就能够按顺序输出1，2，3，4。隔9秒输出1， 隔8秒输出2， 隔7秒输出3， 隔6秒输出4。题干：通过数组中的值设定第一个promise使用9秒，第二个使用八秒，第三个使用七秒，第四个使用六秒。先隔七秒输出4，然后每隔一秒输出一个3，2，1。4 forEach没有for循环效率高。
2022-10-05 15:41:33
2342
原创 父子域如何用cookie实现在父域中登录，子域中不用登录
如果不指定，默认为 origin，不包含子域名。它最初是耶鲁大学实验室的项目，后来转让给了 JASIG 组织，项目更名为 JASIG CAS，后来该组织并入了Apereo 基金会，项目也随之更名为 Apereo CAS。一个应用登录以后，后端返回token，前端拿到token后保存在localstroge中，另一个应用登陆时，判断localstroge中是否存储有token，如果有存储，直接使用登录成功。其实这个实现就是单点登录，只要登录了其中一个应用系统，其他的应用系统也可以使用，不用重新登录。
2022-09-29 14:43:59
1439
原创 webSocket的通信流程，以及对网络等错误的处理
因为在webSocket连接过程中会出现，切换网络，网络连接断开的问题，WebSocket都没有断开，但对上层来说，都没办法正常的收发数据了。（ Socket是对TCP/IP协议的封装，Socket本身并不是协议，而是一个调用接口（API），通过Socket，我们才能使用TCP/IP协议。创建Socket连接时，可以指定使用的传输层协议，socket可以支持不同的传输层协议（TCP/UDP），当使用TCP协议进行连接时，该socket接连就是TCP链接.定时发送心跳包，来感知网络是可用的。
2022-09-18 11:32:37
2590
原创 cookie session token以及jwt
但token不同，token是开发者为了防范csrf而特别设计的令牌，浏览器不会自动添加到headers里，攻击者也无法访问用户的token，所以提交的表单无法通过服务器过滤，也就无法形成攻击。Header :描述 JWT 的元数据。首次登录，取数据库查询用户的用户名密码是否匹配，登录成功获得用户的uid，例如使用md5加密算法，对uid进行加密，得到的加密字符串返回给客户端，下次客户端请求带上token，服务端根据加密发构造方法，得到uid然后，再次使用加密算法，看得到的密文是否和返回的token一致。
2022-09-15 16:45:21
302
原创 http1.0到http3.0的介绍，常见的http的请求方式介绍，常见状态码
本质上来讲， PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。而基于UDP的QUIC协议，则可以内建与TCP中不同的连接标识方法，从而在网络完成切换之后，恢复之前与服务器的连接。基于TCP的HTTP/2，尽管从逻辑上来说，不同的流之间相互独立，不会相互影响，但在实际传输方面，数据还是要一帧一帧的发送和接收，一旦某一个流的数据有丢包，则同样会阻塞在它之后传输的流数据传输。提高了网络的利用率。
2022-09-15 11:23:27
1010
原创 使用原生js实现鼠标移入video播放，移除video暂停
使用onmoueenter,onmouseleave 来监听鼠标移入移除。注意是使用video的play（）和pause（）方法来实现。代码中使用两种方法得到video这个元素。另一种是使用id得到元素，两种方法均可。一种是在方法中传入this。
2022-09-15 09:03:19
1901
原创 伪类与伪元素
伪类：伪类用于选择DOM树之外的信息，匹配指定状态的元素，比如:visited，:active，：hover，：active。或者满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。伪元素：伪元素为DOM树没有定义的虚拟元素，它不以元素为最小选择单元，它选择的是元素指定内容。::first-line 选择指定元素的第一行。::before 在指定元素的内容后面插入内容。::after 在指定元素的内容前面插入内容。
2022-09-14 16:29:08
76
原创 实现函数柯里化
实现函数柯里化，就是判断当前接受的参数与函数的参数长度（fn.length函数参数长度)是否一致，如果一致就返回函数执行结果。否则继续返回柯里化函数。
2022-09-08 09:27:27
114
原创 async/await与promise
async 会将其后的函数的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。（ Promise 的特点——无等待），所以在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。async 是“异步”的简写，而 await 的意思是等待，async/await 是建立在 promise 的基础上， 像 promise 一样，也是非阻塞的。......
2022-08-17 18:13:37
1190
原创 js中super的使用
因为：ES5 的继承的实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。son2.func()出错的原因是，在对象son2，定义的func方法是传统的定义方式，不是es6新定义的方法的简写方式，func（）{}；使用super：super继承，super方法，super对象。...
2022-08-12 09:05:58
6606
原创 z-index生效与css层叠
2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后来居上，盖住了该元素，解决方式：将盖住该元素的子元素的z-index设置为负数，而该元素不设z-index属性.1.在用z-index的时候，该元素没有没有设置position：relative/fixd/absolute。2.普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。1.本身 j 就具有层叠上下文，称为“根层叠上下文”。3.CSS3 中的新属性也可以产生层叠上下文。...
2022-08-11 21:12:38
561
原创 v8引擎垃圾回收与执行js代码过程
的概念，即将原本需要一次性遍历堆内存的操作改为增量标记的方式，先标记堆内存中的一部分对象，然后暂停，将执行权重新交给JS主线程，待主线程任务执行完毕后再从原来暂停标记的地方继续标记，直到标记完整个堆内存。程序中声明的对象首先会被分配到From空间，当进行垃圾回收时，如果From空间中尚有存活对象，则会被复制到To空间进行保存，非存活的对象会被自动回收。v8的内存结构由新生代，老生代，大对象区，代码区，map区，垃圾回收过程主要出现在新生代和老生代。To空间的内存占比是否已经超过25%......
2022-07-29 22:33:31
450
原创 百度面试一面凉经
webpack 使用实现格式居中重排和回流，重拍和重绘如何在编写js代码中避免重排，回流是否写过移动端js基本数据类型null undefine boolean number string symbol bigint判断数据类型的方法。typeof ,instance,object.is,并详细typeof 是否能正确判断类型？对于原始类型来说，除了 null 都可以调用typeof显示正确的类型。对于引用数据类型，除了函数function之外，都会显示"obj..
2022-05-11 16:42:05
249
原创 招商银行信用卡中心一面
项目中主要遇到的问题，是怎么解决的。1.网络不好，用户连续点击提交按钮，使用节流函数解决2.浮点数累加时，会有精度问题，0.1+0.2！=0.3，如何解决最常用的hooks的方法useState进行初始赋值,useEffect进行变量依赖变化时，调用某些函数，还可以在页面卸载时，使用return，关闭函数。useState初始值有哪些类型，useEffect中，依赖变量变化时，return中的函数会执行卸载吗？js常用的数据结构数组..
2022-04-15 22:19:53
655
原创 美团前端一面凉经
问了前端使用什么框架编写。项目主要使用到了哪些hooks。你还了解哪些hook。（usecallback，useref），usecallback的应用场景，主要原理机制，用过react.memo吗以及两者的区别。react fiber了解过吗，具体底层实现原理是什么。需求：如果一个js正在运行，暂停当前js，先去执行别的js。回答yield，使用生成器中的yield，通过，next（）来暂停。使用过call，bind,apply吗，能实现一个call方法吗？（call是用来改变this指向，实现.
2022-04-14 20:54:39
947
2
原创 react性能优化的方法
react性能优化的6中方法：1.避免使用内联函数。每次render渲染时，都会创建一个新的函数实例，应该在组件内部创建一个函数，讲事件绑定到函数，这样每次调用render时，就不会创建单独的函数实例。2.使用react fragement 避免额外标记。用户创建新组件时，每个组件应具有单个父标签，父级不能有两个标签。所以顶部要有一个公共标签，所以经常在组件顶部添加额外标签div，这个div标签充当父标签意外，没有其他作用，这个时候可以使用fragement，它不会向组件引入任何的额外标记，但是可以作为
2022-03-28 17:14:25
6577
原创 使用react-activation实现路由跳转时页面缓存保留页面数据，组件不被卸载
背景，在 React 中，我们通常会使用路由去管理不同的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件。为了实现切换路由后，再返回刚刚的页面，数据还是原始状态，一种方法就是使用react-activation插件进行页面的缓存具体的详情讲解，可看这位作者的react-activation选用上述缓存方式的自动控制缓存，步骤业务代码中，在不会被销毁的位置放置 外层，一般为应用入口处。在react 项目中引入插件，import {AliveScope} from “react..
2022-03-21 10:42:45
7245
原创 sqlsever数据库，更新某一列值保留两位小数，使用round函数，依旧超多小数位
问题描述，a表中新加一列costTax,把a表中现存的cost值除以1.06，保留两位小数保存到对应的costTax列中。在同一个表a中,用一列值更新另外一列，update a set costTax= round(cost/1.06,2)出现问题，赋值的一列还是超多位小数，？？？使用select costTax= round(cost/1.06,2) from a，得到的值为正确是两位小数。但是为什么使用update更新到表中的值为不准确的没有保留位数的值？？？解决方案因为..
2021-12-29 17:28:41
2567
原创 使用yarn install出现RequestError: read ECONNRESET
在使用yarn安装项目依赖包时，出现以下错误：一般出现ECONNRESET错误会是网络问题，或者仓库有问题。使用排除法就能解决了。使用淘宝镜像会下载流畅。yarn config set registry https://registry.npm.taobao.org就欧克了...
2021-11-04 11:20:41
2351
原创 nodejs安装及环境配置
下载安装地址点击去下载msi和.zip格式区别：.msi是Windows installer开发出来的程序安装文件，它可以让你安装，修改，卸载你所安装的程序。说白了.msi就是Windows installer的数据包，把所有和安装文件相关的内容封装在一个包里。.zip是一个压缩包，解压之后即可，不需要安装建议下载.msi格式安装包，后续不需要配置环境变量。最新版的16.xxx安装包下载页不需要配置环境。安装我下载的。.msi安装程序，下载完成后，双击安装包，开始安装，一直点next即.
2021-11-04 10:37:31
872
原创 logisti回归算法的损失函数和成本函数的由来
lofistic回归是二分类回归。二分类的成本函数就只能取0或者1。把两种情况列出来，最后有一个巧妙的定义，可以把两个公式合并为一个公式，定义为p(y/x)=…(如下图）由于log函数是严格单调递增的函数，log p(y/x)等于化简为(如下）:这就是前面提到的成本函数的负值，有一个负值是因为，希望算法输出值的概率最大的，在logistic回归中，我们需要最小化损失函数。...
2021-10-06 18:33:58
217
原创 使用python_numpy向量是维度出错，检查
当使用numpy创建一个向量时，使用np.random.randn(5)得到的是一个数组，并不是向量，这个写法不正确，为了避免出错，应该写成np.random.randn(5.1)使用assert进行声明，仔细检查向量的维度。使用reshape，来改变向量格式，确保是正确的维度...
2021-10-06 15:44:26
315
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人