- 博客(99)
- 收藏
- 关注
RSS订阅
原创 Resources && Learning Project
掘金前端查缺补漏掘金前端必读掘金前端100问面试官系列CSS面试官系列JS面试官系列ES6面试官系列React面试官系列网络手撕JS手撕算法手撕数据结构
2021-08-27 09:10:50
111
原创 JavaScript / ES6
前端开发技能 —— JavaScript / ES6JavaScriptJavaScript 事件流与事件模型ES6三级目录JavaScriptJavaScript 事件流与事件模型事件流当子元素所绑定的事件被用户触发时，页面接收事件的顺序是什么，就涉及到事件流。事件流即事件的传播方式。事件捕获：由上到下的传播方式，从不具体的节点逐级向下传播到最具体的节点。（Netscape事件流）事件冒泡：由下到上的传播方式，从最具体的元素接收再逐级向上传播到document节点。（IE事件流）事件模型
2021-08-13 18:13:35
1009
原创 前端开发必备技能 —— 数据结构 && 算法 && 手撕JavaScript/ES6
前端开发必备技能 —— 手写系列之数据结构二叉树二叉树中序遍历二叉树前序遍历二叉树后序遍历判断二叉树是否为对称二叉树三级目录二叉树二叉树中序遍历二叉树前序遍历二叉树后序遍历判断二叉树是否为对称二叉树三级目录...
2021-08-11 15:13:14
187
原创 CSS / CSS3
前端面试大汇总 —— CSS / CSS3 篇① CSS盒子模型② CSS选择器③ 伪类与伪元素④ 选择器的优先级⑤ 可以继承的属性有哪些⑥ px / em / rem / vh / vw / %百分比⑦ display:none；visibility:hidden；opacity:0⑧ 两栏布局的实现⑨ 三栏布局的实现勤能补拙，查缺补漏！基础不牢，地动山摇！分点回答，全面细致！打好基础，打好基础！① CSS盒子模型当浏览器渲染进行到了“布局”步骤的时候，会把所有的元素表示作一个一个的盒子。盒子
2021-08-07 17:18:15
684
原创 前端面经知识总结及参考回答 —— 尽量日更
前端面经知识总结及参考回答2021.6.21① 聊聊CSS的position② 数组去重有几种方法③ 什么是渐进增强，什么是优雅降级④ JavaScript的垃圾回收机制三级目录前言本blog将以类似日记的形式记录一些知识点，主要编辑并收录关于前端面试常问的知识点总结，并整理出参考回答。包括但不限于HTML、CSS、JavaScript，常见框架、协议、安全等。既是为了自己的日常学习，便于日后查询，也可为大家提供一些参考。坚持日更。话不多说，开始学习吧！2021.6.21① 聊聊CSS的
2021-06-21 22:44:26
741
原创 计算机网络
计算机网络----------------HTTP------------------GET 和 POST 请求的区别常见HTTP请求方法HTTP1.0和HTTP1.1的区别HTTP1.1和HTTP2.0的区别HTTP与HTTPS的区别HTTP的请求报文HTTP的响应报文当在浏览器中输入url并按下回车发生了什么----------------HTTP------------------GET 和 POST 请求的区别常见HTTP请求方法HTTP1.0和HTTP1.1的区别HTTP1.1和HTTP
2022-01-25 21:01:58
2026
原创 浏览器相关原理
浏览器相关原理XSS攻击 （跨站脚本攻击）存储型XSS反射型XSSDOM型XSS防范XSSCSRF攻击（跨站请求伪造）XSS攻击 （跨站脚本攻击）基本概念：XSS即跨站脚本攻击，是一种代码注入攻击。攻击者将恶意代码注入到目标网站，使其在用户的浏览器上执行。从而盗取用户的cookie或者其它识别客户端身份的敏感信息攻击类型：存储型反射型DOM型存储型XSS存储型XSS：恶意脚本存储在目标服务器上，当浏览器请求数据时，恶意脚本会从服务器端返回并执行。攻击步骤：攻击者将恶意代码
2022-01-22 14:17:20
3264
1
原创 HTML/HTML5
前端开发必备知识 —— HTML/HTML5src与href的区别HTML5的新特性SEOWeb Worker!DOCTYPE的作用、严格模式与混杂模式script中的defer和asyncsrc与href的区别答：src是source，即资源，用于img,script和iframe标签，将资源引入并替换当前元素href是hypertext reference，即超文本引用，用于a和link标签，使得超文本引用与当前元素建立联系HTML5的新特性一、语义化标签九个语义化标签 ，如：&l
2022-01-10 15:02:43
486
原创 React & Ant-Design 应用 —— 自适应居中组件（Grid栈格设置布局、Space间距设置）
React & Ant-Design 应用 —— Grid栈格设置布局、Space间距设置自适应内容问题描述居中布局 ：Grid栈格Space设置间距总结今天在实践中，我第一次使用了Grid栈格来设置布局，也用了Space来设置合适的间距。通过Grid配合Space，设置出来了居中且自适应的Ant-Design组件。因为是第一次使用到Grid和Space，所以做一些记录。可供居中布局、自适应参考。问题描述今天还是在处理DatePicker日期选择器这个组件的其他功能交互。但在调试的时候偶然间发
2021-07-21 16:11:15
4367
原创 React & Ant-Design 应用 —— Form.item 的 name和rules；为什么设置required不显示
React & Ant-Design组件之 Form.item的name和rulesForm.item的使用Form.item的使用导入：import React from 'react';import ReactDOM from 'react-dom';import { Form } from 'antd';return ( <Form.item label='userName' name="userName", rules={[required:true]}
2021-07-20 12:21:05
3316
2
原创 React & Ant-Design 应用 —— DatePicker 日期选择框 及 特定日期禁用 、Moment.JS
React & Ant-Design 应用 —— DatePicker 日期选择框 及 特定日期禁用开发需求① 在项目中导入 Ant-Design DatePickerMonment.JS心得总结好久没写React。重新接触React后，今天实习实践做的第一个功能应用是：利用React和Ant-Design中的DatePicker （日期选择框），实现一个日期选择弹窗。让我觉得比较有意思的不主要是这个DatePicker，而是其中涉及到的如何用MomentJS对日期选择器做一定的选中限制，开发需
2021-07-19 22:21:35
2551
1
原创 Redux 入门学习笔记 ① —— 基本概念及使用
Redux 入门学习笔记 ① —— 基本概念及使用Redux 架构Redux的基本概念① Store② State③ Action④ Action Creator⑤ 发布Action —— store.dispatch()⑥ 处理Action —— Reducer⑦ store.subscribe()Redux 小结*** createStore实现近期参与新的项目组，跟着学习。我是第一天接触Redux，所以做一个学习笔记，记录相关的个人理解便于学习。部分内容是参考阅读阮一峰老师的文章：Redux 入门
2021-07-17 17:27:24
136
1
原创 Angular 组件升级实战：将项目中的ng2-tree组件替换成ngx-tree
Angular 树形组件ng2-tree与ngx-treeview需求描述初识ng2-tree初识ngx-treeview改造之路 ①（坑）修改样式限制一开始都是不选中把checkbox改成radio？爬出坑前阵子我做了一个比较好玩同时又是比较大坑的task。在这个过程中，踩了许多坑，走了一些奇奇怪怪崎岖的弯路hhhh。不过实践下来终归是有趣好玩的，不仅学到了一些骚操作（尽管最后不一定采用，但确实是个好的思路），也加深了对这两个组件特性的理解。故对此过程做简单记录。需求描述需求：把项目中的ng2-t
2021-07-14 20:36:30
755
1
原创 BFC 块级格式上下文的定义、创建、特点和常见用途
BFC 块级格式化上下文的定义、创建、特点和常见用途BFC的定义BFC的创建BFC的特点BFC的用途① 创建BFC，从而消除垂直外边距叠加的现象② 创建BFC，清除浮动带来的影响③ 创建BFC，构建自适应两列布局BFC的定义概况如下：BFC 即 Block - Formatting - Context，它是一个仅有块级盒子参与的独立渲染区域。BFC 规定了这个独立渲染区域内的参与元素（块级盒子）是如何布局的BFC 是一个独立渲染区域，与外部区域无瓜葛。BFC的创建若一个元素具备以下任一特性
2021-07-06 21:28:55
264
1
原创 CSS中的两个重要概念：层叠上下文和层叠级别
层叠上下文和层叠级别层叠上下文创建层叠上下文层叠级别规则总结总结层叠上下文概念层叠上下文是HTML中的一个三维概念。它与网页的z轴有关系。层叠上下文和块级上下文类似，它是可以被创建的。创建层叠上下文具备以下任一条件即可创建层叠上下文：根元素position不为static的定位元素，且z-index不为auto而是有具体值的。层叠级别一、层叠级别 —— stacking level 的概念层叠级别是用于决策和判断：同一个层叠上下文中的背景边框和众多内部元素要以什么样的顺序来排序。即决
2021-07-06 17:54:11
294
原创 回流（重排）与重绘 —— 什么是回流和重绘，造成的原因是什么，如何去减少？
回流（重排）与重绘浏览器的渲染原理“回流 / 重排”和“重绘”的定义何时发生回流何时发生重绘*** 如何减少回流 / 重绘一、 避免逐次改变样式，样式统一批量修改二、 使DOM脱离文档流，再作批量处理三、 缓存布局属性（需即时计算的属性）四、 position属性控制其脱离文档流五、 CSS3硬件加速浏览器的渲染原理浏览器的渲染原理步骤：解析文档（HTML、SVG、XHTML），生成 DOM Tree解析CSS，生成 CSSOM Rule Tree根据 DOM Tree 和 CSSOM Rule
2021-06-30 17:09:02
1836
1
原创 JavaScript 变量提升，函数提升
JavaScript 变量提升，函数提升前提摘要变量提升、函数提升的规则例子 ①例子 ②例子 ③例子 ④总结前提摘要JavaScript 代码执行并不是简单想象地按顺序一行一行去执行，即不是按写的顺序去执行。其代码的执行编译分两个阶段：第一个阶段是会在当前环境下进行所有变量的声明和函数的声明。第二个阶段才是执行其它的代码。简单举个老生常谈的例子：console.log(num); //输出undefinedvar num = 100;看样子是在控制台输出变量num之后才声明初始化
2021-06-27 14:34:01
186
1
原创 Angular 在项目中学习@ViewChild和ElementRef的使用
Angular @ViewChild和ElementRef的使用@ViewChild@ViewChild 使用一@ViewChild 使用二小结ElementRef@ViewChild与ElementRef 结合操作子组件的DOM作为一个刚开始学习Angular的初学者，我在以Angular为开发框架的项目中见到了包含 @ViewChild 和 ElementRef 的代码。因为是边做边学，第一次见到是感觉有点疑惑陌生，又好奇。在伙伴的指导和自己查阅之下，对这二者有了大概的了解认识，并完成了项目中的开发需
2021-06-14 16:58:36
917
2
原创 JavaScript 创建对象 （工厂模式、构造函数模式、原型模式、组合使用构造函数模式与原型模式）
JavaScript 创建对象工厂模式构造函数模式三级目录总结JS创建对象的几个模式及各自优缺点工厂模式function createPerson(name,age,job){ var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayName = function(){ console.log(this.name); }; return obj;}var person1 = cre
2021-06-14 15:15:03
5799
10
原创 JavaScript 初识闭包closure及总结
JavaScript 闭包JavaScript闭包的作用JavaScript闭包的必要性JavaScript闭包的实现 —— 返回值闭包的第二点作用JavaScript闭包的注意事项JavaScript闭包的应用总结：近期学习了JavaScript闭包，查阅了一些资料，对其作一定的总结以供回顾，日后有新的理解会保持增添更新。JavaScript闭包的作用先作开头总结，JavaScript闭包主要有两大作用：读取函数内部的局部变量让函数内部的局部变量保存在内存中关于第一点，“读取函数内部的局部
2021-06-14 11:21:23
239
原创 ngx-translate实现国际化：this.translate.use()、this.translate.get()、this.translate.instant()、onLangChange
Angular ngx-translate实现国际化 ngx-translate的配置assets - i18n 创建国际化文件三级目录学习Angular，第一次在项目中遇到关于ngx-translate实现国际化的需求。将实现过程、用法稍作总结。ngx-translate的配置用npm install ngx-translate的依赖npm install @ngx-translate/core --savenpm install @ngx-translate/http-loader --sav
2021-06-12 21:12:38
2171
原创 Angular RxJS Subject主体
RxJS SubjectSubject与Observable的区别Subject作可观察对象Subject作观察者Subject与Observable的区别Subject是多播的，可以把值推送给多个观察者；Observable是单播的。Subject既可以做可观察对象，又可以做观察者Subject作可观察对象// 创建subjectvar subject = new Rx.Subject();//为subject注册两个观察者observerA、observerBsubject.sub
2021-06-07 09:39:53
228
原创 Angular RxJS入门笔记 （Observable可观察对象、Subscribe订阅、Observer观察者、Subscription对象）
RxJS入门笔记，关于Observable可观察对象、Observer观察者、Subscribe订阅，SubscriptionObservable可观察对象Observer观察者总结整体本笔记可用于入门理解和记忆RxJS的基本概念和使用。Observable可观察对象官方文档对Observable的描述：Observables 是使用 Rx.Observable.create 或创建操作符创建的并使用观察者Observer来订阅Subscribe它然后执行它并发送 next / error /
2021-06-07 09:04:26
2180
原创 通过项目实战学习：深拷贝与浅拷贝的内涵，实现深拷贝的几种方法，深拷贝解决项目异常bug
深拷贝与浅拷贝深拷贝解决项目异常bug二级目录三级目录深拷贝解决项目异常bug问题描述：有一个可接受用户edit编辑的表单。若用户输入错误，需要cancel取消原输入的值，却在表单保存了新输入错误的值，没有在cancel之后还原原来的值。二级目录三级目录...
2021-06-06 16:49:57
435
原创 Angular formControl表单应用：清除input输入框中的值value
Angular 表单formControl应用：清除input输入框中的值value需求描述代码实现需求描述这次做的是一个与angular formControl表单相关的需求。用户操作顺序如下：有一个input输入框用户在input中输入内容点击一个button保存当前内容，并提交至DataBase清空input输入框中的value，以供下一次输入。这样的需求很合理。因为在第一次输入后，用户存在后续第二次或者第三次甚至更多次输入提交操作的可能。但总不可能说去不断刷新页面加载一个新的表
2021-06-03 18:29:33
2200
原创 Angular NG-ZORRO 如何修改ng-zorro-antd组件自身的样式
Angular NG-ZORRO 如何修改ng-zorro-antd组件自身的样式方法总结：前阵子在公司实习学习中，接触到了ng-zorro-antd这个组件库，用它来做了一些业务上的内容。方便好用是不需要说的了，但是有时候需要修改它自身的样式，为的是能和其它组件能够统一美观。这里总结一下修改ng-zorro-antd组件自身样式的几种方法，供需要时查阅参考。方法总结：类名等 前加 ::ng-deep类名等 前加 :root类名等 前加 :host /deep/...
2021-06-03 17:33:50
932
原创 关于Moment.js warning：Deprecation warning: value provided is not in a recognized RFC2822 or ISO format
关于Moment.js 报错Warning信息：错误代码：解决方案近期在接手一个项目时，发现原代码运行时会报一个关于Moment.js的warning。Warning信息：Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browser
2021-06-03 16:51:10
13738
2
原创 一文浅谈总结浏览器的渲染以及解析：浏览器渲染原理、浏览器的解析、渲染页面时的常见不良现象（FOUC、白屏）
浏览器渲染过程浏览器渲染过程浏览器解析渲染页面时的常见不良现象优化关键渲染路径浏览器渲染过程解析文档（HTML、SVG、XHTML），生成DOM Tree解析CSS，生成 CSSOM Rule Tree根据DOM Tree和CSSOM Rule Tree，构建Rendering Tree 渲染树。渲染树的节点称作渲染对象，但渲染对象和DOM元素并不是一一对应的。因为不可见的DOM元素是不会插入渲染树的。布局：在浏览器生成渲染树之后，根据渲染器树来进行布局（Layout）。弄清楚各个节点在页面中的
2021-03-30 18:41:46
527
原创 前端面经 对浏览器的理解（Shell、浏览器内核），
浏览器、shell、内核关于浏览器的理解浏览器的内核（渲染引擎、JS引擎）常见的浏览器内核关于浏览器的理解用户通过URL（统一资源定位符）去访问指定的资源，浏览器则负责将用户请求访问的资源呈现、展示出来。浏览器可以分作两部分：Shell内核Shell : Shell翻译成中文是壳、外壳的意思。也就是Shell是浏览器的外壳。shell在浏览器中为用户提供界面操作，如菜单或工具栏等；内核 ：内核是浏览器的核心。shell是依靠内核才能实现浏览器的各种交互功能。浏览器的内核（渲染引擎、JS引
2021-03-30 15:25:51
340
原创 Angular 1 CLI创建新的工作区和应用、AppComponent（@Component、selector、templateUrl、styleUrls）
CLI创建新的工作区和应用、AppComponentCLI创建新的工作区和应用AppComponent三级目录CLI创建新的工作区和应用位于没有Angular工作区的文件夹中运行CLI进入该文件夹，使用"ng new" 命令AppComponentapp.component.ts代码如下：import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './ap
2021-03-23 19:59:44
307
原创 CSS 基础选择器、组合选择器、属性选择器、伪类选择器、伪元素、CSS3属性选择器、优先级
CSS 选择器总结基础选择器组合选择器属性选择器伪类选择器链接伪类:first-child 伪类基础选择器基础选择器共有四种通配符选择器：* ，匹配任何元素标签选择器： E，匹配所有的E标签元素class选择器：.info，匹配所有class包含“info”的元素id选择器：#id，匹配所有id属性为“id”的元素举例：· 通配符选择器最常见的一种用法：* { margin：0; padding:0}· 标签选择器：p { color : black ;}· class
2021-03-14 00:29:38
964
原创 前端面经 transition和animation的区别
区别：transition是简单过渡，只有两帧，即开始和结束；而animation可绘制复杂动画，可以结合keyframes去绘制每一帧。transition需要通过hover或js事件才能触发；animation不需要触发任何事件，可自发开始。transition只能触发一次；animation可以设置循环的次数@keyframes@keyframes animat{ 0% {background:red;} 25% {background:yellow;} 50% {bac
2021-03-11 09:36:31
212
原创 前端面经 link和@import的区别
link和@import都是引入外部CSS样式的方法link是链接法，@import是导入法link与@import的区别link属于html标签，没有兼容性；@import是CSS提供的，IE5以上才能识别使用link，是一边加载页面一边加载引入的CSS样式，体验良好；而@import则是加载完页面，再加载引入的样式link的优先级高于@import...
2021-03-11 09:16:01
220
原创 前端面经 如何画一条0.5px的线
如何画一条0.5px的线方法一、meta viewport方法二、transform:scale()方法一、meta viewport<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>1px的线通过 meta viewport中，scale的设置，可以缩放变成0.5倍，则得到0.5px的线。但是viewport仅限于移
2021-03-11 09:10:35
2524
原创 前端面经 CSS盒模型、CSS3 box-sizing属性
CSS盒模型CSS中的盒模型包括IE盒子模型加粗样式和标准W3C盒子模型 。· 标准盒子模型· IE盒子模型区别：标准盒模型中，width只包括content的宽度；IE盒模型，width包括content、padding和border。CSS3的box-sizing属性CSS3中引入box-sizing属性。该属性有3个值box-sizing：content-box - > 标准盒模型box-sizing：border-box - > IE盒子模型box-s
2021-03-11 08:59:44
95
原创 前端面经 http缓存机制：强缓存（expires和cache-control）、协商缓存（Etag/If-None-Match和Last-Modified/If-Modified-Since）
关于强缓存和协商缓存为什么需要缓存机制缓存的过程第一次缓存再次请求强缓存（Expires/Cache-Control）ExpiresCache-Control协商缓存（Etag/If-None-Match和Last-Modified/If-Modified-Since）Last-Modified/If-Modified-SinceEtag/If-None-Match为什么需要缓存机制缓存机制的定义： 浏览器在用户的本地磁盘存储了用户最近请求的资源。当用户再次请求同一资源时，浏览器直接从本地磁盘读取资源
2021-03-10 10:52:22
2422
原创 前端面经 如何看网站的性能
检测页面的加载时间，评判网站的性能主要有两种方法1、被动法： 在被检测页面置入脚本或探针，当有用户访问页面时，探针自动采集数据并传回数据库进行分析。特点：在被检测的页面置入脚本或探针，等有用户来访问再采集数据进而分析。所以是被动的~~2、主动法： 主动搭建分布式受控环境，模拟用户的访问请求，主动地采集性能数据并分析。特点：自己去搭建分布式受控环境，自己去模拟用户的访问请求，自己去采集性能数据并分析。即不需要等待有用户访问，自己主动检测。...
2021-03-10 08:09:05
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人