第一次前端面试总结

最新推荐文章于 2021-08-03 14:11:44 发布

Strobbon

最新推荐文章于 2021-08-03 14:11:44 发布

阅读量273

点赞数 1

本文链接：https://blog.csdn.net/qq_42913722/article/details/105549582

版权

1：预解析
定义：js引擎，自上而下的读取代码，捕获var ，function，当预解析完成后，js开始从第一步运行代码。我们一定要清楚的明白，预解析只发生在var，function上。
理解过程：
①：通过var关键字定义的变量进行预解析的时候，都是声明declare，不管它有没有赋值，都是undifined

（1）alert（a）；//undefined
（2）var a =1；
        alert（b）；//undefined
（3）alert（c）；
        var c；//undefined

只要是通过var定义的，不管是变量，还是函数，都是先赋值undefined，如果是变量，也不管有没有赋值，在预解析阶段，都是会被赋值为undefined，在真正执行的时候才会赋值。
②function：在进行预解析的时候，不仅是声明而且还定义（defined），但是它存储的是代码是字符串，没有任何意义

alert（a）；//弹出的是下面的function
function a（）{
alert（“解析的function”）
}

我们知道。定义函数的方式有函数声明和函数表达式两种，解析器在向执行环境中加载数据相同时，对函数声明和函数表达式并非一视同仁，解析器会优先读取函数声明，并使用其在执行任何代码之前可用，至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析器执行。

alert(sum(10,10));
var sum=function(num1,num2)
{
    return num1+num2;
};

以上代码完全可以正常执行，因为在代码开始执行之前，解析器就已经通过一个名为函数声明变量提升的过程，读取并将函数声明添加到执行环境中，对代码求值时，JavaScript引擎在第一遍会生命函数并将它们放到源代码树的顶部。所以，即使声明函数的代码在调用它的代码后面，JavaScript引擎也能吧函数声明提升到顶部。

alert(sum(10,10));
var sum=function(num1,num2)
{
    return num1+num2;
};

以上代码会在运行的时候出现错误，原因在于函数位于一个初始化语句中，而不是一个函数声明。换句话讲，在执行到函数所在的语句之前，变量sum中不会保存有对函数的引用。
**！！！**这里有一个特例，函数声明只能出现在程序或函数体内。从句法上讲，它们不能出现在Block（块）（{ … }）中，例如不能出现在 if、while 或 for 语句中。

function f(){
    console.log("outside f()");
}
+function (){
    if(false){
        function f(){
            console.log("inside f()");
        }
    }
      f(); // Uncaught TypeError: f is not a function
}();

此处调用f会报错，甚至连外层的f也取不到，原因时条件语句块声明的函数，其效果等同于在此处声明的函数表达式，在你这里，由于变量提升，以+开头的匿名函数里面，首先声明变量f，然后到了条件语句内部才会定义其函数，而你的条件语句是永远失败的，所以这里你只会找到未初始化的变量f，而不是函数f。所以报的错也是TypeError，一个变量怎么能通过 f(); 这种函数的方式调用呢。

function() {
    if (false) {
        var f = function() { console.log("inside f()"); };
    }
}

相当于：

function() {
    if (false) {
        var f = function() { console.log("inside f()"); };
    }
}

总结：
　　Block（块）中只能包含Statement语句，而不能包含函数声明这样的源元素。另一方面，仔细看一看规则也会发现，唯一可能让表达式出现在Block（块）中情形，就是让它作为表达式语句的一部分。但是，规范明确规定了表达式语句不能以关键字function开头。而这实际上就是说，函数表达式同样也不能出现在Statement语句或Block（块）中（因为Block（块）就是由Statement语句构成的）。
　　函数声明在条件语句内虽然可以用，但是没有被标准化，也就是说不同的环境可能有不同的执行结果。所以严格来讲，或者按照新的标准，这种写法是不规范的，所以大家还是不要这样写。非要这样用的话，就写成函数表达式吧……

var foo;
  if (true) {
    foo = function() {
      return 'first';
    };
  }
  foo();

