01-前端性能分析工具和指标
title: 01-前端性能分析工具和指标publish: true
性能指标和优化目标之：加载性能指标：我们在性能优化过程中可以参考的标准。这些标准都是业界或者前人总结出来的指导性经验。我们可以参考这些指标，去指导我们自己的优化。
打开网站的初体验我们以淘宝网站为例，按下F12打开浏览器的调试模式。
上图中，鼠标右键点击“刷新”图标（或者鼠标长按刷新图标，松开鼠标后），会弹出三个选项，我们选择最后一个选项“清空缓存并硬性重新加载”。
补充：这三个选项都是在调试模式下（按下F12弹出调试面板）才会出现的。
浏览器的DevTools初印象：
上图中，打开 chrome 调试工具，点开「设置」icon，下面的四个选项中，除了“Group by frame”之外，其他的三个选项都可以勾选上。
我们可以看到淘宝网站的一些指标：
总资源量是 1.3M。
DOM加载完成时间（DOMContentLoaded）：511ms。这是一个很关键的指标。
其他资源的总加载时间是 1.05秒。
我们再来对比一下京东的：
保存快照network里的信息挺多，我们可以将其保存下来，留着以后做分析、做 ...
02-浏览器渲染机制
title: 02-浏览器渲染机制publish: true
前言渲染机制包括的内容：
什么是DOCTYPE及作用
浏览器渲染过程。面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。
Reflow：重排。面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。
Repaint：重绘
Layout：布局。这里的Layout指的是浏览器的Layout。
什么是DOCTYPE及作用定义DTD（Document Type Definition）：文档类型定义。
是一系列的语法规则，用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型，决定使用何种协议来解析，以及切换浏览器模式。（说白了就是：DTD就是告诉浏览器，我是什么文档类型，你要用什么协议来解析我）
DOCTYPE：用来声明DTD规范。
一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些差错。（说白了，DOCTYPE就是用来声明DTD的）
常见的DOCTYPE声明有几种
面试官紧接着会问，常见的 DOCTYPE ...
03-渲染优化
title: 03-渲染优化publish: true
浏览器的渲染机制我们需要先理解浏览器的渲染经历了哪些过程，才能有针对性的进行相关优化。
掌握浏览器的渲染优化，可以说是前端工程师的一个分水岭。如果想要具备架构师的思维，需要达到什么样的能力？不光是要解决当下的问题，还需要掌握基本的原理，将来在遇到新问题时也能解决，即“预测问题”。
有一个经典的面试题是：“在浏览器的地址栏输入url，回车后，经历了哪些过程？”这个问题并不简单，根据你回答的详细程度，可以看出你对前后端知识的掌握程度。你能否答出“浏览器的渲染机制”？如果不能，说明你对浏览器渲染的性能优化，不够了解。
关于浏览器的渲染机制，可以看本教程的另外一篇文章：
《前端面试/面试必看/浏览器渲染机制.md》
关键渲染路径举例：
避免布局抖动（layout thrashing）1、尽量避免 重排：
比如说，如果想改变一个元素的位置，很多人可能会使用相对布局的left、top属性，但是这个属性会引起重排。我们可以使用 transfrom:translate让元素做位移，这个属性既不会触发重排，也不会触发 重绘，只会触发 c ...
04-静态资源优化
title: 04-静态资源优化publish: true
图片格式和应用场景JPEG 格式JPEG（Joint Photographic Experts Group）是一种针对彩色照片而广泛使用的有损压缩图形格式，属于位图。
常用文件扩展名为.jpg，也有 .jpeg和.jpe。JPEG 在互联网上常被应用于存储和传输照片。
适合：颜色丰富的照片、彩色图大焦点图、通栏 banner 图；结构不规则的图形。
不适合：线条图形和文字、图标图形，因为它的压缩算法不太这些类型的图形；并且不支持透明度。
PNG 格式PNG（Portable Network Graphics）是一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种颜色方案以及 Alpha 通道等特性。
PNG 最初是作为替代 GIF 来设计的，能够显示 256 色，文件比 JPEG 或者 GIF 大，但是 PNG 非常好的保留了图像质量。支持 Alpha 通道的半透明和透明特性。最高支持 24 位彩色图像（PNG-24）和 8 位灰度图像（PNG-8）。
适合：纯色、透明、线条绘图，图标；边缘清晰、有大块相同颜 ...
05-页面渲染性能优化
title: 05-页面渲染性能优化publish: true
浏览器渲染过程
浏览器解析 HTML，生成 DOM Tree（Parse HTML）。
浏览器解析 CSS，生成 CSSOM（CSS Object Model）Tree。
JavaScript 会通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree，浏览器将 DOM Tree 和 CSSOM Tree 合成渲染树（Render Tree）。
布局（Layout）：根据生成的 Render Tree，进行回流，以计算每个节点的几何信息（位置、大小、字体样式等等）。
绘制（Painting）：根据渲染树和回流得到的几何信息，得到每个节点的绝对像素。
展示（Display）：将像素发送给图形处理器（GPU），展示在页面上。
页面渲染技术方案总览服务端渲染：
后端同步渲染、同构直出、BigPipe。
客户端渲染：
JavaScript 渲染：静态化、前后端分离、单页面应用
Web App：React、Vue、PWA
Hybrid App ...
lazyload&防抖动和节流阀
title: 07-自定义按键修饰符&自定义指令publish: false
lazyload用的最多的场景是：
图片lazyload
组件lazyload
现在一般都单独做css的lazyload或者js的lazyload，因为这种方式，其实还是要加载图片和组件。
图片lazyload图片一般是页面最大的资源，所以非首屏延迟加载很重要（让首屏尽快显示）。
防抖动（Debouncing）和节流阀（Throtting）参考链接：
实例解析防抖动（Debouncing）和节流阀（Throttling）
00-准备
title: 00-准备publish: true
前言面试分为三部分
技术面试：问技术问题。
负责人面试：考察综合能力。比如：项目把控能力、项目深度、项目架构、业务等。
hr 面试：侧重于性格、沟通、潜力等。
每轮面试在一小时左右。
每轮面试的知识点一面：
主要考察基础知识。
页面布局
CSS盒模型、DOM事件
HTTP 协议、原型链
面向对象、通信
前端安全、算法
二面：
渲染机制
JS 运行机制
页面性能
错误监控
三面：
不再关注技术层面。
业务能力
团队协作能力
带人能力
终面：
职业竞争力
职业规划
面试成功需要：技术过关、面试技巧等。
校招和社招各自看中的层面校招：
知识：40%
能力：59%
经验：1%
社招：
知识：30%。比如协议、业务的认知程度。
能力：50%。比如架构、业务的抽象能力、项目的把控能力。
经验：20%。项目的体现。
以上仅供参考。
面试准备面试准备包括以下四个部分：
职位描述（JD）的分析
业务分析
技术栈准备
自我介绍
每个公司又有一套成熟的技术栈。 ...
01-页面布局
title: 01-页面布局publish: true
前端面试（前言）面试基础
页面布局
CSS盒模型：是CSS的基石。
DOM事件
HTTP协议
面向对象
原型链：能说出原型链的始末
面试进阶
通信：普通的通信、跨域通信
安全：CSRF、XSS。
算法
回答问题时要注意的（1）题干的要求真的是字面要求的这么简单吗？
（2）答案怎么写，技巧在哪里
（3）如果想证明我的实力，应该有几种答案？
本文来讲一下页面布局。
题目：页面布局问题：假设容器的高度默认100px，请写出三栏布局，其中左栏、右栏的宽度各为300px，中间的宽度自适应。
分析：
初学者想到的答案有两种：
方法1：浮动
方法2：绝对定位。
但要求你能至少写出三四种方法，才算及格。剩下的方法如下：
方法3：flexbox。移动开发里经常用到。
方法4：表格布局 table。虽然已经淘汰了，但也应该了解。
方法5：网格布局 grid。
下面分别讲解。
方法1 和方法2方法1、浮动：
左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。
方法2、绝对定位：
左侧设置为绝对定位， ...
02-CSS盒模型及BFC
title: 02-CSS盒模型及BFCpublish: true
题目：谈一谈你对CSS盒模型的认识专业的面试，一定会问 CSS 盒模型。对于这个题目，我们要回答一下几个方面：
（1）基本概念：content、padding、margin。
（2）标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。
（3）CSS如何设置这两种模型（即：如何设置某个盒子为其中一个模型）？如果回答了上面的第二条，还会继续追问这一条。
（4）JS如何设置、获取盒模型对应的宽和高？这一步，已经有很多人答不上来了。
（5）实例题：根据盒模型解释边距重叠。
前四个方面是逐渐递增，第五个方面，却鲜有人知。
（6）BFC（边距重叠解决方案）或IFC。
如果能回答第五条，就会引出第六条。BFC是面试频率较高的。
总结：以上几点，从上到下，知识点逐渐递增，知识面从理论、CSS、JS，又回到CSS理论。
接下来，我们把上面的六条，依次讲解。
标准盒模型和IE盒子模型标准盒子模型：
IE盒子模型：
上图显示：
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式 ...
03-DOM事件的总结
title: 03-DOM事件的总结publish: true
前言要学习事件的基础内容，请看先本人之前的基础文章：
《04-JavaScript基础/27-事件对象Event》
《04-JavaScript基础/28-事件捕获和事件冒泡》
《04-JavaScript基础/29-事件委托》
知识难度不大，只是大家需要系统地学习。
知识点主要包括以下几个方面：
基本概念：DOM事件的级别
面试不会直接问你，DOM有几个级别。但会在题目中体现：“请用DOM2 ….”。
DOM事件模型、DOM事件流
面试官如果问你“DOM事件模型”，你不一定知道怎么回事。其实说的就是捕获和冒泡。
DOM事件流，指的是事件传递的三个阶段。
描述DOM事件捕获的具体流程
讲的是事件的传递顺序。参数为false（默认）、参数为true，各自代表事件在什么阶段触发。
能回答出来的人，寥寥无几。也许有些人可以说出一大半，但是一字不落的人，极少。
Event对象的常见应用（Event的常用api方法）
DOM事件的知识点，一方面包括事件的流程；另一方面就是：怎么去注册事件，也就是监听用户 ...
04-HTTP协议
title: 04-HTTP协议publish: true
一面中，如果有笔试，考HTTP协议的可能性较大。
前言一面要讲的内容：
HTTP协议的主要特点
HTTP报文的组成部分
HTTP方法
get 和 post的区别
HTTP状态码
什么是持久连接
什么是管线化
二面要讲的内容；
缓存
CSRF攻击
HTTP协议的主要特点
简单快速
灵活
无连接
无状态
通常我们要答出以上四个内容。如果实在记不住，一定要记得后面的两个：无连接、无状态。
我们分别来解释一下。
简单快速简单：每个资源（比如图片、页面）都通过 url 来定位。这都是固定的，在http协议中，处理起来也比较简单，想访问什么资源，直接输入url即可。
灵活http协议的头部有一个数据类型，通过http协议，就可以完成不同数据类型的传输。
无连接连接一次，就会断开，不会继续保持连接。
无状态客户端和服务器端是两种身份。第一次请求结束后，就断开了，第二次请求时，服务器端并没有记住之前的状态，也就是说，服务器端无法区分客户端是否为同一个人、同一个身份。
有的时候，我们访问网站时，网站能记住 ...
05-01.创建对象和原型链
title: 05-01.创建对象和原型链publish: true
前言面向对象的三大特性
封装
继承
多态
原型链的知识原型链是面向对象的基础，是非常重要的部分。有以下几种知识：
创建对象有几种方法
原型、构造函数、实例、原型链
instanceof的原理
new 运算符
创建对象有几种方法方式一：字面量var obj11 = {name: 'qianguyihao'};var obj12 = new Object(name: 'qianguyihao'); //内置对象（内置的构造函数）
上面的两种写法，效果是一样的。因为，第一种写法，obj11会指向Object。
第一种写法是：字面量的方式。
第二种写法是：内置的构造函数
方式二：通过构造函数var M = function (name) { this.name = name;}var obj3 = new M('smyhvae');
方法三：Object.createvar p = & ...
05-02.面向对象：类的定义和继承的几种方式
title: 05-02.面向对象：类的定义和继承的几种方式publish: true
前言类与实例：
类的声明
生成实例
类与继承：
如何实现继承：继承的本质就是原型链
继承的几种方式
类的定义、实例化类的定义/类的声明方式一：用构造函数模拟类（传统写法）
function Animal1() { this.name = 'smyhvae'; //通过this，表明这是一个构造函数}
方式二：用 class 声明（ES6的写法）
class Animal2 { constructor() { //可以在构造函数里写属性 this.name = name; }}
控制台的效果：
实例化类的实例化很简单，直接 new 出来即可。
console.log(new Animal1(),new Animal2()); //实例化。如果括号里没有参数，则括号可以省略
继承的几种方式继承的本质就是原型链。
继承的方式有几种？每种形式的优缺点是？这些问题必问 ...
06-跨域通信类
title: 06-跨域通信类publish: true
前言从本章起，对代码的要求没之前那么高了，但是，要求你对知识面的掌握要足够宽。
前端通信类的问题，主要包括以下内容：
1、什么是同源策略及限制
同源策略是一个概念，就一句话。有什么限制，就三句话。能说出来即可。
2、前后端如何通信
如果你不准备，估计也就只能说出ajax。这个可以考察出知识面。
3、如何创建Ajax
Ajax在前后端通信中经常用到。做业务时，可以借助第三方的库，比如vue框架里的库、jQuery也有封装好的方法。但如果让你用原生的js去实现，该怎么做？
这就是考察你的动手能力，以及框架原理的掌握。如果能写出来，可以体现出你的基本功。是加分项。
4、跨域通信的几种方式
这部分非常重要。无非就是问你：什么是跨域、跨域有什么限制、跨域有几种方式。
下面分别讲解。
同源策略的概念和具体限制同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自MDN官方的解释）
具体解释：
（1）源包括三个部分：协议、域名、端口（http协议的默认端 ...
07-安全问题：CSRF和XSS
title: 07-安全问题：CSRF和XSSpublish: true
前言面试中的安全问题，明确来说，就两个方面：
CSRF：基本概念、攻击方式、防御措施
XSS：基本概念、攻击方式、防御措施
这两个问题，一般不会问太难。
有人问：SQL注入算吗？答案：这个其实跟前端的关系不是很大。
CSRF问的不难，一般问：
CSRF的基本概念、缩写、全称
攻击原理
防御措施
如果把攻击原理和防御措施掌握好，基本没什么问题。
1、CSRF的基本概念、缩写、全称CSRF（Cross-site request forgery）：跨站请求伪造。
PS：中文名一定要记住。英文全称，如果记不住也拉倒。
2、CSRF的攻击原理
用户是网站A的注册用户，且登录进去，于是网站A就给用户下发cookie。
从上图可以看出，要完成一次CSRF攻击，受害者必须满足两个必要的条件：
（1）登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
（2）在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。
我们 ...
