学习的前端技术栈与面试杂记

时间 2019-11-20

原文原文链接

将来将要学习的技术栈：

Vue （必修先学）
React（能够晚点学）
react-native（能够最后学）
Node.js（加分项先学）
angluar（能够最后学）
Webpack（要学）
微信小程序开发（必修先学）

之前在公司虽然算的上是全栈，可离职以后发现这个社会更须要的是在一方面顶尖的人才，流水线式的生产，会的多而不精反而成了劣势，从今年开始就从Web前端开始再来一遍，学精在迈下一步，把PHP先放下，Java放下，那些后端语言统统放下，从HTML5，CSS3最简单的开始从头来过，加油。javascript

如今Web面试常见问题：

3月15日今年面试开始的第一天css

ES6,7,8,9 的新特性，和经常使用技术html

JS 封装继承多态前端

JS 原型链，闭包，生命周期vue

Vue 的生命周期java

前端页面的兼容问题与方法node

JS面向对象编程思想react

Ajax的运行原理和协议jquery

前端开发里的设计模式（大佬级面试秒跪的那种，不必如今就研究）git

箭头函数的this 始终指向全局对象（window）

SEO 优化

盒模型

Position属性四个值：static、fixed、absolute和relative的区别和用法

vue生命周期图表：

vue路由的钩子函数

首页能够控制导航跳转，beforeEach，afterEach等，通常用于页面title的修改。一些须要登陆才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function必定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。能够控制网页的跳转。

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

GET 请求：通常用来进行查询操做，url地址有长度限制，

请求的参数都暴露在url地址当中，若是传递中文参数，须要本身进行编码操做，安全性较低。

POST 请求：没法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

AJAX技术体系的组成部分：

HTML，css，dom，xml，xmlHttpRequest，javascript

JavaScript 的同源策略：

防止某个文档或脚本从多个不一样源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

搜索引擎优化

1、内部优化

（1）META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化；

（2）内部连接的优化，包括相关性连接（Tag标签），锚文本连接，各导航连接，及图片连接；

（3）网站内容更新：天天保持站内的更新(主要是文章的更新等)。

2、外部优化

（1）外部连接类别：友情连接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、

相关信息网等尽可能保持连接的多样性；

（2）外链运营：天天添加必定数量的外部连接，使关键词排名稳定提高；

（3）外链选择：与一些和你网站相关性比较高,总体质量比较好的网站交换友情连接,巩固稳定关键词排名。

ajax的缺点：

一、ajax不支持浏览器back按钮。

二、安全问题 AJAX暴露了与服务器交互的细节。

三、对搜索引擎的支持比较弱。

四、破坏了程序的异常机制。

五、不容易调试。

Position属性四个值

一、static（静态定位）：默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

二、relative（相对定位）：生成相对定位的元素，经过top,bottom,left,right的设置相对于其正常（原先自己）位置进行定位。
可经过z-index进行层次分级，默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点。

三、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。
元素的位置经过 "left","top", "right" 以及 "bottom" 属性进行规定。可经过z-index进行层次分级。

四、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。可经过z-index进行层次分级。

instanceof用于判断引用类型属于哪一个构造函数的方法

var arr=[];
arr instanceof Array //true
typeof arr //object, typeof是没法判断是不是数组的

事件委托 :

Jquery版：

$("目标们的父元素").on("click","目标对象",function(event){
               var target = $(event.target);
               something....
});

Js原生版：

window.onload = function(){
            var obj = document.getElementById("目标ID");
            obj.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                something......
            } 
        }

改进版：
   
 var lists = document.getElementById("lists");
         lists.addEventListener("click",function(event){
             var target = event.target;
             //防止父元素ul也触发事件(防冒泡)
             if(target.nodeName == "LI"){
                something......
             }
        })

什么是现实！这就是现实

“原生JavaScript精通么？Jquery熟练么？能用上面的两个作出业务框架么？常见的UI框架能不能快速上手？Ajax熟练么？分得清同步异步适用的场景么？HTTP协议了解么？能用这个分析Ajax的应用么？XML、Json会么？被吹上天的react angular Vue会一个么？前端自动化模块化会么？后端的语言你总得会一个吧，否则怎么用接口？若是不会，孩子，说实话北京不缺这样水平的，你找不到工做的。”

从此的人生一步也不能松懈了！

2019年3月16号

鹅厂：

window的onload事件和domcontentloaded谁先谁后？

new和instanceof的内部机制

flex布局

浏览器缓存,HTTP缓存

typeof和instanceof的区别

从输入URL到页面加载发生了什么？

URL到页面加载：

一、浏览器的地址栏输入URL并按下回车。