2：git工作流
其中分为4种，简单理解一下git工作流，它具有master分支，develop，等等的四个分支，修复bug，一段一段的合并到前一个分支，最终合并到master分支
Git工作流可以理解为团队成员遵守的一种代码管理方案，在Git中有以下几种常见工作流：

集中式工作流
功能开发工作流
Gitflow工作流
Forking工作流
1）集中式工作流

这种工作方式跟svn类似，它只有一个master分支，开发者会先把远程的仓库克隆到本地，之后的修改和提交都在本地操作，直到在某个合适的时间点将本地的代码合入到远程master。这种工作流比较适合小团队，因为小团队可能不会太多的协作和合流的动作。

在开发者提交自己的修改到master前，需要先fetch在master的新增提交，rebase自己的提交于master的最新版本。
这样做的意思是在说，『我要把自己的修改加到别人已经完成的修改之上』。如果本地修改和上游提交有冲突，Git会暂停rebase过程，给你手动解决冲突的机会.

示例：
第一步，有人在服务器上创建好中央仓库。如果是新项目，你可以初始化一个空仓库；否则你要导入已有的Git或SVN仓库。
中央仓库应该是个裸仓库（bare repository），即没有工作目录（working directory）的仓库。可以用下面的命令创建：
ssh user@host
git init --bare /path/to/repo.git
确保写上有效的user（SSH的用户名），host（服务器的域名或IP地址），/path/to/repo.git（你想存放仓库的位置）。
注意，为了表示是一个裸仓库，按照约定加上.git扩展名到仓库名上。

第二步，所有人克隆中央仓库。

各个开发者创建整个项目的本地拷贝。通过git clone命令完成：

git clone ssh://user@host/path/to/repo.git

基于你后续会持续和克隆的仓库做交互的假设，克隆仓库时Git会自动添加远程别名origin（『父』仓库）。

然后，成员A开发功能，并在本地使用标准的Git过程开发功能：编辑、暂存（Stage）和提交：

git status # 查看本地仓库的修改状态
git add # 暂存文件
git commit # 提交文件-（这些命令生成的是本地提交，以按自己需求反复操作多次，而不用担心中央仓库上有了什么操作。）
一旦成员A完成了他的功能开发，会发布他的本地提交到中央仓库中，这样其它团队成员可以看到他的修改。他可以用下面的git push命令：
git push origin master
（注意，origin是在其克隆仓库时Git创建的远程中央仓库别名，master参数告诉Git推送的分支。）
由于中央仓库自从成员A克隆以来还没有被任何人更新过，所以push操作不会有冲突，成功完成。

然后，成员B完成在本地的功能开发，并欲推送到中央仓库里面。由于，中央仓库已经被成员A进行了修改，如果B直接运行git push origin master，GIt会提示错误，拒绝其提交，以防止B的提交将A已经提交的新代码覆盖。成员B需要先git pull 合并上游的修改到自己本地仓库中（类似svn update）。具体指令：

git pull --rebase origin master

rebase说明：点击打开链接

–rebase 选项告诉Git把B的提交移到同步了中央仓库修改后的master分支的顶部。不使用rebase这个选项，在Pull之前需要先将远程master分支的最新内容同步到本地，然后将自己的修改加进去，再Pull，这样会导致提交历史会以一个多余的『合并提交』结尾。

对于集中式工作流，最好是使用rebase而不是生成一个合并提交。

2）功能开发工作流

这种工作流关注功能开发，不直接往master提交代码保证它是稳定并且干净的，而是从master拉取feature分支进行功能开发，团队成员根据分工拉取不同的功能分支来进行不同的功能开发，这样就可以完全隔离开每个人的工作。当功能开发完成后，会向master分支发起Pull Request，只有审核通过的代码才真正允许合入master，这样就加强了团队成员之间的代码交流，也就是我们常说的Code Review。

