프론트엔드 면접 경험 요약

오늘 해야 할 일을 하고, 글루텐을 공유하고, 함께 발전해 보세요. 나 땀 많이 흘리는데, 어서.

잊어버린 부분이 있어서 기억나는 대로 쓰겠습니다. 조금 헷갈릴 수도 있겠네요.

팀장의 얼굴 첫 번째 부분

1. URL의 구조

URI—Universal Resource Identifier Universal Resource Identifier

웹 HTML 문서, 이미지, 비디오 클립, 프로그램 등과 같이 인터넷에서 사용할 수 있는 모든 리소스는 URI로 위치합니다.
URI는 일반적으로 세 부분으로 구성됩니다.
① 리소스 액세스를 위한 명명 메커니즘
② 리소스 저장 호스트 이름
③ 리소스를 강조하여 경로로 표현되는 리소스 자체의 이름입니다.

URL - 균일 자원 위치 균일 자원 위치

URL은 인터넷의 정보 자원을 설명하는 데 사용되는 문자열로, 주로 다양한 WWW 클라이언트 프로그램 및 서버에서 프로그래밍 방식으로 사용됩니다. 특히 유명한 모자이크.
URL을 사용하면 파일, 서버 주소, 디렉터리 등 다양한 정보 리소스를 통일된 형식으로 설명할 수 있습니다.
URL은 일반적으로 세 부분으로 구성됩니다.
①프로토콜(또는 서비스 방식)
②리소스가 저장된 호스트의 IP 주소(때때로 포트 번호를 포함함)
③호스트 리소스의 특정 주소. 디렉토리, 파일명 등

예
URI = 구성
URL = 논술, 서사, 시...

그럼

1. 매크로를 설명할 때 교사는 다음과 같이 묻습니다. 오늘 시험의 '작문'은 모두 잘 썼지만 '논쟁'은 모두 잘 썼다고 말할 수는 없습니다. 그것은 같은 것을 가리킨다.
2. 객관적으로 설명할 때 동료에게 이렇게 말할 것입니다. 오늘 시를 사용하여 작문을 썼다고 말하는 대신 오늘 제가 쓴 것은 "시"입니다.

마찬가지로

기술문서 명세서를 작성할 때 특정 매개변수를 전달해야 한다고 하는 것이 아니라 특정 매개변수를 URI로 전달해야 한다고 말합니다. URI "URL 형식 문자열".

• 구성표: // 프로토콜 부분, 끝::, 일반적인 프로토콜에는 HTTP, HTTPS 등이 포함됩니다.

• //: 계층적 URL 식별자 기호는 후속 정보에서 프로토콜을 분리하는 것으로 이해될 수 있습니다.

• 로그인: 비밀번호@: 신원 인증 일반 프로토콜은 데이터에 기본 익명 형식을 사용합니다. 가져오기

• 주소: 서버 주소는 일반적으로 도메인 이름 형식으로 존재합니다.

• 포트: 서버 포트 프로토콜마다 고유한 기본 포트가 있습니다. 숫자

• /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><p>긴장됩니다. 방법 2는 같은 방식으로 작성되지 않았습니다</p>
<h4 id="페이지가로드되었습니다-무슨-일이-있었나요">3. 페이지가로드되었습니다. 무슨 일이 있었나요</h4>
<p>이 질문은 질문 1로 연결됩니다. 구멍을 파고</p>
<p>이전 요약이 제자리에 있지 않았습니다. . 다음 </p>
<ul class=" list-paddingleft-2">
<li><p> 브라우저는 스레드를 시작하고 www/baidu.com이라는 도메인 이름을 기반으로 DNS 서버를 찾아 해당 IP 주소로 확인합니다. 예를 들어 다음과 같이 구문 분석됩니다. http://www.php.cn/:80/login.aspx</p></li>
<li><p>브라우저가 IP 주소를 구문 분석한 후 두 번째 단계는 구문 분석입니다. 지정된 URL은 HTTP로 캡슐화되고 URL은 http 메시지로 캡슐화됩니다. 브라우저가 URL을 HTTP 메시지로 캡슐화한 후 세 번째 단계는 HTTP 요청 메시지를 서버 </p></li>
</ul>로 보내는 것입니다. <p>(참고: 브라우저는 http 요청 메시지를 서버에 어떻게 전송합니까? 답: 브라우저는 내부적으로 Socket 객체를 생성하고 http 요청 메시지를 byet[] 바이트로 변환한 다음 Socket.Sent( ) 메서드를 호출합니다. 이 데이터를 서버로 보내려면</p>
<h5 id="여기에-또-다른-질문이-있습니다-페이지-렌더링-중에-요청이-있습니까-내-답변-아마도">여기에 또 다른 질문이 있습니다. 페이지 렌더링 중에 요청이 있습니까? 내 답변: 아마도</h5>
<p>요청한 페이지가 잘못된 것이 아닌 것 같습니다. CSS와 그림이 없는 'hello world'</p>
<p>사실 js, css, 그림 등 다른 요청도 있을 텐데요.</p>
<h4 id="end">4. end</h4>
<p>제 자신의 상황에 대해 이야기했습니다. 즉, 프론트엔드와 백엔드가 인터페이스를 협상하고, 프론트엔드와 백엔드가 협력하여 개발하고, 프론트엔드가 배플 데이터를 쓰고, 마지막으로 인터페이스 조정</p>
<p>다음은 인용문입니다</p>
<p>현재 프런트엔드와 백엔드가 분리되면서 백엔드 서버의 역할은 API 서버에 더 가깝습니다. 요청하고 데이터 형식으로만 반환합니다. 데이터를 렌더링하고 표시하는 방법은 프런트엔드와 백엔드의 분리</p>
<h4 id="박스-모델">박스 모델</h4>
<p>상식이 아닌 표준 박스 모델과 이상한 박스 모델에 대해 이야기했습니다</p>
<h4 id="MV-프레임워크를-이해하거나-사용합니다">6. MV* 프레임워크를 이해하거나 사용합니다 </h4>
<p>backbone, vue를 사용하고 이에 대해 이야기했습니다. </p>
<h4 id="모듈성">7. 모듈성</h4>
<p>더 이상 설명하지 않겠습니다</p>
<h4 id="회사의-프로젝트에-사용되는-패키징-도구에-대해-이야기해-보세요-개발자와-사용자-모두">8. 회사의 프로젝트에 사용되는 패키징 도구에 대해 이야기해 보세요. 개발자와 사용자 모두?) </h4>
<p>회사에서는 ant를 사용합니다</p>
<p>최근 다른 프로젝트에서 webpack을 사용한 사례를 알려주세요. </p>
<p>(1) Hot loading</p>
<p> (2) 파일 압축 및 패키징</p>
<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.说说你做前端的优势

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