基础篇 一、HTML、HTTP、web综合问题 1 前端需要注意哪些SEO 对于SPA单页应用，可以使用前后端同构（SSR）的方式。通过Node返回HTML静态页面，进行SEO。 还可以判断网站的读取者：如果是用户则用spa展示，如果是爬虫则用后端渲染的方式，返回HTML静态页面alt 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取 重要内容不要用js输出：爬虫不会执行js获取内容 少用iframe：搜索引擎不会抓取iframe中的内容 非装饰性图片必须加alt 提高网站速度：网站速度是搜索引擎排序的 ...

中级篇 一、JS 1 谈谈变量提升 当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境。 b() // call b console.log(a) // undefined var a = 'Hello world' function b() { console.log('call b') } 想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行环境时，会有两个阶段。第一个阶段是创建的阶段，JS 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 undefined，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用 在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于 ...

进阶篇 一、JavaScript进阶 1 内置类型 JS 中分为七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。 基本类型有七种： null，undefined，boolean，number，string，symbol。 其中 JS 的数字类型是浮点类型的，没有整型。并且浮点类型基于 IEEE 754标准实现，在使用中会遇到某些 Bug。NaN 也属于 number 类型，并且 NaN 不等于自身。 对于基本类型来说，如果使用字面量的方式，那么这个变量只是个字面量，只有在必要的时候才会转换为对应的类型。 let a = 111 // 这只是字面量，不是 number 类型 a.toString() // 使用时候才会转换为对象类型 对象（Object）是引用类型，在使用过程中会遇到浅拷贝和深拷贝的问题。 let a = { name: 'FE' } let b = a b.name = 'EF' console.log(a.name) // EF 2 Typeof typeof 对于基本类型，除了 null 都可以显示正确 ...

高频考点 1 typeof类型判断 typeof 是否能正确判断类型？instanceof 能正确判断对象的原理是什么 typeof 对于原始类型来说，除了 null 都可以显示正确的类型 typeof 1 // 'number' typeof '1' // 'string' typeof undefined // 'undefined' typeof true // 'boolean' typeof Symbol() // 'symbol' typeof 对于对象来说，除了函数都会显示 object，所以说 typeof 并不能准确判断变量到底是什么类型 typeof [] // 'object' typeof {} // 'object' typeof console.log &#x ...

面试指南 一、准备：简历编写和面试前准备 一般来说，跳槽找工作要经历投递简历、准备面试、面试和谈 offer 四个阶段。其中面试题目会因你的等级和职位而异，从入门级到专家级，广度和深度都会有所增加。不过，不管什么级别和职位，面试题目一般都可以分类为理论知识、算法、项目细节、技术视野、开放性题、工作案例等内容。接下来重点来说下简历和知识点梳理的方法。 准备一份合适的简历 首先，什么样子的简历更加容易拿到面试邀请？笔者作为一名在 BAT 中待过两家的面试官，见过各种各样的简历，先说一下一些比较不受欢迎的简历： 招聘网站上的简历：有些简历是 HR 直接从某招聘网站直接下载下来的，格式统一，而且对于自己的技能还有自己打分，这类简历有可能是候选人根本就没自己精心准备简历，而是网站根据他填写的内容自动生成的，遇到这样的简历笔者一定会让 HR 或者候选人更新一份简历给我。 太花俏的简历：有人觉得简历花俏一点会让人眼前一亮，但是公司招聘的是前端不是视觉设计，所以如果找的不是视觉设计工作，还是工工整整的简历会比较受欢迎，而且太花俏的简历有可能让人第一感觉是华而不实，并不是关注候选人的技能 ...

计算机基础 一、网络 1 UDP 1.1 面向报文 UDP 是一个面向报文（报文可以理解为一段段的数据）的协议。意思就是 UDP 只是报文的搬运工，不会对报文进行任何拆分和拼接操作 具体来说 在发送端，应用层将数据传递给传输层的 UDP 协议，UDP 只会给数据增加一个 UDP 头标识下是 UDP 协议，然后就传递给网络层了 在接收端，网络层将数据传递给传输层，UDP 只去除 IP 报文头就传递给应用层，不会任何拼接操作 1.2 不可靠性 UDP 是无连接的，也就是说通信不需要建立和断开连接。 UDP 也是不可靠的。协议收到什么数据就传递什么数据，并且也不会备份数据，对方能不能收到是不关心的 UDP 没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 UDP 而不是 TCP 1.3 高效 因为 UDP 没有 TCP 那么复杂，需要保证数据不丢失且有序到达。所以 UDP 的头部开销小，只有八字节，相比 TCP  ...

本篇对一些知识点查漏补缺 一、创建对象和原型链 1 面向对象的三大特性 封装 继承 多态 1.1 原型链的知识 原型链是面向对象的基础，是非常重要的部分。有以下几种知识： 创建对象有几种方法 原型、构造函数、实例、原型链 instanceof的原理 new 运算符 2 创建对象有几种方法 2.1 方式一：字面量 var obj11 = {name: 'smyh'}; var obj12 = new Object(name: `smyh`); //内置对象（内置的构造函数） 上面的两种写法，效果是一样的。因为，第一种写法，obj11会指向Object。 第一种写法是：字面量的方式。 第二种写法是：内置的构造函数 2.2 方式二：通过构造函数 var M = function (name) { this.name = name; } var obj3 = new M('smyhvae'); ...

精简 一、CSS相关 1.1 左边定宽，右边自适应方案：float + margin，float + calc /* 方案1 */ .left { width: 120px; float: left; } .right { margin-left: 120px; } /* 方案2 */ .left { width: 120px; float: left; } .right { width: calc(100% - 120px); float: left; } 1.2 左右两边定宽，中间自适应：float，float + calc, 圣杯布局（设置BFC，margin负值法），flex .wrap { width: 100%; height: 200px; } .wrap > div { height: 100%; } /* 方案1 */ .left & ...

一、CSS 1. 盒模型 页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为 content-box (W3C 标准盒模型) border-box (IE 盒模型) padding-box margin-box (浏览器未实现) 2. BFC 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 IE下为 Layout，可通过 zoom:1 触发 触发条件: 根元素 position: absolute/fixed display: inline-block / table float 元素 ovevflow !== visible 规则: 属于同一个 BFC 的两个相邻 Box 垂直排列 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外) BFC 的区域不会与 float 的元素 ...