开发者每次在开始新功能前先创建一个新分支(这个创建的新分支只在开发者本地吗，还是远程也有？–都有), 功能分支应该有个有描述性的名字，这样可以让分支有个清楚且高聚焦的用途。一旦某个开发完成一个功能，不是立即合并到master，而是push到中央仓库的功能分支上并发起一个Pull Request请求去合并修改到master。

pull requests能为每个分支发起一个讨论，在分支合入正式项目之前，给其它开发者有表示赞同的机会。另外，如果你在功能开发中有问题卡住了，可以开一个pull requests来向同学们征求建议。pull requests让团队成员之间互相评论工作变成非常方便！

在master分支和功能分支之间，Git是没有技术上的区别，所以开发者可以用和集中式工作流中完全一样的方式编辑、暂存和提交修改到功能分支上。

一旦Pull Request被接受了，发布功能要做的就和集中式工作流就很像了，首先，确定本地的master分支和上游的master分支是同步的。然后合并功能分支到本地master分支并 push已经更新的本地master分支到中央仓库。

应用例子介绍：

下面的示例演示了如何把Pull Requests作为Code Review的方式，但注意Pull Requests可以用于很多其它的目的。
小红开始开发一个新功能，在开始开发功能前，小红需要一个独立的分支。使用下面的命令新建一个分支：

git checkout -b marys-feature master

这个命令检出一个基于master名为marys-feature的分支，Git的-b选项表示如果分支还不存在则新建分支。这个新分支上，小红按老套路编辑、暂存和提交修改，按需要提交以实现功能：

git status
git add
git commit

然后，小红去吃午饭前，先push 一次，这样可以方便地备份，如果和其它开发协作，也让他们可以看到小红的提交。

git push -u origin marys-feature

这条命令push marys-feature分支到中央仓库（origin）的marys-feature分支，-u选项设置本地分支去跟踪远程的哪一个分支，设置好跟踪的分支后，后面小红就可以使用git push命令，省去指定推送分支的参数。

小红吃完午饭回来，完成整个功能的开发，并合并到远程分支。然后，在她的Git GUI客户端中发起Pull Request，请求合并marys-feature到master，团队成员会自动收到通知（GUI客户端？？？？？？）。

Pull Request很酷的是可以在相关的提交旁边显示评注，所以你可以很对某个变更集提问。

…going…

3）Gitflow工作流

该种工作流会相对复杂一点，但非常适合用来管理大型项目的发布和维护。贯穿整个开发周期，master和develop分支是一直存在的。

master分支可以被视为稳定的分支，一般不允许直接往master分支提交代码，只允许往这个分支发起merge request，只允许release分支和hotfix分支进行合流。

develop分支是相对稳定的分支，用于日常开发，包括代码优化、功能性开发。

feature分支从develop分支拉取，特性开发会在其上进行，开发完毕合后并到develop分支。

release分支从develop分支拉取，用于回归测试，完成后打tag并合入master和develop。
hotfix分支用于紧急修复上线版本的问题，修复后打tag并合入master和develop。

4）Forking工作流

Forking工作流常用于开源项目，它有一个公开的中央仓库，其他贡献者可以Fork（克隆）这个仓库作为你自己的私有仓库，开源项目维护者可以直接往中央仓库push代码，而代码贡献者只能将代码push到自己的私有仓库，只有项目维护者接受代码贡献者往中央仓库发起的pull request才会真正合入。
3：js精度丢失
根本原因时是计算机是二进制实现和位数限制，有些数无法有限表示。
典型问题：①两个简单的浮点数相加
②大整数运算
③tofixed不会四舍五入
解决方案：把小数放到位整数（乘倍数），再缩小回原来倍数（除倍数）
toFixed的修复如下

// toFixed 修复
function toFixed(num, s) {
    var times = Math.pow(10, s)
    var des = num * times + 0.5
    des = parseInt(des, 10) / times
    return des + ''
}

箭头函数：
通常函数的定义方法：

var fn1 = function(a, b) {
    return a + b
}
 
function fn2(a, b) {
    return a + b
}

使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。
var fn1 = (a, b) => {
return a + b
}

