前端开发
文章平均质量分 76
前段综合知识
洺鱼
一只萌萌的程序员
展开
-
js异步模型
笔者以前面试的时候经常遇到写一堆setTimeout,setImmediate来问哪个先执行。本文主要就是来讲这个问题的,但是不是简单的讲讲哪个先,哪个后。笼统的知道setImmediate比setTimeout(fn, 0)先执行是不够的,因为有些情况下setTimeout(fn, 0)是会比setImmediate先执行的。要彻底搞明白这个问题,我们需要系统的学习JS的异步机制和底层原理。本文就会从异步基本概念出发,一直讲到Event Loop的底层原理,让你彻底搞懂setTimeout,setImme转载 2022-10-14 14:55:59 · 246 阅读 · 0 评论 -
几个高级前端常用的API
本文在做了收录 github.com/Michael-lzg/my--article/blob/master/other/分享几个实用的API.md。转载 2022-09-18 22:52:45 · 139 阅读 · 0 评论 -
Js执行上下文和执行栈
执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念, JavaScript 中运行任何的代码都是在执行上下文中运行。原创 2022-08-25 13:21:53 · 330 阅读 · 0 评论 -
TypeScript基础
还不会TS? 带你 TypeScript 快速入门上帝视角看 TypeScriptTypeScript中文网亲手码出TypeScript最前沿的教程(基础篇)亲手码出TypeScript最前沿的教程(进阶篇)如何用 Typescript 写一个完整的 Vue 应用程序2020年前端面试复习必读文章【超三百篇文章/赠复习导图】如何编写 Typescript 声明文件Typescript玩转设计模式 之 对象行为型模式(上)TypeScript 学习资源合集TypeScript 声明文件原理TypeScript原创 2022-08-25 13:18:48 · 210 阅读 · 0 评论 -
Promise、async/await、RxJs
1.then(success=>{},error=>{})中的error回调可以捕获reject结果,但是不能捕获success回调函数中的异常,所以我们推荐使用catch()函数捕获reject结果。3.promise.then()期望参数是一个函数,如果不是函数就会发生值透传。就算发生了透传,promise.then()中的代码依旧也是会执行的。Pending(进行中)、Fulfilled(已成功)、Rejected(已失败)原创 2022-08-25 13:20:13 · 298 阅读 · 0 评论 -
EventLoop
宏任务:主代码块setTimeoutsetIntervalsetImmediate ()-NoderequestAnimationFrame ()-浏览器原创 2022-08-25 12:36:04 · 194 阅读 · 0 评论 -
ionic5 post请求报错599:http failure response for(unknown url)
现象:解决方案:post请求body之前不需要传值所以设置为null,现在必须将body改为{}才可以解决报错。原创 2021-06-08 00:26:37 · 871 阅读 · 0 评论 -
npm start error:spawn powershell ENOENT
create react app创建了一个项目,然后npm start 报错spawn powershell ENOENT。网上都说是环境变量问题,其实不完全正确。正确的步骤如下:一、检查C:\Windows\System32\WindowsPowerShell\v1.0目录下是否有powershell.exe文件。 如果没有,需要先安装对应系统的powershell。我这里安装的是powershell5,给个链接:Microsoft 下载中心。 注意:下载后的msu文件不可以直接...原创 2021-01-22 05:53:05 · 2758 阅读 · 1 评论 -
npm的package.json和package-lock.json更新策略
语义化版本在一探package-lock.json究竟之前,你必须要理解semver。它是npm背后的小小功臣。你可以从这里了解到npm是如何使用它的。概括来讲,假若你在开发一个可供其它应用使用的应用,你必须说明每次升级变更会对第三方使用产生哪些影响。这就是语义化版本想要传达的。一个版本有三部分:X, Y, Z,分别指代大版本,小版本,与查缺补漏版本。比如1.2.3,那么就是大版本1,小版本2,bugfix版本3。bugfix版本不会影响任何功能,小版本变更往往是增加新功能,也不会影响使用。而大版本变更转载 2021-01-08 02:11:34 · 1238 阅读 · 0 评论 -
移动端去除button点击后默认的黄色边框样式
a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);}或a,button,input{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-modify: read-write-plaintext-o.原创 2020-12-25 17:56:04 · 1328 阅读 · 1 评论 -
前端面试题集合
2020年前端大厂面试经验总结2020前端大厂最新面试题,这一波我是用“身子换来的”2020年4月大厂腾讯前端面经分享金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)中2020大厂web前端面试常见问题总结2020年 大前端冲刺大厂面试题集锦前端面试题汇总2020Web前端高频面试题全解析三年前端寒冬入大厂,收获蚂蚁、字节 offer 面经分享...原创 2020-08-27 18:25:11 · 261 阅读 · 0 评论 -
浏览器跨域
跨域同源策略:协议、域名、端口号相同,即为同源。同源限制:1. Cookie、LocalStorage 和 IndexDB 无法读取2. DOM 和 Js对象无法获得3. AJAX 请求不能发送跨域方案:1.JSONP2. document.domain + iframe跨域3.location.hash + iframe4.window.name + iframe跨域5.postMessage跨域6.跨域资源共享(CORS)7.nginx代理跨域原创 2020-08-16 17:06:45 · 121 阅读 · 0 评论 -
浏览器组件、浏览器进程
浏览器进程分类1、浏览器进程:浏览器的主进程(负责协调、主控),只有一个。主要作用:负责浏览器界面显示,与用户交互。如前进,后退等。 负责各个页面的管理,创建和销毁其他进程。 将渲染(Renderer)进程得到的内存中的Bitmap(位图),绘制到用户界面上。2、第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建3、GPU进程:最多一个,用于3D绘制等4、浏览器渲染进程(即通常所说的浏览器内核)(Renderer进程,内部是多线程的):不同站点的每个Tab页面各自有原创 2020-08-16 17:05:58 · 242 阅读 · 0 评论 -
前端面试---手写源码
面试题手写call/apply/bind 手写new 手写Object.create() typeof、instanceof比较、原理、实现 手写深拷贝、深比较、深合并 手写节流与防抖函数 数组操作(扁平化、去重、求和、最大最小值、交并差集、排序、乱序) 字符串操作(数字千分化、驼峰命名转化、字符串查找、解析 URL Params 为对象) 手写函数柯里化、反柯里化 手写promise 手写async/await 手写支持绑定、解绑和派发的事件类Event (发布/订阅模式) 手原创 2020-08-16 17:04:43 · 270 阅读 · 0 评论 -
v8执行js过程、垃圾回收、内存泄漏
v8执行js代码的过程1.将源代码生成抽象语法树AST:源代码进行词法分析和语法分析后生成AST2.生成字节码:根据AST生成字节码,字节码通过解释器转换为机器码才能执行3.执行代码:如果一段字节码是第一次执行,解释器会逐行执行;如果在执行字节码过程中发现有热点函数,JIT即时编译器就会把热点函数编译为机器码,并保存起来,下次就可以直接使用了,省去了将字节码转换为机器码的过程,提升了执行效率垃圾回收新生代内存回收新生代中用 Scavenge 算法来处理。所谓 Scavenge 算法.原创 2020-08-16 17:03:50 · 188 阅读 · 0 评论 -
浏览器缓存
缓存分类1.强缓存2.协商缓存强缓存1、Expires2、Cache-Control协商缓存1、Last-Modified和If-Modified-Since2、 ETag和If-None-Match浏览器缓存的四个位置Service Worker Cache Memory Cache Disk Cache Push Cache强缓存和协商缓存的区别* 协商缓存跟强缓存不一样,强缓存不发请求到服务器,所以有时候资源更新了浏览器还不知道,但是协商缓存会发请求原创 2020-08-16 17:01:56 · 143 阅读 · 0 评论 -
经典面试题:从输入URL到显示发生了什么?
实际上就是浏览器加载、解析、渲染的过程。 URL地址解析 DNS域名解析 客户端与服务端建立TCP连接(三次握手) 把客户端信息传递给服务器端(发送HTTP请求) 服务器得到并处理请求(HTTP响应内容) 客户端渲染服务器返回的内容 和服务端断开TCP连接(四次挥手) 参考:浏览器加载、解析、渲染的过程浏览器的渲染:过程与原理浏览器工作机制及资源加载浏览器页面资源加载过程与优化再谈 load 与 ...原创 2020-08-16 17:01:08 · 271 阅读 · 0 评论 -
浏览器页面渲染机制
渲染流程:1.解析HTML,生成DOM树(DOM)2.解析CSS,生成CSSOM树(CSSOM)3.将DOM和CSSOM合并,生成渲染树(Render-Tree)4.计算渲染树的布局(Layout)5.将布局渲染到屏幕上(Paint)思考:第三步构建渲染树的时候,渲染引擎需要遍历DOM树节点并从CSSOM树中找到匹配的样式规则,再匹配过程中是通过自上而下还是自下而上的方式呢?关键概念:CSS阻塞渲染JS阻塞页面重排(Reflow)、触发重排重绘(Repa...原创 2020-08-16 17:00:24 · 183 阅读 · 0 评论 -
前端模块化总结
模块化历史IIFE(自执行函数)>>AMD(RequireJS实现)>>CMD(SeaJS实现)>>CommonJS(NodeJs)>>UMD>>ES6 Modules(模块化直接成为了Javascript语言规范中的一部分)参考:JavaScript模块化进化史CommonJS服务端模块化教程(Node.js模块化教程)CommonJS浏览器端模块化教程ES6-Babel-Browserify模块化教程ES6 Mod原创 2020-08-16 16:58:36 · 172 阅读 · 1 评论 -
前端面试---CSS
面试题CSS解析原理CSS从右往左解析到底好在哪里天天都在使用CSS,那么CSS的原理是什么呢?说说盒模型。深入理解CSS盒模型如何清除浮动?为什么需要清除浮动?CSS浮动(float,clear)通俗讲解可能是最全面最易懂的解析前端浮动的文章CSS3新特性有哪些?css3常用新特性总结(有例子超详细)水平居中、垂直居中、水平垂直居中的实现方式。16种方法实现水平居中垂直居中弹性盒布局方式:flex用过哪些属性?Flex 布局教程:语法篇Flex原创 2020-08-16 16:57:09 · 274 阅读 · 0 评论 -
前端性能优化
前言性能优化是一个非常大的课题,涉及的知识面非常广。大的分类加载优化 骨架屏 CSS Sprites 为了减少编译时间,我们可以采用减少代码文件的大小或者减少书写嵌套函数的方式 为了让 V8 优化代码,我们应该尽可能保证传入参数的类型一致 渲染优化Yahoo Developer Network包含 7 个类别共 35 条前端性能优化最佳实践功能点优化首屏优化长列表优化性能指标可以通过 Audit 工具获得网...原创 2020-08-16 16:56:05 · 88 阅读 · 0 评论 -
一道javascript面试题[来自腾讯]
function Parent() { this.a = 1; this.b = [1, 2, this.a]; this.c = { demo: 5 }; this.show = function () { console.log(this.a , this.b , this.c.demo ); } } function C转载 2020-08-03 20:52:51 · 272 阅读 · 0 评论 -
Gulp入门教程
###Gulp介绍*中文主页:http://www.gulpjs.com.cn/*gulp是与webpack功能类似的**前端项目构建**工具,也是基于Nodejs的自动**任务运行器***能自动化地完成javascript/coffee/sass/less/html/image/css等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务*gulp更高效(异步多任务),更易于使用,插件高质量###使用步骤:1.安装...原创 2020-07-13 09:02:07 · 227 阅读 · 0 评论 -
JavaScript模块化进化史
##JS模块化*什么是模块?*将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起*块的内部数据/实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通信*一个模块的组成*数据--->内部的属性*操作数据的行为--->内部的函数*模块化*编码时是按照模块一个一个编码的,整个项目就是一个模块化的项目##模块化进化史1.全局function模式*module1.js...原创 2020-07-11 06:15:19 · 156 阅读 · 0 评论 -
CommonJS浏览器端模块化教程
###1.创建项目结构```|-js|-dist//生成打包文件的目录|-src//源码所在的目录(我们编写的、没经过工具处理的代码,叫做源码)|-module1.js|-module2.js|-module3.js|-app.js|-index.html|-package.json{"name":"test-0318","version...原创 2020-07-11 06:13:02 · 338 阅读 · 0 评论 -
CommonJS服务端模块化教程(Node.js模块化教程)
###1.安装Node.js###2.创建项目结构```|-modules|-module1.js|-module2.js|-module3.js|-app.js|-package.json{"name":"test-0318","version":"1.0.0"}```###3.模块化编码:*module1.js```...原创 2020-07-11 06:10:58 · 186 阅读 · 0 评论 -
webpack3-搭建脚手架教程
###1.了解Webpack相关*什么是webpack*Webpack是一个模块打包器(bundler)。*在Webpack看来,前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理*它将根据模块的依赖关系进行静态分析,生成对应的静态资源*四个核心概念*Entry:入口起点(entrypoint)指示webpack应该使用哪个模块,来作为构建其内部依赖...原创 2020-07-11 02:33:08 · 487 阅读 · 0 评论 -
ES6-Babel-Browserify模块化教程
###1.创建项目结构```|-js|-src|-module1.js|-module2.js|-module3.js|-app.js|-index.html|-package.json{"name":"es6-modular-0318","version":"1.0.0"}```###2.安装babel-cli(cl...原创 2020-07-11 02:33:51 · 314 阅读 · 0 评论 -
前端技术栈---看完这篇就够了
html5、css3、JavaScript、nodejs、TypeScript、前端构建(webpack、gulp、grunt)、chrome DevTools、前端适配、单元测试、自动化测试、http协议、前端通信、工程化(模块化、组件化、规范化、自动化)、浏览器(渲染机制、v8原理)、前端性能优化、前端安全、多端应用(微信公众号、小程序、ReactNative、Flutter、Electron)Js高级:1.数据类型和内存空间2.执行上下文3.变量对象4.作用域和作用域链5.闭包6.thi原创 2020-05-24 15:28:52 · 8932 阅读 · 0 评论 -
JavaScript 中的 this
全局执行首先,我们在全局环境中看看它的 this 是什么:first. 浏览器:console.log(this);// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: Deprecate转载 2016-12-29 11:51:03 · 246 阅读 · 0 评论 -
深入浅出 妙用Javascript中apply、call、bind
apply、call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。 JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。 先来一个栗子: function fruits() {}fruits.pro转载 2016-12-29 11:34:08 · 348 阅读 · 0 评论 -
浅谈javascript中call()、apply()、bind()的用法
call(thisObj,arg1,arg2…)、apply(thisObj,[obj1,obj2…])这二个方法是每个函数都包含的非继承的方法call(thisobj[, args])和apply(thisobj[, args])作用都是一样的,简单来说就是改变当前使用该方法的对象中的this指向,指向调用方法中的thisObj对象二者的区别(第一个参数是相同的)就是call方法中传入的参数是是一转载 2016-12-29 10:55:53 · 285 阅读 · 0 评论 -
IndexedDb、Web Sql、localStorage以及localForage使用
测试浏览器localStorage存储容量: https://arty.name/localstorage.html一、IndexedDb 对象数据库二、Web Sql 关系数据库三、localStorage key-value字符串四、localForage 根据浏览器支持情况自动适配IndexedDb、Web Sql、localStorage参考资料: http://www.cnbl原创 2017-01-05 18:34:25 · 1984 阅读 · 0 评论 -
js ==与===区别
1、对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等 2)同类型比较,直接进行“值”比较,两者结果一样2、对于Array,Object等高级类型,==和===是没有区别的 进行“指针地址”比较3、基础类型与高级类型,==和===是有区别的 1)对于==,将高级转化为基础转载 2016-12-19 19:58:35 · 264 阅读 · 0 评论 -
如何避免JavaScript的内存泄露及内存管理技巧
发表于谷歌WebPerf(伦敦WebPerf集团),2014年8月26日。 高效的JavaScript Web应用必须流畅,快速。与用户交互的任何应用程序,都需要考虑如何确保内存有效使用,因为如果消耗过多,页面就会崩溃,迫使用户重新加载。而你只能躲在角落哭泣。 自动垃圾收集是不能代替有效的内存管理的,特别是在大型,长时间运行的Web应用程序中。在这次讲座中,我们将演示如何通过Chrome的转载 2016-12-21 19:23:53 · 338 阅读 · 0 评论 -
JS基本数据类型
一、简单数据类型 1.undefined 未定义2.null 空对象指针3.boolean true,false4.number 整数,浮点数,NaN5.string 字符串二、复杂数据类型 1.object 引用类型。Array,Date,function都是继承自object。 实例化两种方式:new操作符;对象字面量表示法。原创 2016-12-21 11:34:41 · 219 阅读 · 0 评论 -
JSONP是什么
一、JSONP的诞生首先,因为ajax无法跨域,然后开发者就有所思考 其次,开发者发现, <script>标签的src属性是可以跨域的 把跨域服务器写成 调用本地的函数 ,回调数据回来不就好了? json刚好被js支持(object) 调用跨域服务器上动态生成的js格式文件(不管是什么类型的地址,最终生成的返回值都是一段js代码) 这种获取远程数据的方式看起来非常像ajax,但其实并不一转载 2016-12-29 14:31:18 · 211 阅读 · 0 评论 -
JavaScript易错知识点整理
1.变量作用域var a = 1;function test() { var a = 2; console.log(a); // 2}test();上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2。var a = 1;function test2() { console.log(a); // undefined var a =转载 2016-12-29 15:29:29 · 284 阅读 · 0 评论 -
彻底理解js中this的指向
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。 为什么要学习转载 2016-12-29 16:36:54 · 249 阅读 · 0 评论 -
Javascript 函数声明和函数表达式的区别
Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装、继承等,也可以让代码得到复用。但事物都有两面性,Javascript函数有的时候也比较“任性”,你如果不了解它的“性情”,它很可能给你制造出一些意想不到的麻烦(bugs)出来。 Javascript Function有两种类型: 1)函数声明(Function转载 2017-02-28 14:09:13 · 511 阅读 · 0 评论