刷题刷到手抽筋-CSDN博客

原创写给想要入行前端的朋友

对于有想法入行前端或者在考虑要不要入行前端的同学，可能会有很多疑惑，前端好入行吗？应该自学还是上培训班？如果自学的话怎么自学？要学哪些内容？有哪些资料？学到什么程度可以找工作？…我根据自己的经验，给出自己对于一些常见问题的答案，然后分享一些网上优质免费的资料。希望每个努力的人都能得到自己理想的结果。心态和认知首先，对于0基础的通信，在决定要入行前端之前，一定要先先明白几个事情：前端是有一定门槛的，尤其是非计算机专业，没有编程经验的同学，并不是很容易入门。借用知乎上一个过来人的说法：“做好脱一层皮

2022-05-20 17:16:50 388

原创前端面试问题：扫码登录原理详解

一、简介从登录的交互形式角度，登录有很多方式：账号密码登录、验证码登录、手机号一键登录、扫码登录等等。今天我们聊一聊扫码登录的原理。先来看两个扫码登录的场景：1. 手机已经登录知乎，如果我们想在PC网页登录，可以使用知乎移动端扫码登录。2. 使用微信扫码登录PC网页ProcessOn （这是一个免费作图的网站）。从账号体系角度，这是扫码登录的两种方式：自有账户登录登录和第三方登录。我们在面试中问“请讲一讲扫码登录的原理”，通常指的是自有账户登录；而在实际业务开发中，基于微信的第三方登录是很

2022-05-20 17:07:19 3165 1

原创前端入门自学资料汇总

学习网站视频教程b站慕课网优课网（这是个付费网站，想要免费学习的可以忽略）手册菜鸟教程牛客ES6入门教程基础教程html + css黑马最新前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程 27hpink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程 56h公号众：灵题库，前端学习资料、面试刷题汇总JavaScriptpink老师 JavaScript基础语法 48hVuevue todolist 图文，开胃菜，用于

2022-05-20 16:52:39 809

原创 Typescript声明文件详解

简介声明文件是以.d.ts为后缀的文件，开发者在声明文件中编写类型声明，TypeScript根据声明文件的内容进行类型检查。（注意同目录下最好不要有同名的.ts文件和.d.ts，例如lib.ts和lib.d.ts，否则模块系统无法只根据文件名加载模块）为什么需要声明文件呢？我们知道TypeScript根据类型声明进行类型检查，但有些情况可能没有类型声明：第三方包，因为第三方包打包后都是JavaScript语法，而非TypeScript，没有类型。宿主环境扩展，如一些hybrid环境，在window

2022-05-17 07:47:00 4070

原创如何让项目支持Typescript

目标支持ts转译识别.ts、.tsx、.d.ts文件编辑器语法检查和提示（vscode默认支持TypeScript语法，会根据tsconfig.json检查类型，并给出提示）eslint（tslint已经不再推荐）支持JSX使用react实现以webpack打包工具为例。【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】支持ts转译webpack支持ts转译有两种方案：基于babel解析器和基于tsc解析。基于babel（查看官网或者npmjs或者github

2022-05-17 07:46:53 376

原创 webpack的sourcemap各种参数详解

webpack配置中的devtool字段可以允许我们控制sourcemap的生成，提供开发时候的代码定位功能关于sourcemap可以参考 sourcemap详解1. sourcemap关键字sourcemap关键字如下eval使用eval包裹代码模块（这个代码块是转译后的代码，并未进行打包和压缩）eval包裹每个代码块时候，会在后面增加"sourceURL"（和sourcemap里的"sourceMappingURL"不同）用来定位到原文件。eval模式优势在于，它是将每个模块单独eval

2022-05-17 07:46:44 550

原创前端性能优化之数据预下载

一、前端预渲染的局限我们知道前端预渲染的原理是：构建打包之后，插件会在本地启动express静态服务，serve打包好的静态资源。然后再启动一个无头浏览器（例如Puppeteer），浏览器从服务器请求网页，网页运行时候会请求首屏接口，用拿到的数据渲染出包含内容的首屏后，无头浏览器截屏并替换掉原来的html。但是在单页应用中存在一个问题，前端路由切换时候，还是会请求接口，而不会加载预渲染好的html，例如预渲染index.html和about.html，但是从index.html跳转about.html时

2022-05-17 07:46:35 286

原创前端性能优化之首屏预渲染

