前端面试经验总结

阿神

发布时间：2017-02-18 14:19:34

1724人浏览过

来源于php中文网

原创

今天的事今天做，分享面筋，大家共同进步。面出了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等
//: 层级URL标识符号可以理解为把协议和后面的信息分开
Login：password@：身份认证一般的协议都会使用默认的匿名形式进行数据获取
Address：服务器地址一般是以域名的形式存在
port：服务器端口不同协议有自己默认的端口号
/path/to/resource: 文件路径指向唯一一个确定的资源
?query_string：查询字符串
／#fragment：片段ID 这部分内容不会被传递到服务器一般用于页面的锚，页面下方返回顶部的按钮就是利用这个实现的

2.递归

斐波那契数列，做过笔记的呀，就是不会递归，数据结构学的不好，但是我迭代的方法没问题啊 1 1 2 3 5….

//递归的方法
function test(n){
  if(n<2){
    return 1;
  }
  return test(n-1)+test(n-2)
}
alert(test(9))

//迭代的方法
function test(n){
  var num1 = 1;
  var num2 = 2;
  var num3 = 0;
  for(var i=0;i紧张啊，方法2写的四不像
3.浏览器发送请求到页面加载完成，发生了什么
由这个问题才引出问题1 ，自己给自己挖坑
之前总结的不到位。。再来

浏览器开启线程，根据这个www/baidu.com的域名来找DNS服务器，解析成对应的IP地址。例如解析成：http://www.php.cn/ :80/login.aspx
浏览器在解析到IP地址后，做的第二步就是对指定的URL进行HTTP封装，把URL封装成http报文浏览器把URL封装成HTTP报文后，第三步做的事情就是将这个HTTP请求报文发送到服务器

（注：浏览器是如何把http请求报文发送到服务器的呢？ 答案：浏览器会在内部建立一个Socket对象，把http请求报文转变成byet[]字节，然后调用Socket.Sent()方法把这些数据发送到服务器的
这里又有一问：页面渲染过程中还会有请求发生么？我的回答：也许
我觉得也许这个回答不算错吧。万一请求的页面就是没有css和图片的‘hello world’呢
其实一般情况是一定有其他请求发生的。eg js 、css 、图片等
4.前后端分离的理解
说了下自己的情况，就是前后端协商接口，前后端协同开发，前端写挡板数据，最后调接口
下面是引用的
现在的前后端分离, 后端服务器的角色更像是一个 API Server, 接收请求并且只是以数据的形式返回, 而怎么渲染和表现数据, 都交给更前端的表现层来做, 实现前后端的解耦
5.盒模型
说了标准盒模型和怪异盒模型，常识也不说了
6.了解或使用MV*框架
用过backbone、vue，说了angular和react。。
7.模块化
自己了解吧，不说了
8.说说你公司项目使用的打包工具（开发和用户都有什么好的体验？）
公司用的ant
说了最近其他项目用webpack，
（1）热加载
（2）文件压缩打包
问了webpack的基本配置，自己回答的：entery和output，感觉好浅薄。还是用的少，了解少的缘故吧
webpack的常用配置

entry:{} //加载模块的入口点
output:{}//打包文件的路径和名称
module:{}//那些加载器来处理那些文件
resolve:{}//设置模块的一些细节
plugins:[]//系统插件和扩展插件

9.使用的vue其他生态库
使用了 vue-router、vue-resource，了解vuex
由此引出问题10，11，12
10.说说vue-router的原理，怎么实现路由的
平时做项目能正常跳转就可以了，没有想过路由怎么路由的，没答上来。。
SPA路由实现原理不知道面试官想得到的是不是类似这样的答案。
11.vue的生命周期

12.vue组件通信
父子组件通信的机制，传递数据使用prop属性

							
								
								
									兴泰网络办公系统1.61
									基于 Internet 的 Web 技术，完全采用B/S 体系结构的网络办公系统。该系统具有安全性高、功能极为强大、可在广域网中使用也可在局域网中使用、也可以同时在局域网和广域网中使用的特点，全傻瓜式安装，无需作复杂配置，界面采用类似windows资源管理器的设计，结构清晰，条理分明，即使不熟悉电脑的人也可很快掌握全部操作。该系统通过在广域网内的广泛试用验证和经专业技术人员的调试、测试，确认具有很
								
								下载 
							
						
动态Prop
用 v-bind 动态绑定 props 的值到组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

  
  

  


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

prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；
prop 作为需要被转变的原始值传入。

13.说说JSONP的实现原理
JSONP ： JSON with Padding
（1）script标签 src属性可以访问外部资源
（2）用script标签加载资源是没有跨域问题的
在资源加载进来之前定义好一个函数，函数接受一个参数，函数中包含 实现逻辑（要做什么事）
通过script标签加载远程文件资源，当远程文件被加载进来时，执行当前定义好的函数，数据就是函数传入的参数
14.职业规划
求职定位，到底想干啥？
第二部分领导面
每一点都非常深入。
1.css盒模型

标准盒模型和怪异盒模型不再重复
box-sizing属性：content-box：标准盒模型，border-box：怪异盒模型
行内元素同样具有盒模型

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

haha

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


    1782
    

        woship
    
![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以外的第一个父元素定位。所以父元素设置为：absolute、relative、fixed，子元素定位表现一致；
（3）例子考察(事实证明，面试官这道题也错了)
如果子元素设置margin、border、padding呢？子元素左上角的点以margin、border、还是padding定位

    

    
    
    





    

    
    
    





    

    
    
    





    

    
    
    





    

    
    
    

RunJS上边分享的代码
3.BFC（块级格式化上下文）


清除遮挡

    
.left {
width: 100px;
height: 100px;
background: red;
float: left;
}
.right {
height: 200px;
background: yellow;
overflow:hidden;//属性清楚遮挡
}
关闭浮动

解决垂直双边距问题

    
    
    
    


BFC的作用
http://www.php.cn/
4.flex（css3新特性）

  

    
    
    
    
.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.说说你做前端的优势
除了技术，这个也问？感觉没啥优势，优势是移动端经验相对多一点