- 博客(62)
- 收藏
- 关注
RSS订阅原创 工作中的CSS
justify-content:center、space-between（左右对齐紧挨容器，元素间距一样）、space-around（每个元素的左右间距都一样包括最左和最右的元素）、flex-start（左对齐）、flex-end（右对齐）flex-flow相当于三个属性的简写：flex-flow:flex-direction flex-wrap。flex相当于三个属性的简写 ：flex :flex-grow flex-shrink flex-basis。
2023-07-12 16:28:27
547
原创 实习经历复盘
我们可以把数据分为三种1. 接口请求数据2. 接口响应数据3. 页面数据： 1. UI数据：如auxo所需的数据结构 2. 临时状态数据：如服务端给出的JSON字符串格式数据，或者一些结构不友好的数据。
2022-08-14 16:00:39
356
1
原创 前端单元测试
写单测和后期维护是需要一定成本的，我们一般只针对核心底层的模块书写单元测试，如公共函数和组件。单测的好处：减少bug，提升代码可读性可维护性，为系统重构做铺垫。含义：被测到的代码。具体分为行级、分支级、方法级等不同级别。它可以从一定程度上衡量我们对代码测试的充分性。原则上我们追求的单元测试覆盖率目标是100%，但业务场景多的情况几乎是不可能。平台类项目，核心复杂功能尽量覆盖率做到最高，业务类的酌情处理。目标覆盖率：行覆盖率（line coverage）：表示是否每一行都执行 80%函数覆盖率（fu
2022-07-06 15:12:57
6521
原创 前端代码规范
命名要语义化用类选择器，减少使用标签选择器：因为项目中重复的标签多了以后不好区分。可能有很多重复的标签，所以最好还是使用类选择器。bem规范：.block{}.block__element{}.block–modifier{}CSS样式推荐书写顺序：好的样式顺序，不仅看起来清晰，也可以提升浏览器渲染DOM的性能。定位属性：position display float left top right bottom overflow clear z-index自身属性：width height marg
2022-07-06 11:32:20
235
原创 工程化（产研流程规范）
流程：产品提需求，开发，部署，过冒烟，提测，测试有问题继续改，改完push新代码，测试or开发部署，测试通过准备上线。线上项目地址克隆到本地并创建自己的开发分支:再从release分支上创建一个test-button分支：then就可以在feat- button分支上愉快的开发啦，每天把feat-button分支提mr到test- button分支上。merge request(mr)：git merge 和git rebase都是在本地进行分支合并，merge request是在网页端进行分支合并，
2022-07-06 10:10:27
467
原创 Git以及代码托管中心
GitGit是一种开源的分布式版本控制工具（版本控制在本地电脑进行）。工作机制：工作区、暂存区、本地库。远程库。git常用命令：配置用户信息：git config --global user.name 用户名检查用户全局配置信息：git config --list --global /git config user.name获取帮助信息：git help verb或git verb -h将本地项目转化为Git仓库（初始化）：git init检查文件处于什么状态：git status或git
2022-05-28 21:56:51
265
原创 算法篇_数学规律
圆圈中最后剩下的数字n=1，最后剩下的数字是 0n=2，最后剩下的数字是 (0 + m)%2n=3，最后剩下的数字是 ((0 + m)%2 + m)%3可以将上面的规律写成循环，第 n 次的结果等于：(上次一次结果 + m)%nvar lastRemaining = function(n, m) { let res=0; for(let i=2;i<=n;i++){ res=(res+m)%i; } return res;};.....
2022-01-27 12:20:45
408
原创 TypeScript基础
什么是TypeScriptJS是动态类型（在执行阶段才进行类型的匹配）的语言，弱类型语言（会做类型转换，在强类型语言中字符串和数字是无法相加的）。TS是静态类型（在编译阶段进行类型的匹配，在编译阶段就可以暴露大部分错误）的语言，也是弱类型语言。相比JS，可读性和可维护性都增强了。TS基于JS，兼容所有JS特性，支持共存。基本语法基础数据类型：string、number、boolean、null、undefined在变量名后加一个冒号，冒号后面接类型名称。字符串/数字字面量：对象类型：类型
2022-01-25 12:29:21
1971
原创 Webpack知识体系
什么是Webpack?前端项目由资源构成：PNG JPG GIFJS TS css Less JSX SassWebpack打包核心流程如何使用Webpack？1,安装依赖 2，编辑配置文件 3，执行编译命令配置项：entry:定义当前项目的入口 output:定义打包完项目的文件名及放到哪里（出口）核心流程：Webpack做的两件事：模块化+一致性:关于Webpack使用方法，基本围绕配置展开，配置大致分为两类：流程类：作用于流程中（参考核心流程图）某个or若干个环节，直接影
2022-01-24 11:30:06
1650
原创 CDN内容分发网络
参考文章：掘金什么是CDN？CDN：Content Delivery Network，为改善互联网的服务质量（提高访问速度，更快更稳定）而提出。它是建立在承载网上，由分布在不同区域的边缘节点服务器群组成的分布式网络。实现方法：通过在网络各处放置节点服务器，CDN系统能够实时地根据网络流量和各节点的连接和负载状况以及离用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，加快访问速度。CDN工作原理：CDN实现原理依赖于DNS解析，广泛采用各种缓存服务器，将这些缓存服务器分布到用户访
2022-01-05 22:25:10
914
原创 图片懒加载
<script> const imgs=document.querySelectorAll('img'); window.addEventListener('scroll',(e)=>{ imgs.forEach(img=>{ const imgTop=img.getBoundingClientRect().top; if(imgTop<window.innerHeight){
2022-01-04 21:32:05
259
原创 js手写题——setTimeout和setInterval
## setTimeout是如何实现的对于需要延迟执行的任务，如定时器任务，在 Chrome 中除了正常使用的消息队列之外，还有另外一个消息队列，这个队列中维护了需要延迟执行的任务列表，叫**延迟队列**。处理完消息队列中的一个任务之后，就开始执行 ProcessDelayTask 函数。ProcessDelayTask 函数会根据发起时间和延迟时间计算出到期的任务，然后依次执行这些到期的任务。等到期的任务执行完成之后，再继续下一个循环过程。使用setTimeout的注意事项：1,如果当前任务执行
2022-01-04 21:29:02
861
原创 ES6_async/await
用 promise.then 也是相当复杂，虽然整个请求流程已经线性化了，但是代码里面包含了大量的 then 函数，使得代码依然不是太容易阅读。基于这个原因，ES7 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰。await后面要跟一个promise实例对象async函数=生成器函数+执行器函数.........
2022-01-04 19:58:36
335
原创 前端性能优化
利用网络面板做性能分析详见：极客时间——Chrome开发者工具：利用网络面板做性能分析Chrome开发者工具有10个功能面板，与性能相关的有Network网络面板、Performance面板、Memory内存面板；与调试相关的有Elements面板、Sources面板、Console面板。此外还有Application、Security、Audits 和 Layers面板。Network网络面板：由控制器、过滤器、抓图信息、时间线、详细列表和下载信息概要这 6 个区域构成。时间线区域上有几项需要关注
2021-12-21 18:00:01
883
原创 DOM&DOM事件流&BOM
DOM是文档对象模型，是HTML的编程接口。HTML和DOM是一一对应的关系。对DOM的操作有增删改查。**查询DOM结点**：法一，通过document上的函数：document.getElementById('idname')document.getElementsByTagName('标签名')//返回NodeList 动态的 不可遍历document.getElementsByClassName('类名')//返回NodeList法二，通过CSS选择器查询DOM结点：
2021-12-19 12:55:01
143
原创 响应式系统与React
React和Vue区别虚拟DOMDiffing算法redux原理生命周期钩子函数(生命周期回调函数)对比新旧：废弃了三个will钩子，提出两个新的钩子旧：常用的三个钩子：componentDidMount componentWillUnmount render新：Hooks.......................................
2021-12-17 15:59:54
627
原创 浏览器缓存Cache
为什么很多站点第二次打开速度会很快？如果第二次页面打开很快，主要原因是第一次加载页面过程中，缓存了一些耗时的数据。那么，哪些数据会被缓存呢？从上面介绍的核心请求路径可以发现，DNS 缓存和页面资源缓存这两块数据是会被浏览器缓存的。其中，DNS 缓存比较简单，它主要就是在浏览器本地把对应的 IP 和域名关联起来，这里就不做过多分析了。我们重点看下浏览器资源缓存，下面是缓存处理的过程：缓存查找流程示意图：首先，我们看下服务器是通过什么方式让浏览器缓存数据的？从上图的第一次请求可以看出，当服务器返回 H
2021-12-17 15:21:44
1463
原创 HTTPS（SSL/TLS握手过程）&TCP协议（三次握手四次挥手）
TLS：Transport Layer Security（其前身为 SSL：Secure Sockets Layer）SSL/TLS 目的：加密、校验、证书
2021-12-17 11:34:03
7474
原创 身份验证——Cookie&Session&Token&JWT
什么是凭证在互联网应用中，一般网站（如掘金）会有两种模式，游客模式和登录模式。游客模式下，可以正常浏览网站上面的文章，一旦想要点赞/收藏/分享文章，就需要登录或者注册账号。当用户登录成功后，服务器会给该用户使用的浏览器颁发一个令牌（token），这个令牌用来表明你的身份，每次浏览器发送请求时会带上这个令牌，就可以使用游客模式下无法使用的功能。CookieHTTP是无状态的协议（对于事务处理没有记忆能力，每次客户端与服务器会话完成后，服务端不会保存任何会话信息）：每个请求都是完全独立的，服务端无法确认当
2021-12-17 11:22:55
1238
原创 HTTP报文格式&请求方法&HTTP状态码&RESTful API
报文格式2XX——表明请求被正常处理了200 OK：请求已正常处理。202 Accepted：服务器已接受请求，但尚未处理。正如它可能被拒绝一样，最终该请求可能会也可能不会被执行。在异步操作的场合下，没有比发送这个状态码更方便的做法了。204 No Content：请求处理成功，但没有任何资源可以返回给客户端，一般在只需要从客户端往服务器发送信息，而对客户端不需要发送新信息内容的情况下使用。206 Partial Content：是对资源某一部分的请求，该状态码表示客户端进行了范围请求，而服务器成
2021-12-16 21:50:39
706
原创 TCP和UDP的区别
简单来说就是：TCP：流式，需要建立连接，复杂，可靠 ，有序。UDP：单个数据报，不用建立连接，简单，不可靠，会丢包，会乱序；TCP面向字节流：面向字节流的话，虽然应用程序和TCP的交互是一次一个数据块（大小不等），但TCP把应用程序看成是一连串的无结构的字节流。TCP有一个缓冲，当应用程序传送的数据块太长，TCP就可以把它划分短一些再传送。UDP面向报文：面向报文的传输方式是应用层交给UDP多长的报文，UDP就照样发送，即一次发送一个报文。因此，应用程序必须选择合适大小的报文。若报文太长，则.
2021-12-16 21:22:47
160
原创 浏览器安全——Web页面安全&浏览器网络安全(HTTPS)&浏览器系统安全
一、Web页面安全同源和跨域：同源：页面中最基础、最核心的安全策略：同源策略（Same-origin policy）。浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。什么是同源？如果两个页面拥有相同的协议、域名和端口，那么这两个页面具有相同的源。同源政策：是浏览器提供的一个安全功能。是为了保证用户信息的安全，防止恶意的网站窃取数据。同源策略主要表现在 DOM、Web 数据和网络这三个层面。第一个，DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM
2021-12-16 20:51:34
6089
2
原创 网络协议——HTTP/1&HTTP/2&HTTP/3
极客时间——浏览器中的网络HTTP 是浏览器中最重要且使用最多的协议，是浏览器和服务器之间的通信语言。即将完成使命的HTTP/1超文本传输协议HTTP/0.9：被浏览器推动的HTTP/1.0：新特性：①引入了请求头和响应头，以Key-Value的形式保存。请求头：期望服务器返回的文件的类型表示期望服务器采用的文件压缩方式期望服务器返回的文件的编码方式期望页面的优先语言响应头：服务器采用的压缩方法服务器返回的文件类型服务器返回的文件的编码方式②引入了状态码通过响应行的方式
2021-12-16 15:38:20
3622
原创 js手写题——防抖(debounce)和节流(throttle)
防抖或是节流：限制函数的执行次数防抖：作用：防止用户在短时间内，大量高频地重复点击按钮，导致触发大量请求。应用场景：例如用户注册。知识点：setTimeout() clearTimeout()通过setTimeout()的方式，在一定时间间隔内，将多次触发变成一次触发。节流：减少一段时间的触发频率手写防抖：手写节流：......
2021-12-15 17:06:59
1156
原创 浏览器中的页面循环系统&宏任务微任务
js是单线程的，事件循环是js实现异步的一种方法，是js的执行机制，是一个不断进行循环的机制，来寻找可以执行的任务来执行。页面循环系统是浏览器统一管理页面中任务的机制，浏览器执行的任务，分为宏任务和微任务，宏任务在宏任务队列里，常见的宏任务：新程序执行、 setTimeout、事件的回调函数等。微任务在微任务队列里，常见的微任务： Promise.then（）。 微任务的执行时机：执行时机是在主函数执行结束之后、当前宏任务结束之前。每个宏任务都关联了一个微任务队列。async/await是微任务＋协程来实现
2021-12-15 16:21:40
1780
原创 浏览器的垃圾回收机制
什么是垃圾？当一个对象（在堆里）没有任何变量或属性（在栈中）对它进行引用，此时将永远无法操作此对象。这种对象过多会占用大量内存空间导致程序运行变慢。解决：将不再使用的对象设置为null即可。obj=null;内存溢出：一种程序运行出现的错误。当程序运行需要的内存超过了剩余的内存时，就会抛出内存溢出的错误。内存泄漏：占用的内存没有及时释放；内存泄露积累多了就容易导致内存溢出。你是如何判断内存泄露的？一般是感官上的长时间运行页面卡顿，猜可能会有内存泄漏。通过DynaTrace（IE）profiles等工
2021-12-14 22:45:36
1449
原创 算法篇_滑动窗口
最长的不含重复字符的子字符串var lengthOfLongestSubstring = function(s) { const window=[]; let max=0; for(let i=0;i<s.length;i++){ const index=window.indexOf(s[i]);//注意这里const index改成let index声明程序就不会通过,因为下面有个index+1 if(index===-1){
2021-12-08 20:03:35
106
原创 浏览器_面试问题
作者：liangx链接：https://www.nowcoder.com/discuss/418515来源：牛客网一、概述骨架知识：浏览器模型，渲染原理，JS解析过程，JS运行机制重点知识： http相关，cookie，cache，web安全相关，跨域处理二、基础从输入URL到页面加载：http://www.dailichun.com/2018/03/12/whenyouenteraurl.html浏览器机制（异步机制、线程宿主环境）：https://www.jianshu.com/p/ab
2021-12-07 22:37:09
74
原创 HTML相关知识点
作者：liangx链接：https://www.nowcoder.com/discuss/419557来源：牛客网1，HTML5新特性，语义化2，xhtml和html的区别3，使用data-的好处4，meta标签5，css js放置位置和原因6，什么是渐进式渲染7，meta viewport原理8，nodeValue、value和innerHTML的区别......
2021-12-07 22:36:34
186
原创 算法篇_双指针
在链表中经常使用双指针，这里列举了除了链表以外的用到双指针的题。合并两个有序数组这道题和合并两个排序的链表有点像，但是解法完全不同：合并有序链表用的是递归，这里用的是双指针，且是逆序双指针，所以不要搞混了。因为给出的nums1是个长度为m+n的数组，所以从后往前遍历节省了空间，不用设置暂存数组。var merge = function(nums1, m, nums2, n) { let i=nums1.length-1;//初始化i,指向nums1最后一个元素（即m+n-1) m=m
2021-12-07 19:41:41
567
原创 js手写题——数组去重和数组扁平化&对象扁平化
涉及到很多数组的api，要好好复习并掌握！数组去重时间复杂度最高的两层for循环方法： for(let i=0;i<arr.length;i++){//获取数组中的每一个元素 for(let j=i+1;j<arr.length;j++){//获取当前元素后的所有元素 if(arr[i]===arr[j]){//判断两个元素是否相等 arr.splice(j,1);
2021-12-07 18:07:19
753
原创 js手写题——typeof和instanceof
实现typeoftypeof缺陷：用typeof检查引用类型 object、null、array、function、Date都会返回字符串’object’ ，如 typeof array (返回’object’)为什么用Object.prototype.toString.call(obj)检测对象类型?深入理解Object.prototype.toString.call()对于为什么不能是Object.toString()/obj.prototype.toString()？看完上面两篇文章和下图就
2021-12-07 16:58:34
193
原创 算法篇_回溯
回溯，其实就是搜索相关问题，涉及到深度优先搜索（递归）、广度优先搜索（队列），与树的思路紧密关联。这里都用DFS解决。矩阵中的路径本问题是典型的矩阵搜索问题，可使用 深度优先搜索（DFS）+ 剪枝 解决。深度优先搜索： 可以理解为暴力法遍历矩阵中所有字符串可能性。DFS 通过递归，先朝一个方向搜到底，再回溯至上个节点，沿另一个方向搜索，以此类推。（可看成四叉树的深度优先遍历）剪枝： 在搜索中，遇到 这条路不可能和目标字符串匹配成功 的情况（例如：此矩阵元素和目标字符不同、此元素已被访问），则应立即返
2021-12-05 12:23:53
124
原创 算法篇_动态规划
连续子数组的最大和状态方程：dp[i]=max(dp[i-1]+arr[i]，arr[i])var maxSubArray = function(nums) { let max=nums[0]; let dp=[nums[0]]; for(let i=1;i<nums.length;i++){ dp[i]=Math.max(dp[i-1]+nums[i],nums[i]);//此行是判断加与不加前面的dp[i-1]，如果dp[i-1]<0，那还不如不加
2021-12-04 20:54:14
350
原创 前端力扣刷题_数据结构篇（哈希表）
字符串的排列递归＋set去重var permutation = function(s) { if(s.length===0) return ['']; if(s.length===1) return [s]; const res=[]; for(let i=0;i<s.length;i++){ let char=s[i]; restStr=s.slice(0,i)+s.slice(i+1);//slice(0,i)不包括第i位
2021-12-03 21:41:00
465
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人