超逸の博客

写作背景女朋友要我教她CSS，于是我就折腾了一周，终于完成了这篇长文… 然后，然后？然后当我发布这篇文章的时候，她会感动到哭吗？ 熟悉HTML知识HTML常见元素head 部分 body部分 doctype的意义是什么 让浏览器以标准模式渲染 让浏览器知道元素的合法性 HTML、XHTML、HTML5的关系 HTML属于SGML（标记语言） XHTML属于XML，是HTML进行XML严格化的结果 HTML5不属于SGML或XML，比XHTML宽松HTML5有什么变化 新的语义化元素 表单增强 新的API（离线、音视频、图形、实时通信、本地存储、设备能力） 分类和嵌套变更 em和 i 有什么区别 em是语义化的标签，表强调 i 是纯样式的标签，表斜体 HTML5中 i 不推荐使用，一般用作图标 语义化的意义 开发者容易理解 机器容易理解（搜索、读屏、软件） 有利用SEO semantic microdata（语义微数据）例电影有评分 哪些元素可以自闭合 表单元素 input 图片 img br hr meta link HTML和DOM关系 HTML是“死”的（字符串） DOM ...

JS 错误信息类型语法错误1、SyntaxError 语法错误 // 变量名不规范var 1 = 1; SyntaxError: Unexpected number 意外的数字 var 1ab = 1; SyntaxError: Invalid or unexpected token 其中token指代标记的意思。 // 关键字不可赋值new = 5; SyntaxError: Unexpected token '=' // 基本语法错误var a = 5: SyntaxError: Unexpected token ':' 引用错误2、ReferenceError 引用错误、 // 变量或函数未被声明test(); ReferenceError: test is not defined console.log(a); ReferenceError: a is not defined // 给无法被赋值的对象赋值的时候var a = 1 = 2; SyntaxError: Invalid left-hand side in assignme ...

对象基础对象前置知识 /* 对象基础知识 */var teacher = { name: '张三', age: 32, sex: 'male', height: 176, weight: 130, teach: function(){ console.log('I am teaching JS'); }, smoke: function(){ console.log('I am smoking'); }, eat: function(){ console.log('I am having a dinner'); }}/* 查找 */console.log(teacher.name);teacher.teach();teacher.smoke();teacher.eat();/* 增加 */teacher.address = '北京'teacher.d ...

认识浏览器组成部分可能一说组成部分，小伙伴们就直接懵了，开门见山地说，别怕，还有更懵的在后面呢！ 组成分为两大部分： shell 和 内核（其中内核是核心部分，它代表着浏览器所使用的技术手段，而shell就是我们用户所看到的界面） 例举你知道的比较大的浏览器产商？ shell 内核 Google Chrome webkit（谷歌和苹果safari一起开发）/ blink（谷歌将技术独立出来） safari webkit firefox gecko IE trident opera（目前属于360和昆仑万维） presto ===== 手动分界线 ===== 360 QQ 遨游 猎豹 全球 搜狗 … 分界线的意义：分界面下面部分只是在 shell 上做了手段，没有专属的内核。我们回答的话答分界线上部分即可。 内核包含渲染（rendering）引擎 和 JS 引擎 渲染引擎如字面意思，就是渲染我们页面的，大致了解即可，本文在这里讲解一下 JS 引擎。 JS 引擎早期是不存在的，通过同步渲染引擎来负责JS的解析。而渲染引擎性能是有限的，所以JS解析代码能 ...

引言在上一篇 某跳动面试官：说说微信扫码登录背后的实现原理？ 文章发出之后，没想到有挺多点赞的，掘金社区前端小伙伴真是多啊，以后还是多多在掘金社区活跃起来吧，简单说一下我会整理的专栏系列： 之前，一直在 CSDN 平台发布博客，超逸の学习技术博客，发现前端活跃度不是很高，而在掘金社区我看到一系列优秀的文章，点赞数达到上千，访问量好几十万的也有，并且文章质量是真的高，能学习很多知识。 在这里，我会对一个问题进行研究，带着好奇心去看待问题，尽量用简洁易懂的话语呈现给大家，能把别人教会，对于自己而言也是蛮有成就感和收获的。 在此，分享一下上学期IT项目管理老师教课提到的人们能够记住的东西有如下规律： 听到的内容的 5% 读过的内容的10% 见过的内容的 30% 讨论过的内容的 50% 亲自做的内容的 75% 教给别人所做过的事情的 90% 如若有帮助到您，请一键三连，当然，本文表述有问题的地方，欢迎读者指正，也是一个学习的过程，谢谢~ 回归正文赶紧回到正题，这个问题也是和上一篇博客一样，也是在今年8月份的时候被问到过，当时知道class这个东西，在社区里面看过一些class继承相关知 ...