本文介绍一种优化首屏访问速度的技术：前端预渲染，并封装自定义的React hook，解决预渲染中的数据初始化问题。一、首屏速度慢的问题如果网站页面首屏访问比较慢，应该怎么优化呢？这要结合实际情况，有非常多的手段可以提升首屏访问速度，今天我们来聊一聊其中一种技术：前端预渲染。先上效果图上面是一个前端刷题网站：灵题库（https://www.lingtiku.com，一个前端面试刷题题库，收集大厂真题）。可以看到优化之前，页面要在“题库加载中”状态停留几秒，才能获取到数据，渲染出题集列表。优化之后

2022-05-17 07:46:29 2103

原创 webpack性能优化

性能分析1. 统计基本信息使用webpack内置的stats可以统计出构建时间、构建资源清单及资源大小等信息使用方法：1. cliwebpack --env production --json > stats.json2. node APIwebpack(config, (err, stats) => { console.log(stats);});2. 速度分析使用speek-measure-webpack-plugin插件功能分析出整个构建时间和每个loa

2022-05-16 07:04:20 869

原创初识webpack

一、简介本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。首先介绍一下前端打包和构建的概念。前端打包，从字面意思，是将多个文件合并成一个文件。因为前端模块化开发，不同模块放在不同的文件中，而发布运行时候，为了减少网络请求，应该将文件合并在一起。webpack做的就是这个工作。当然前端代码开发完成将要发布时候，不仅仅打包就够了，还有很多工作要做：代码压缩，为了减小运行时代码体积，提升加载速度，另外也为了降低代码可读性，从而提升安全性，需要对代码进行混淆压

2022-05-16 07:04:09 695

原创如何使用Babel实现polyfill

