前端面試經驗總結

今天的事今天做，分享麵筋，大家共同進步。面出了2身汗，加油。

有的部分忘了，想起啥寫啥，可能有點亂。

第一部分組長面

1.URL的結構

URI—Universal Resource Identifier通用資源標誌符

Web上可用的每種資源如HTML文件、每個影片、影片片段、程式片段等都是一個片段來URI來定位的
URI一般由三部組成
①訪問資源的命名機制
②存放資源的主機名
③資源本身的名稱，由路徑表示，著重強調於資源。

URL—Uniform Resource Location統一資源定位符

URL是Internet上用來描述資訊資源的字串，主要用在各種WWW客戶程式和伺服器程式上，特別是著名的Mosaic。
採用URL可以用一種統一的格式來描述各種資訊資源，包括檔案、伺服器的位址和目錄等。
URL一般由三部組成
①協定(或稱為服務方式)
②存有該資源的主機IP位址(有時也包括埠號)
③主機資源的具體位址。如目錄和文件名等

例子
URI = 作文
URL = 議論文、記敘文、詩歌…

那麼

1.寫的都不錯，不會說大家的「議論文」寫的不錯，雖然指的是一種東西。
2.客觀描述時，你會和同桌說：我今天寫的是“詩歌”，而不會囉嗦的說我今天用了詩歌的方式寫的作文。

同理

當你寫一篇技術文檔規範時，你會說某個參數要傳遞一個URI，而不必說某個參數要傳遞一個「URL格式的字串」。

• Scheme：// 　協定部分，以：作為結束，常見的協定包含HTTP、HTTPS等

• //: 層級URLLLL.等

• //: 層級URLLLLL項

Login：password@：身份認證一般的協定都會使用預設的匿名形式進行資料取得
Address：伺服器位址一般是以網域名稱的形式存在
port：不同協定的預設埠連接埠號碼
/path/to/resource: 檔案路徑指向唯一確定的資源
?query_string：查詢字串
／#fragment：ID 這部分內容不會被傳遞到伺服器一般用於頁面的錨，頁面下方返回頂部的按鈕就是利用這個實現的

2.遞歸

斐波那契數列，做過筆記的呀，就是不會遞歸，數據結構的不好，但是我迭代的方法沒問題啊1 1 2 3 5….