基础typeof 知多少前置知识： typeof 判断数据类型会输出如下这些： number string boolean object undefined function 需要注意的： console.log(typeof(null)) // objectconsole.log(typeof(undefined)) // undefined 开门见山，下面输出会是什么？ console.log(typeof(1 -'1')) 查看答案 number，你有没有中招呢？ console.log(typeof('1' -'1')) 查看答案 还是number，诶？怎么肥事？为啥不是 string 呢？ 上面两个题，答的怎么样呢？后续讲解显示/隐式类型转换时会给大家解答，接着继续 GO！ 下面代码会是怎样的结果？ console.log(a) 查看答案 可能你会说输出 undefined，但你又入坑了…答案是会报错。 好的，接下来继续，我再来变一下，下面又会输出什么？还是会报错吗？ con ...

三元运算基础开门见山，三元运算，我想对于很多编程语言都有提到，下面就简单一个例子来讲解一下好了。 var str = 89 > 9? ('89' > '9'? '通过了': '内层未通过') : '外层未通过';console.log(str); 查看答案 答案是 内层未通过，注意 '89' > '9'的比较，由于都是字符串，会从第一位以 ASCII码来进行比较。由于89第一位为8，于是小于 9，返回 false，走后面那个，最后打印了 内层未通过。 浅拷贝var person1 = { name: 'Chocolate', age: 21, child: { car: ['Benz', 'Mazda'], first: { name: 'cc', age: 10 } ...

前言 最近朋友的师弟找到了我，早早地就准备了询问问题，我震惊了，没想到哇，我还小有名气，话不多说，直接开门见山地看问题吧： 1. 算法题应该刷到什么程度？除了剑指offer，其它类似Leetcode还需要刷哪些题，是刷一些像HOT100类型的，还是不同标签的题象征性的刷点 2. 其它像react这种框架，还有flutter、element这种目前框架中没用到的技术是不是不急着学？ 3. 还有webpack、node这种应该学习到什么程度，目前webpack只是照着视频模拟了一下，不过这种东西很容易忘记，node还没怎么接触过 4. 网络协议之前看过面试时会问到输入url之后会发生什么，这块东西是不是直接看面经然后总结知识点会比较好？ 阅读须知 对于这四个问题，我想应该是大多数人都会考虑的，在这里，我仅发表我自己的观点与想法，如若与你的不同，请 海纳百川有容乃大。当然，你也可以在留言板提出你自己的观点（公众号没有留言板，但我会在文末提供给你留言板，欢迎来留言~） 我仅代表我个人建议，你觉得你的观点是对的，那就是对的，我不会有任何意见。 问题一 ...

前言接上一期 「高频面试题」女友：消息队列 和 事件循环系统终于弄明白了！（内附思维导图） 文章出炉后，微信好友也多了不少，还挺好的~ 最近又重新整理一下 Promise 相关知识，一方面和上一期文章有个接应，另一方面，方便自己日后复盘回顾。 本篇文章参考视频学习而来，都是自己一个字一个字敲出来的，也加了自己的理解，视频就在参考处，建议大家先看视频，后续回顾的话通过本文几个例题就好了。✿✿ヽ(°▽°)ノ✿ 学完本篇文章，你将会明白如下几大模块知识： 迭代器 生成器 promise async、await （手机端可能看不清）获取高清PDF，请在微信公众号【小狮子前端】回复【promise知识】 迭代器是什么提出问题在了解迭代器之前，我们先来提出一个问题： 遍历和迭代有什么区别？ 如下代码，对于数组、字符串、对象等我们可以按照如下方式进行遍历。 var arr = [1, 2, 3, 4];var str = '123';var obj = { a: 1, b: 2 };// 遍历数组for (let i = 0; i < ...

前言本文源码收录于 DOM-Diff 仓库，文章内容按照一位老师视频学习而来（详情见文本末尾哈），每一个字都是自己手动敲出来的，算是给自己的一个梳理和总结，下面，我们一起来学习一下 dom diff 吧。 DOM Diffdom diff 其实就是对比两个虚拟节点，然后对比它们的差异。然后再对应真实 dom 上进行一个打补丁操作。我们的目的就是找到其中的差异，然后用最小的代价来操作 dom。因为操作 dom 相对而言比较耗性能。 而对于虚拟节点呢，我们可以简单理解为普通对象。就是将真实节点用对象的方式模拟出来，通过比较两个新老虚拟节点，得到彼此的差异，形成一个补丁，最后再与真实的 dom 进行匹配，将这些补丁打到真实 dom 上去，最终，我们还是操作了原来的真实 dom，但是我们是用了差异化结果的 最小的代价 来操作的。 平级对比上文我们讲解了虚拟节点可以简单理解为普通对象，那么我们来用图示来看一看，得到其中的一个特点：左边就是旧的虚拟节点，而右边是新的虚拟节点。我们来看看有什么变化： 第一层， ul 底下的 class 由 list 变为了 wrap 第二层，第三个孩子 li 变 ...