babel是什么babel官方文档中对babel有明确的定义：Babel 是一个 JavaScript 编译器Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。当然babel已不仅仅用于转换ECMAScript 2015+ ，例如它还可以转换typescript、flow。babel做的工作是将源代码解析为AST更改/转换AST打印AST(转换为源

2022-05-16 07:04:00 1772

原创原型和原型链

一、问题下面代码执行结果？（原型prototype）function Test() {}const t1 = new Test();console.log(t1.__proto__ === Test.prototype);console.log(Test.prototype.constructor === Test);console.log({}.constructor === Object);console.log(Test.prototype.__proto__ === Obje

2022-05-16 07:03:47 114

原创 JavaScript继承

一、继承的概念谈到继承首先应该说明一下类和对象的概念。类是拥有共通属性和行为的实体的抽象，而对象是一个具体的实例。例如下面这个类Person（人）：function Person(name, age) { this.name = name; this.age = age; this.sayHello = function() { console.log('hello'); }}const p1 = new Person('张三', 11);const p2 =

2022-05-16 07:03:37 85

原创作用域、变量提升和闭包

一、说明先浏览题目，判断自己对作用域、变量提升和闭包的掌握情况。然后了解概念和原理，再对照问题检查掌握情况。二、题目下面代码输出的结果？（函数作用域）var name = 'window';console.log(name);function outer() { var name = 'outer'; console.log(name); function inner() { console.log(name); } inn

2022-05-16 07:03:25 147

原创 JavaScript数据类型的分类、判断和转换

简介编程语言会有不同的数据类型，这是因为数据是对不同场景的实体的量化抽象，不同实体之间会有区别，另外，不同类型的数据的应用场景和操作也是不一样的。例如提示的话术就应该用字符串类型，可以拼接你好，我是${name}。而例如游戏得分应该用数值类型，可以进行加减等运算。数据类型JavaScript类型介绍数据类型分类ECMSScript有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number、String。还有一种复杂的数据类型——Object。—— 《

2022-05-16 07:03:16 164

原创前端面试题：ES6 module和CommonJS的区别？

ES6 module和CommonJS到底有什么区别？“ES6 module是编译时加载，输出的是接口，CommonJS运行时加载，加载的是一个对象”，这里的“编译时”是什么意思？和运行时有什么区别？“接口”又是什么意思？“ES6 模块输出的是值的引用，CommonJS 模块输出的是一个值的拷贝”，那么“值的引用”和“值的拷贝”对于开发者又有什么区别呢？下面通过一些示例详细说明ES6 module和CommonJS的区别。【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】编译时导

2022-05-16 07:02:48 577

原创 requestAnimationFrame和requestIdleCallback

简介requestAnimationFrame和requestIdleCallback的应用场景并不一样，requestAnimationFrame是为了实现更流畅和性能更好的动画；后者是为了在渲染空闲时间执行优先级不高的操作，以避免阻塞渲染。两者放到一起进行说明是因为它们都是由浏览器控制执行时机，而不是由开发者通过定时器控制。另外，相对于不使用这两个方法，使用它们都能在一定的情况下获得性能的提升。在了解这两个方法之前要先回顾一下渲染流水线。在性能优化中已经讨论过渲染流水线。那么这两个方法的回调在渲

2022-05-15 07:56:28 1772

原创使用Nginx访问日志统计PV和UV

一个网站当用户量增大时候，不可避免有统计pv和uv的需求。UV（Unique Visitor）：独立访客，以cookie为依据区分不同访客，UV计算一天之内（00:00-24:00），访问网站的访客数量。PV（Page View）：页面访问量，同一个用户对页面多次访问累计。本文介绍一种通过分析nginx日志统计pv、uv的方法。一、方案设计如何根据Nginx的访问日志统计pv和uv呢？我们可以通过分析nginx的访问网站页面的日志来统计参数，比如一个单页应用的博客网站，用户访问/、/arti

2022-05-15 07:56:20 2301

原创 42道大厂面试真题，你背过几道？

一直在搜集大厂的面经，最近整理了一些Vue的面试题，总结了答案和详细的解析。关注「灵题库」，更多面试真题 & 详解。1. vue computed和watch的区别【网易,京东,拼多多】知识点computed和watch的区别题目讲一下vue组件的computed和watch的区别。答案应用场景不同computed用在根据data属性或者其他computed计算得到一个新值的情况，computed的值一般被用在渲染中。watch用在监听数据变化，然后做一些有副作用的操作的场景。

2022-05-15 07:56:10 397

原创如何使用NodeJS发送邮件

对于登录注册或者一些监控、数据处理的定时任务，可能需要发送邮件的能力。今天分享一下使用node server发送邮件的流程。发送邮件的过程是，你的客户端给邮件服务器发信息，然后邮件服务器发给目标邮件服务器，目标邮件服务器再通知到客户端，目标用户就收到了。如果我们使用网易客户端可以直接用账号密码登录自己的邮箱。使用node server发邮件，相当于第三方客户端。第三方客户端指的就是除了网易自己的客户端外的其他客户端。发邮件流程变成了这里有个问题，使用网易客户端可以直接通过账号密码登录邮箱，第

2022-05-15 07:56:02 3478 2

原创 promise大厂面试真题总结

我在网上搜索大厂面经，总结了一些promise的经典面试题。希望能帮助到需要的同学。更多题目，可以访问灵题库关于promise的“说出代码执行结果”的面试题解题思路，可以参考我的另一篇文章：一文讲透Promise面试题：说出代码执行结果1. 说出代码执行结果（百度）题目说出下面代码执行结果const promise = new Promise((resolve,reject)=>{ console.log(1); resolve(); console.log(2)

2022-05-15 07:55:54 227

原创 Redux学习笔记

一、状态机redux用来帮助我们管理应用的状态，它本身和React并无关系，但是非常多的React应用都选择是用redux管理应用的状态。在实际的React项目中，使用redux和react-redux这两个工具。react-redux这个工具提供了一系列的简洁api，让我们更好地在React中使用redux。redux的设计理念基于状态机的概念。当一个应用的状态较多，状态变化逻辑比较复杂时候，使用状态机来梳理逻辑会有助于开发者理解和实现。状态机提出“状态”（state）和“操作”（action）的概

2022-05-15 07:55:42 179

原创 React性能优化指南

React性能优化方法总结使用React开发的项目，可以从加载性能和运行时性能两个方面进行优化。加载性能优化的目标是让用户更早地看到界面、更早地和应用交互。运行时性能优化目标是降低卡顿，交互更流畅。运行时1. 避免不必要的渲染我们知道React的setState会触发diff和更新。默认是将整个组件树进行对比，但很多情况下diff是不必要的，因为一个子组件的props没有改变，就不需要进行diff工作。为了避免这种对没有改变props的子组件进行多余的diff工作的情况，React提供了shou

2022-05-15 07:55:33 224

原创 React进阶

生命周期钩子关于生命周期钩子，官方文档给出了详细的说明React生命周期 - 官方文档不同阶段调用的生命周期钩子挂载阶段当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor()static getDerivedStateFromProps()render()componentDidMount()更新阶段当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：static getDerivedStateFromPro

2022-05-15 07:55:17 190

原创 FP、FCP、FMP、LCP都是什么P？

1. 简介面试中经常问到前端性能监控相关指标，你知道FP、FCP、FMP、LCP代表什么事件吗？它们的先后顺序如何呢？如何计算？前端性能监控中常用哪些指标？本文将介绍前端项目中常用到的性能指标和它们的计算方法以及实际应用场景。最初，评价前端页面加载性能有两个指标：DOMContentLoaded和load事件，分别代表DOM构造完成和首屏资源加载完成。对于之前的页面和现代的服务端渲染的页面，这两个指标都可以很好地衡量首屏内容展示时间。但对于现代复杂的单页应用，都是通过JS操作DOM向页面添加主要内容

2022-05-15 07:55:08 8885 1

原创 JavaScript事件循环

单线程和异步为什么JavaScript引擎是单线程的？为什么JavaScript要引入异步编程？这些都是老生常谈，不做赘述。值得说明的是，js的事件循环正是用来实现异步特性的。事件循环概述js的执行机制就是事件循环。js在执行时，有以下几个主要部分参与了事件循环。执行栈，用来创建执行环境，执行js代码异步处理模块，用来处理异步事件任务队列，包括宏任务队列和微任务队列，用来控制消息的生产消费事件循环的过程为：当执行栈空的时候，就会从任务队列中，取任务来执行。共分3步：取一个宏任务来执行。

2022-05-15 07:54:40 83

原创图解Promise面试题：说出代码执行结果

一、一个面试题先来看一个字节面试的真题console.log(1);new Promise(resolve => { resolve(); console.log(2);}).then(() => { console.log(3);});setTimeout(() => { console.log(4);}, 0);console.log(5);这是一个经典的promise的代码执行结果的面试题，下面我们说明一下这类题目应该如何解

2022-05-14 16:33:28 1437

原创前端面试：如何实现自适应正方形？

实现自适应的正方形效果，即让元素高度随宽度改变。实现的思路是父元素设置宽度，子元素宽度100%，然后控制子元素撑开父元素的高度，撑开的高度和宽度成一定比例。正方形就是1:1，其他比例的实现原理相同。有两种方式，一种是使用子元素的padding-top或者padding-bottom撑开父元素高度，因为子元素的padding的百分比是相对于父元素的宽度。另一种方法是用子元素的伪类将父元素高度撑开。【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】<!DOCTYPE ht

2022-05-14 16:32:37 828

原创移动端自适应和发丝线的实现

本文介绍移动端的自适应、flexible.js的原理和发丝线的实现首先我们需要了解相关概念基本概念像素不同场景下像素的含义不同。设备像素和图像像素显示设备（显示器）是通过排列的显示器件来显示图像的，一个这样的显示器件称为一个“设备像素”。例如iPhone6横向375个像素，纵向667个像素。每个像素可以独立设置颜色。图像像素指一个图像（位图）的最小展示单元，每个像素只能有一种颜色。物理像素和逻辑像素物理像素指的就是设备像素，一个设备的物理像素是它的固有属性，显示设备还会提供逻辑像素给应用

2022-05-14 16:32:16 208

原创为什么说Vue是渐进式框架？

渐进式Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。—— Vue官网介绍什么是渐进式呢？简单地说，渐进式的概念是分层设计，每层可选，不同层可以灵活接入其他方案架构模式。举个例子，我们要买一台电脑，店家给我们提供了一个IBM。官方可能会提供windows作为可选，我们也可以在电脑上安装我们自己喜欢的Ubuntu。装完系统后，官方可能还提供了一系列的“装机必备”

2022-05-14 16:29:07 4019

原创 Vue中的各种响应式原理

简介使用Vue开发应用，当我们修改Vue组件的data的属性后，视图会自动更新，这种特性我们可以称为“响应式”。那么Vue是如何实现响应式的呢？即Vue使如何实现我们修改data属性的值后，视图能够自动更新的呢？简单地说，Vue在组件初始化时候，通过发布-订阅模式将data的属性设置为响应式，data的属性作为发布者，Vue会在渲染时候创建订阅者，订阅者会订阅data的属性值变化，进行更新视图的操作。除了渲染需要订阅data的属性的变化，computed和watch也需要订阅data属性变化，它们都是

2022-05-14 16:28:42 249

原创 Vue Router和前端路由原理

一、前端路由什么是前端路由？简单地说，前端路由是一种根据url来渲染前端组件的技术。前端路由应用于什么场景？多页面的场景，在多页面的场景下，相对于后端路由，前端路由由于可以实现无刷新的效果，用户体验更好。比如，当我们的应用有两个页面，home主页，和user用户页面时候，我们希望https://my.domain.com/home访问到主页的内容，https://my.domain.com/user访问用户页面，我们就可以使用前端路由来实现。使用前端路由，每个访问路径会对应一个组件，这个组件我们页称

2022-05-14 16:27:49 125

空空如也

空空如也