
高级前端编程
文章平均质量分 78
掌握js底层运行机制,手写源码
uperficialyu
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
浏览器EventLoop解析
任务队列因为JavaScript是单线程的。意味着,前一个任务结束,才会执行后一个任务。如果前面一个任务执行的时间很长,后面一个任务不得不等待,会形成卡死现象。如果仅仅只是计算量太大了,也算了。但是很多时候,cpu是闲着的,比如io输入输出,ajax请求,难道不得不等待结果,再执行吗?JavaScript语言的设计者意识到,这时主线程完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。等到IO设备返回了结果,再回过头,把挂起的任务继续执行下去。于是,所有任务可以分成两种,一种是同步任务原创 2021-01-03 19:11:28 · 189 阅读 · 0 评论 -
前端跨域的七种解决方案
前端开发的历史年轮服务端渲染客户端渲染(同源策略)客户端渲染(跨域方案)半服务端渲染(SSR)谈谈你对跨域的理解跨域主要分3部分:协议相同域名相同端口相同只要有一个不同,那么就是跨域 // 地址 http://www.baidu.com 协议:http:// 域名:www.baidu.com 端口:8080(http) 443(https) 默认端口省略 http://www.baidu.com/login.html // 同源 http://w原创 2020-12-29 22:55:27 · 816 阅读 · 1 评论 -
面试再也不怕被问到js数据类型了
js有哪些数据类型js中的数据类型主要分为2种:基本数据类型(值类型)number(数字)string(字符串)boolean(布尔)null(空)undefind(未定义)symbol(唯一值) ES6中新增的数据类型(不能被new) 创建唯一值Symbol(10)===Symbol(10):falsebigint(大数据值) ES6中新增的数据类型(不能被new) Number.MAX_SAFE_INTEGER(最大安全数)引用数据类型object(对象)Array(数原创 2020-12-28 23:44:10 · 512 阅读 · 2 评论 -
不一样的函数防抖和节流
防抖和节流浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。为了优化体验,需要对这类事件进行调用次数的限制。狂点一个按钮页面滚动入模糊匹配。。。。。。防抖(debounce)在某一次高频触发下,我们只识别一次(可以控制开始触发,还是最后一次触发)详细:假设我们规定500MS触发多次算是高频,只要我们检测到是高频触发了,则在本次频繁操作下(哪怕你操作了10次)也是只触发一次…<原创 2020-12-27 20:55:11 · 6113 阅读 · 11 评论 -
事件处理机制
事件事件是元素(或者浏览器)天生自带的行为,只要行为触发,则会触发相关的事件行为;我们原有基于xxx.onxxx=function(){}属于事件绑定:给某个事件行为绑定方法,再行为触发的时候可以通知方法执行事件鼠标事件click 点击(PC) 单击(移动端)dblclick 双击contextmenu 鼠标右键mousedown 按下mouseup 抬起mousemove 移动mouseenter/mouseleave 进入和离开mouseover/mouseout 滑原创 2020-09-19 18:23:39 · 737 阅读 · 0 评论 -
js构造函数
构造函数构造函数执行 new xxx()构造函数执行就是创建自定义类和类所对应的实例Func被称为类 f1被称为当前类的一个实例像普通函数执行一样,把函数执行,并且私有上下文和形参赋值等都操作一遍特殊的操作在形成私有上下文之后,首先默认会创建一个对象(实例对象)让当前上下文中的THIS指向创建的这个对象所以接下来代码执行过程中所有的 this.xxx=xxx 都是给实例对象设置私有的属性和方法代码执行完成后,看是否有返回值,没有返回值默认返回创建的实例对象,如果有返回值,看返回值的原创 2020-09-06 15:32:37 · 369 阅读 · 0 评论 -
闭包的应用
闭包的应用循环绑定事件闭包的方式var body = document.querySelector('body'), buttons = document.querySelectorAll('button'), arr = ['red', 'green', 'blue'];// 方法1for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = (function (i) { return functio原创 2020-09-05 20:03:25 · 206 阅读 · 0 评论 -
let、var、const的区别
let、var、const的区别JS中声明变量或者函数的方式// 【传统】var n = 10;function func(){}var func = function(){};// 【ES6】let n = 10;const m = 20;let func = ()=>{};import xxx from 'xxx';let和const的定义// =>const设置的是常量,存储的值不能被改变 【不对】// =>const创建的变量,它的指针指向一旦确定,不原创 2020-09-05 20:00:11 · 154 阅读 · 0 评论 -
前端每日一练
20200824_let、const、var的区别20200825_闭包的理解20200826_定义函数的方法20200827_类组件和函数组件的区别20200828_如何避免组件的重新渲染20200829_instanceof原理20200830_当调用setState时,React render 是如何工作的...原创 2020-08-30 23:21:47 · 307 阅读 · 0 评论 -
浏览器底层渲染机制
浏览器渲染机制页面之所以能渲染从服务器获取需要渲染的内容(URL解析/DNS/TCP/HTTP…)浏览器基于自己的渲染引擎(例如:webkit/gecko/trident/blink…)开始自上而下加载渲染代码服务器获取的是文件流浏览器首先把16进制的字节流信息编译为“代码字符串”按照w3c规则进行字符解析,生成对应的Tokens,最后转换为浏览器内核可以识别渲染的DOM节点按照节点最后解析为对应的树DOM树,CSSOM树,Render树浏览器在css资源还没有请求回来之前,先生原创 2020-07-10 10:57:41 · 548 阅读 · 0 评论