二、浏览器查找当前URL是否存在缓存，并比较缓存是否过时。

三、DNS解析URL对应的IP。

四、根据IP创建TCP链接（三次握手）。

五、HTTP发起请求。

六、服务器处理请求，浏览器接收HTTP响应。

七、渲染页面，构建DOM树。

八、关闭TCP链接（四次挥手）。

Javascript异步编程的4种方法：

1、回调函数

这是异步编程最基本的方法。

假定有两个函数f1和f2，后者等待前者的执行结果。

　f1();

　　f2();

若是f1是一个很耗时的任务，能够考虑改写f1，把f2写成f1的回调函数。

　　function f1(callback){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　callback();

　　　　}, 1000);

　　}

执行代码就变成下面这样：

　　f1(f2);

采用这种方式，咱们把同步操做变成了异步操做，f1不会堵塞程序运行，至关于先执行程序的主要逻辑，将耗时的操做推迟执行。

回调函数的优势是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，并且每一个任务只能指定一个回调函数。

2、事件监听

另外一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

仍是以f1和f2为例。首先，为f1绑定一个事件。

　　f1.on('done', f2);

上面这行代码的意思是，当f1发生done事件，就执行f2。而后，对f1进行改写：

　　function f1(){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　f1.trigger('done');

　　　　}, 1000);

　　}

f1.trigger('done')表示，执行完成后，当即触发done事件，从而开始执行f2。

这种方法的优势是比较容易理解，能够绑定多个事件，每一个事件能够指定多个回调函数，并且能够“去耦合”（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。

3、Promises对象

Promises对象是CommonJS工做组提出的一种规范，目的是为异步编程提供统一接口。

简单说，它的思想是，每个异步任务返回一个Promise对象，该对象有一个then方法，容许指定回调函数。好比，f1的回调函数f2,能够写成：

　　f1().then(f2);

f1要进行以下改写（这里使用的是jQuery的实现）：

　　function f1(){

　　　　var dfd = $.Deferred();

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　dfd.resolve();

　　　　}, 500);

　　　　return dfd.promise;

　　}

这样写的优势在于，回调函数变成了链式写法，程序的流程能够看得很清楚，并且有一整套的配套方法，能够实现许多强大的功能。

好比，指定多个回调函数：

　f1().then(f2).then(f3);

再好比，指定发生错误时的回调函数：

　f1().then(f2).fail(f3);

并且，它还有一个前面三种方法都没有的好处：若是一个任务已经完成，再添加回调函数，该回调函数会当即执行。因此，你不用担忧是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。

4、发布/订阅

上一节的"事件"，彻底能够理解成"信号"。

咱们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其余任务能够向信号中心"订阅"（subscribe）这个信号，从而知道何时本身能够开始执行。这就叫作"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。

这个模式有多种实现，下面采用的是Ben Alman的Tiny Pub/Sub，这是jQuery的一个插件。

首先，f2向"信号中心"jQuery订阅"done"信号。

　　jQuery.subscribe("done", f2);

而后，f1进行以下改写：

　　function f1(){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　jQuery.publish("done");

　　　　}, 1000);

　　}

jQuery.publish("done")的意思是，f1执行完成后，向"信号中心"jQuery发布"done"信号，从而引起f2的执行。

此外，f2完成执行后，也能够取消订阅（unsubscribe）。

jQuery.unsubscribe("done", f2);

这种方法的性质与"事件监听"相似，可是明显优于后者。由于咱们能够经过查看"消息中心"，了解存在多少信号、每一个信号有多少订阅者，从而监控程序的运行。

异步编程概况：

回调函数：

优势：简单、容易理解

缺点：不利于维护，代码耦合高

事件监听(采用时间驱动模式，取决于某个事件是否发生)：

优势：容易理解，能够绑定多个事件，每一个事件能够指定多个回调函数

缺点：事件驱动型，流程不够清晰

发布/订阅(观察者模式)：

相似于事件监听，可是能够经过‘消息中心’，了解如今有多少发布者，多少订阅者。

Promise对象

优势：能够利用then方法，进行链式写法；能够书写错误时的回调函数；

缺点：编写和理解，相对比较难

Generator函数

优势：函数体内外的数据交换、错误处理机制

缺点：流程管理不方便

async函数

优势：内置执行器、更好的语义、更广的适用性、返回的是Promise、结构清晰。

缺点：错误处理机制

【闭包】是指那些可以访问独立(自由)变量的函数 (变量在本地使用，但定义在一个封闭的做用域中)。换句话说，这些函数能够“记忆”它被建立时候的环境。特性：

函数嵌套函数

函数内部能够引用外部的参数和变量

参数和变量不会被垃圾回收机制回收