(a, b) => {
return a + b
}
当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ … }和return。还有一种可以包含多条语句，这时候就不能省略{ … }和return

() => return 'hello'
(a, b) => a + b
(a) => {
  a = a + 1
  return a
}```
如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ ... }有语法冲突。

注意，用小括号包含大括号则是对象的定义，而非函数主体
x => {key: x} // 报错
x => ({key: x}) // 正确
总结
类似于匿名函数，在某些情况下使用，可减少代码量
代码简洁，this提前定义
代码太过简洁，导致不好阅读
this提前定义，导致无法使用js进行一些在ES5里面看起来非常正常的操作（若使用箭头函数，在监听点击事件的回调函数中，就无法获取到当前点击的元素咯，详见《正确使用箭头函数——什么时候不该用ES6箭头函数》）
总的来说，箭头函数只是一种函数的简写，有其利弊，可用可不用，看大家心情，当然也得用的正确
4：状态码
200 OK：请求已正常处理。
204 No Content：请求处理成功，但没有任何资源可以返回给客户端
206 Partial Content：是对资源某一部分的请求，该状态码表示客户端进行了范围请求，而服务器成功执行了这部分的GET请求。
301 Moved Permanently：资源的uri已更新，你也更新下你的书签引用吧。
302 Found：资源的URI已临时定位到其他位置了，姑且算你已经知道了这个情况了。
303 See Other：资源的URI已更新，你是否能临时按新的URI访问
304 Not Modified：资源已找到，但未符合条件请求。
400 Bad Request：服务器端无法理解客户端发送的请求，请求报文中可能存在语法错误。
401 Unauthorized：该状态码表示发送的请求需要有通过HTTP认证（BASIC认证，DIGEST认证）的认证信息。
403 Forbidden：不允许访问那个资源。该状态码表明对请求资源的访问被服务器拒绝了。（权限，未授权IP等）
404 Not Found：服务器上没有请求的资源。路径错误等。
500 Internal Server Error：貌似内部资源出故障了。该状态码表明服务器端在执行请求时发生了错误。
503 Service Unavailable：抱歉，我现在正在忙着。该状态码表明服务器暂时处于超负载或正在停机维护，现在无法处理请求。
5：垂直布局
前提：

html模板：

<div class="parent">

<div class="content">内容垂直居中</div>

</div>

声明：以下示例，主要实现垂直居中的样式代码为加粗的部分

一、对单行元素进行垂直居中时

1、可设置该行内元素的父元素的height与line-heigth的值相等，让行内元素垂直居中

2、针对行内元素，可通过设置vertical-align: middle;以及line-height进行垂直居中

二、对文本进行垂直居中

1、针对文本，通过display:flex;配合align-items和justify-content实现文本居中

.content{

display: flex;

align-items: center;

justify-content: center;

}

三、对已知高度块级元素进行垂直居中

1、绝对定位，配合top:50%和负margin-top(元素高度一半)进行垂直居中

.content{

position: absolute;

top: 50%;

left: 50%;

margin-top: -10em; /* 为元素height/2 */

margin-left: -10em;

width: 20em;

height: 20em;

background-color: aqua;

}

2、绝对定位，配合top:0;bottom:0;和margin:auto进行垂直居中

.content{

position: absolute;

margin：auto；

top: 0;

bottom: 0;

left: 0;

right: 0;

height: 200px; /*要求指明元素高度*/

background-color: aqua;

}

3、设置position:absolute;和calc()函数实现垂直居中

.content{

position: absolute;

top:calc(50% - 10em); /*calc(50% - 元素本身高度一半)*/

left: calc(50% - 20em); /*注意使用时减号间有空格*/

width: 40em;

height: 20em;

background-color: aqua;

}

4、使用浮动float实现元素垂直居中

原理：通过在要进行垂直居中的元素a前面添加一个无内容的元素，并将该无内容元素的高设置为50%，在利用clear:botn清除浮动，则元素a相对于父元素来说是垂直居中。

html如下：

<div class="parent">

<div class="float"></div>

<div class="content">

<div><span>内容垂直居中内容垂直居中内容容垂居中</span></div>

</div>

</div>

css如下：

.parent{

height: 500px;

background-color: red;

}

.float{ /**添加的辅助元素/

height: 50%;

}

.content{

clear: both;

background-color: aqua;

}

四、对未知高度块级元素进行垂直居中

1、设置position：absolute；和transform:traslate(x,y)实现水平垂直居中

.content{

position: absolute;

margin：auto；

top: 50%;

left: 50%;

transform:translate(-50%,-50%); /*针对元素本身向左以及向上移动50%*/

background-color: aqua;

}

2、居于视口单位的解决方案：

可通过使用margin-top: 50vh;配合transform:translateY(-50%);实现视口居中

.content{

width: 18em;

margin-top: 50vh; /*50vh表示视口高度的50%*/

transform: translateY(-50%); /*相对元素自身向上移动50%*/

background-color: aqua;

}

3、通过display:table-cell和vertical-align:middle;实现垂直居中

.parent{

display: table;

width: 50px; /*建议设置宽高，以便于查看效果*/

height: 500px;

}

.content{

display: table-cell;

vertical-align: middle;

background-color: aqua;

}

4、基于flex的解决方案：

.parent{

display: flex;

background-color: beige;

}

.content{

margin: auto; /*自动相对于父元素水平垂直居中*/

background-color: aqua;

}
6：前端优化
我们的优化原则有以下几个：

能缓存的，尽量强缓存。
引入外部资源时不要出现超时、404的状况。
减少HTTP请求数。
合理设置cookie的大小以及过期时间。
合理利用懒加载。
网页内容的优化
1、懒加载数据。
首先根据标签的left和top属性判断是否显示在了屏幕中（如果显示在屏幕中，其left和top属性值应该是在0到窗口长宽之间）。
如果显示在屏幕中，则将src标签的内容替换为图片的url。

2、使用外部引入的css和js文件，并且引入的css和js越少越好（HTTP2.0不适用）。
这里可以使用webpack打包这些文件，也可以使用强缓存与协商缓存来缓存这些文件。

3、不要在中缩放图片。
img计算缩放也需要时间

4、避免重定向。
重定向会重新渲染网页。

5、尽量不要用iframe。
因为iframe会阻塞渲染。

6、使用base64编码将图片嵌入到样式表中，减少请求数（由于base64会比一般的图片大一点，只适用于那些体积比较小但是很常用的图片）。

7、使用雪碧图（精灵图）：
通过使用background-position：-xpx -ypx;来调整图片的位置，不过HTTP2不适用，原因为HTTP2实际上是多路复用的，只用一个TCP连接，所以多个图片的请求也是在同一个TCP连接里，这样能省下非常多的请求时间，但坏处就是单连接开销很大，如果要传多个大文件，就很麻烦。

8、要有网站小图标favicon.ico。

如果没有小图标，会引起404，拖慢网页加载进度。
9、能使用jpeg就不要用png，能使用png8就不要用png24。
（1）色彩丰富的、大的图片切成jpg的；
（2）尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的；
（3）半透明的切成png24。

10、使用canvas压缩图片。

css的优化
1、避免使用@import。
使用@import相当于将引入的css放在了页面底部，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。因此使用@import会拖慢渲染的过程。

2、将样式表放在head中。
如果放在body中，可能出现在浏览器下载好css样式表之前，组件就已经加载好了的情况，这可能会导致重新渲染。

3、避免使用css表达式。
如：expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
解析表达式和计算都需要时间。

JavaScript的优化
1、尽量减少DOM访问。

2、使用事件代理（减少DOM操作）。

3、把脚本放在底部（加载脚本时会阻塞页面渲染）。

4、合理使用节流函数和防抖函数。


使用CDN优化加载速度
CDN即内容分发网络。它依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。



针对webpack打包优化
针对webpack打包优化主要是减少打包后的代码体积，主要的措施有：
1、进行tree-shaking
2、使用UglifyJS等插件压缩代码
3、分割代码、按需加载

我们可以使用webpack-bundle-analyzer这个插件来查看每部分代码的加载耗时，进而分析可以优化的地方。

开启Gzip压缩
这是一个非常有效的优化方案，可以减少60%左右的代码体积，使用node.js+express可以非常便捷的开启Gzip

const express = require('express'); 
const app = express();
const compression = require('compression'); 
app.use(compression()); // 注意，使用compression中间件必须要在其他中间件之前
7：跨域
什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

广义的跨域：

1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送
常见跨域场景
URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js
http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许
跨域解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

一、 通过jsonp跨域
通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

1.）原生实现：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
 
    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
 
    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>
服务端返回如下（返回时即执行全局函数）：

onBack({"status": true, "user": "admin"})
2.）jquery ajax：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});
3.）vue.js：

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})
后端node.js代码示例：

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();
 
server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;
 
    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');
 
    res.end();
});
 
server.listen('8080');
console.log('Server is running at port 8080...');
jsonp缺点：只能实现get一种请求。

二、 document.domain + iframe跨域
此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

1.）父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>
2.）子窗口：(http://child.domain.com/b.html)

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>
三、 location.hash + iframe跨域
实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

1.）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
 
    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    
    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>
2.）b.html：(http://www.domain2.com/b.html)

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
 
    // 监听a.html传来的hash值，再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>
3.）c.html：(http://www.domain1.com/c.html)

<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再通过操作同域a.html的js回调，将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>
四、 window.name + iframe跨域
window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

1.）a.html：(http://www.domain1.com/a.html)

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
 
    // 加载跨域页面
    iframe.src = url;
 
    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();
 
        } else if (state === 0) {
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };
 
    document.body.appendChild(iframe);
 
    // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};
 
// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});
2.）proxy.html：(http://www.domain1.com/proxy....
中间代理页，与a.html同域，内容为空即可。

3.）b.html：(http://www.domain2.com/b.html)

<script>
    window.name = 'This is domain2 data!';
</script>
总结：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

五、 postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

1.）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };
 
    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>
2.）b.html：(http://www.domain2.com/b.html)

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);
 
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
 
            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>
六、 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：七、nginx反向代理中设置proxy_cookie_domain 和 八、NodeJs中间件代理中cookieDomainRewrite参数的设置。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

1、 前端设置：
1.）原生ajax

// 前端设置是否带cookie
xhr.withCredentials = true;
示例代码：

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端设置是否带cookie
xhr.withCredentials = true;
 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};
2.）jQuery ajax

$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});
3.）vue框架
在vue-resource封装的ajax组件中加入以下代码：

Vue.http.options.credentials = true
2、 服务端设置：
若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

1.）Java后台：

/*
 * 导入包：import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义：HttpServletResponse response
 */
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");  // 若有端口需写全（协议+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");
2.）Nodejs后台示例：

var http = require('http');
var server = http.createServer();
var qs = require('querystring');
 
server.on('request', function(req, res) {
    var postData = '';
 
    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });
 
    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);
 
        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取cookie
        });
 
        res.write(JSON.stringify(postData));
        res.end();
    });
});
 
server.listen('8080');
console.log('Server is running at port 8080...');
七、 nginx代理跨域
1、 nginx配置解决iconfont跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

location / {
  add_header Access-Control-Allow-Origin *;
}
2、 nginx反向代理接口跨域
跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

nginx具体配置：

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;
 
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;
 
        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}
1.) 前端代码示例：

var xhr = new XMLHttpRequest();
 
// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;
 
// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();
2.) Nodejs后台示例：

var http = require('http');
var server = http.createServer();
var qs = require('querystring');
 
server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));
 
    // 向前台写cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取
    });
 
    res.write(JSON.stringify(params));
    res.end();
});
 
server.listen('8080');
console.log('Server is running at port 8080...');
八、 Nodejs中间件代理跨域
node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

1、 非vue框架的跨域（2次跨域）
利用node + express + http-proxy-middleware搭建一个proxy服务器。

1.）前端代码示例：

var xhr = new XMLHttpRequest();
 
// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;
 
// 访问http-proxy-middleware代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();
2.）中间件服务器：

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
 
app.use('/', proxy({
    // 代理跨域目标接口
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,
 
    // 修改响应头信息，实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },
 
    // 修改响应信息中的cookie域名
    cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
}));
 
app.listen(3000);
console.log('Proxy server is listen at port 3000...');
3.）Nodejs后台同（六：nginx）

2、 vue框架的跨域（1次跨域）
利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。

webpack.config.js部分配置：

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
        }],
        noInfo: true
    }
}
九、 WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

1.）前端代码：

<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
 
// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });
 
    // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});
 
document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>
2.）Nodejs socket后台：

var http = require('http');
var socket = require('socket.io');
 
// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});
 
server.listen('8080');
console.log('Server is running at port 8080...');
 
// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });
 
    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});
14：vue –if，vue-show
v-if与v-show的区别

（一）.相同点

都是动态显示DOM元素

（二）.区别

1.手段： 
v-if是动态的向DOM树内添加或者删除DOM元素； 
v-show是通过设置DOM元素的display样式属性控制显隐； 


2.编译过程： 
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； 
v-show只是简单的基于css切换； 


3.编译条件： 
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); 
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留； 


4.性能消耗： 
v-if有更高的切换消耗； 
v-show有更高的初始渲染消耗； 


5.使用场景： 
v-if适合运营条件不大可能改变； 
v-show适合频繁切换。
em px 单位转换
一.概念介绍：

1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。



2、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。



3、pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)



4、rem（root em，根em）：是CSS3新增的一个相对单位，这个单位引起了广泛关注。

     这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。



二.分析

1、em与px的问题

px是何物？

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) 

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

PX特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

 

em是何物？
em 指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em特点：
1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此，12px = 0.75em。实际应用中为了方便换算，通常会如下设置样式：
CSS代码
html { font-size: 62.5%; }

这样，1em = 10px。我们常用的1.2em理论上就是12px。但是，这个换算在IE浏览器下不成立，1.2em会比12px稍大一些，解决办法是把html标签样式中的62.5%改成63%，即：
CSS代码
html { font-size: 63%; }  

在 中文的文章中，一般会在段首空两格。如果用px作为单位，对12px字体来说需要空出24px，对14px字体来说需要空出28px……这样换算非常不通 用。如果用上em单位，这个问题就很好解决了，1个字的大小就是1em，那两个字的大小就是2em。因此，只需这样定义就行了：
CSS代码
p { text-indent: 2em; }



em和px两种字体单位的区别
字体单位应该用em而不用px，原因简单来说就是支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。px是绝对单位，不支持IE的缩放，em是相对单位。
我在调整本blog的时候，发现不仅仅是字体，将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。

em有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

em重写步骤：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
     简 单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。

     经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级 元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。


IE中的12px汉字：
完成 em转换时还发现了一个诡异的现象，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而 是稍大一点。你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有 限。本现象只发生在12px的汉字，英文不存在此现象。解决方法就是把style.css中的62.5%换 为63%。

一个px、em、pt单位转换工具：

地址：http://pxtoem.com/



2、rem使用 

       浏览器的基准字号设置为 62.5%，也就是 10px，现在 1rem = 10px —— 为了计算方便。然后在 body 上应用了 font-size: 1.6rem;，将页面字号设置为 16px。


 
html {
  font-size: 62.5%;
}
 
body {
  font-size: 1.6rem; /* =16px */
}

注意： 

        选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

Strobbon

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一次前端面试总结

1：预解析定义：js引擎，自上而下的读取代码，捕获var ，function，当预解析完成后，js开始从第一步运行代码。我们一定要清楚的明白，预解析只发生在var，function上。理解过程：①：通过var关键字定义的变量进行预解析的时候，都是声明declare，不管它有没有赋值，都是undifined（1）alert（a）；//undefined（2）var a =1； ...
复制链接

扫一扫