//递归的方法
function test(n){
  if(n<pre class="brush:php;toolbar:false">//迭代的方法
function test(n){
  var num1 = 1;
  var num2 = 2;
  var num3 = 0;
  for(var i=0;i<n-2 alert><h4 id="緊張啊-方法-寫的四不像">緊張啊，方法2寫的四不像</h4>
<p>3.瀏覽器發送請求到頁面加載完成，發生了什麼</p>
<p>由這個問題才引出問題1 ，自己給自己挖坑</p>
<ul class=" list-paddingleft-2">之前總結的不到位。 。再來<li><p></p></li>瀏覽器開啟線程，根據這個www/baidu.com的網域來找DNS伺服器，解析成對應的IP位址。例如解析成：http://www.php.cn/ :80/login.aspx<li><p></p></li>瀏覽器在解析到IP位址後，做的第二步就是對指定的URL進行HTTP封裝，把URL封裝成http封包瀏覽器把URL封裝成HTTP訊息後，第三步驟做的事情就是將這個HTTP請求訊息傳送到伺服器</ul>
<p></p>
<h5 id="註-瀏覽器是如何把http請求訊息傳送到伺服器的呢-頁面渲染過程中還會有請求發生麼-一定有其他請求發生的-調介面">（註：瀏覽器是如何把http請求訊息傳送到伺服器的呢？頁面渲染過程中還會有請求發生麼？一定有其他請求發生的。調介面</h5>
<p>下面是引用的</p>
<p>現在的前後端分離, 後端伺服器的角色更像是一個API Server, 接收請求並且只是以資料的形式返回, 而怎麼渲染和表現資料, 都交給更前端的表現層來做, 實現前後端的解耦</p>
<h4 id="盒模型">5.盒模型</h4>
<p>說了標準盒模型和怪異盒模型，常識也不說了</p>
<p>6.了解或使用MV*框架</p>
<p>用過backbone、</p>6.了解或使用MV*框架<h4></h4>用過backbone、 vue，說了angular和react。 <p>公司用的ant</p>
<h4 id="說了最近其他項目用webpack">說了最近其他項目用webpack，</h4>
<p>（1）熱加載</p>
<h4 id="檔案壓縮打包">（2）檔案壓縮打包</h4>
<p>问了webpack的基本配置，自己回答的：entery和output，感觉好浅薄。还是用的少，了解少的缘故吧</p>
<h5 id="webpack的常用配置">webpack的常用配置</h5>
<ol class=" list-paddingleft-2">
<li><p>entry:{} //加载模块的入口点</p></li>
<li><p>output:{}//打包文件的路径和名称</p></li>
<li><p>module:{}//那些加载器来处理那些文件</p></li>
<li><p>resolve:{}//设置模块的一些细节</p></li>
<li><p>plugins:[]//系统插件和扩展插件</p></li>
</ol>
<p><br></p>
<h4 id="使用的vue其他生态库">9.使用的vue其他生态库</h4>
<p>使用了 vue-router、vue-resource，了解vuex</p>
<p>由此引出问题10，11，12</p>
<h4 id="说说vue-router的原理-怎么实现路由的">10.说说vue-router的原理，怎么实现路由的</h4>
<p>平时做项目能正常跳转就可以了，没有想过路由怎么路由的，没答上来。。</p>
<p>SPA路由实现原理不知道面试官想得到的是不是类似这样的答案。</p>
<h4 id="vue的生命周期">11.vue的生命周期</h4>
<p><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/84caeb39dd29bbfbdf073d3d6cce090b-1.png?x-oss-process=image/resize,p_40" class="lazy" alt="前端面試經驗總結" ></p>
<h4 id="vue组件通信">12.vue组件通信</h4>
<p>父子组件通信的机制，传递数据使用prop属性</p>
<ul class=" list-paddingleft-2"><li><p>动态Prop</p></li></ul>
<p>用 <code>v-bind</code> 动态绑定 props 的值到组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。</p>
<pre class="brush:php;toolbar:false"><p>
  <input>
  <br>
  <child></child>
</p>

<child></child>

• 单向数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

通常有两种改变 prop 的情况：

1. prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；

2. prop 作为需要被转变的原始值传入。

13.说说JSONP的实现原理

JSONP ： JSON with Padding

（1）script标签 src属性可以访问外部资源

（2）用script标签加载资源是没有跨域问题的

在资源加载进来之前定义好一个函数，函数接受一个参数，函数中包含 实现逻辑（要做什么事）

通过script标签加载远程文件资源，当远程文件被加载进来时，执行当前定义好的函数，数据就是函数传入的参数

14.职业规划

求职定位，到底想干啥？

第二部分领导面

每一点都非常深入。

1.css盒模型

• 标准盒模型和怪异盒模型不再重复

• box-sizing属性：content-box：标准盒模型，border-box：怪异盒模型

• 行内元素同样具有盒模型

A.任何元素都可以设置border

<!-- 行内元素可以设置border 设置宽高无效-->
<span>haha</span>

B.行内元素设置padding，margin 上下是无效的，左右是有效的

<!-- 行内元素设置padding、margin-->
<p>
    <span>1782</span>
    </p><p>
        woship
    </p>
![Snip20170211_5](/Users/shenyuanyuan/Desktop/Snip20170211_5.png)

行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。

• 黄色内边距5px

• 左边黄色距离蓝色20px

• 上下虽然显示padding，但是padding并没有影响其他元素

2.position定位

（1）position的属性有哪些？默认的是什么？

默认值：static

属性有5个分别是：relative、absolute、fixed、inherit、static

（2）例子考察

父元素p ：width:500px;height:200px;position: static|absoluta|relative|fixed。 position分别取值，子元素怎么定位？

子元素p：width：200px;height:200px;position：absolute

<!-- 父元素默认static-->
<p>
    </p><p>
    </p>
    <p>
    </p>


<br>
<!-- 父元素默认relative-->
<p>
    </p><p>
    </p>
    <p>
    </p>

<br>
<!-- 父元素默认fixed-->
<p>
    </p><p>
    </p>
    <p>
    </p>

<!-- 父元素默认absolute-->
<p>
    </p><p>
    </p>
    <p>
    </p>

发现：子元素绝对定位，按照除了属性为 static以外的第一个父元素定位。所以父元素设置为：absolute、relative、fixed，子元素定位表现一致；

（3）例子考察(事实证明，面试官这道题也错了)

如果子元素设置margin、border、padding呢？子元素左上角的点以margin、border、还是padding定位

<p>
    </p><p>
    </p>
    <p>
    </p>

<br>
<!--  最原始-->
<p>
    </p><p>
    </p>
    <p>
    </p>

<br>
<!--  最原始：添加margin-->
<p>
    </p><p>
    </p>
    <p>
    </p>

<br>
<!--  最原始：添加padding-->
<p>
    </p><p>
    </p>
    <p>
    </p>

<br>
<!--  最原始：添加botder-->
<p>
    </p><p>
    </p>
    <p>
    </p>

RunJS上边分享的代码

3.BFC（块级格式化上下文）

• 清除遮挡

  <p></p>
  <p>    </p>
  .left {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
  }
  .right {
  height: 200px;
  background: yellow;
  overflow:hidden;//属性清楚遮挡
  }

• 关闭浮动

• 解决垂直双边距问题

  <p>
      </p><p>    
      </p>
      <p></p>
  

BFC的作用

http://www.php.cn/

4.flex（css3新特性）

<p>
  </p><p></p>
    <p></p>
    <p></p>
    <p></p>
    
.container {
  display: flex;
  flex-flow: row;
    width:300px;
    height:100px;
    background:gray;
    justify-content:space-around
}
.box {
  width: 20px;
    background:yellow;
    height:20px;
}

flex参考1

flex参考2

在线例子：http://www.php.cn/

5.JS原型和原型链

个人觉得讲的很好的js原型、原型链

原型链

function Foo(){
}
var a = new Foo();//new的操作做了什么
var a = new Object()
a.__proto__ = Foo.prototype
Foo.call(a)

6.闭包

闭包：当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

function a(){
  var i=0;
  function b(){
     alert(i);       
  }       
  return b;   
}   
var c = a();   
c();

7.http

请求头字段和状态码

http状态码

8.数组去重算法（时间／空间复杂度）

数组去重

时间复杂度空间复杂度也不会啊。

X.说说你做前端的优势

除了技术，这个也问？感觉没啥优势，优势是移动端经验相对多一点