前端面试宝典（4）——来自cnblog-原创手记-慕课网

计算机网络

【1】HTTP请求四部分
1、HTTP请求的方法或动作，比如是get还是post请求；
2、正在请求的URL（请求的地址）；
3、请求头，包含一些客户端环境信息、身份验证信息等；
4、请求体（请求正文），可以包含客户提交的查询字符串信息、表单信息等。
请求头字段：
Accept:text/html,image/*(告诉服务器，浏览器可以接受文本，网页图片)
Accept-Charaset:ISO-8859-1 [接受字符编码：iso-8859-1]
Accept-Encoding:gzip,compress[可以接受 gzip,compress压缩后数据]
Accept-Language:zh-cn[浏览器支持的语言]
Host:localhost:8080[浏览器要找的主机]
If-Modified-Since:Tue, 09 May 2017 01:34:02 GMT[告诉服务器我这缓存中有这个文件,该文件的时间是…]
User-Agent:Nozilla/4.0(Com…)[告诉服务器我的浏览器内核，客户端环境信]
Cookie：[身份验证信息]
Connection:close/Keep-Alive [保持链接，发完数据后，我不关闭链接]

HTTP响应三部分
1、一个数字和文字组成的状态码，用来显示请求是成功还是失败；
2、响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等；
3、响应体（响应正文）。
响应头字段：
Cache-Control:[告诉浏览器如何缓存页面(因为浏览器的兼容性最好设置两个)]
Connection:close/Keep-Alive [保持链接，发完数据后，我不关闭链接]
Content-Type:text/html;charset=gb2312[内容格式和编码]
Last-Modified:Tue,11 Juj,2017 18 18:29:20[告诉浏览器该资源上次更新时间是多少]
ETag:”540-54f0d59b8b680”
Expires:Fri, 26 May 2017 13:28:33 GMT [失效日期]
server:apache tomcat nginx [哪种服务器]

【2】 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
1、浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求（TCP三次握手）；
2、服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
3、浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
4、载入解析到的资源文件，渲染页面，完成。

浏览器的渲染过程
1、浏览器请求到HTML代码后，在生成DOM的最开始阶段，并行发起css、图片、js的请求，无论他们是否在HEAD里。浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2、CSS文件下载完成，开始构建CSSOM
3、所有CSS文件下载完成，CSSOM构建结束后，和 DOM 一起生成 Render Tree。
4、有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作就是计算出每个节点在屏幕中的位置。
5、最后一步，按照算出来的规则，把内容渲染到屏幕上。
以上五个步骤前3个步骤因为DOM、CSSOM、Render Tree都可能在第一次Painting后又被更新多次，比如JS修改了DOM或者CSS属性。Layout 和 Painting 也会被重复执行，除了DOM、CSSOM更新的原因外，图片下载完成后也需要调用Layout 和 Painting来更新网页。
display:none 的节点不会被加入 Render Tree，而 visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为 display:none 是更优的。

一个完整的URL包括以下几部分
http://www.hzzly.net:8080/news/index.php?boardID=5&ID=24618&page=1#name
1、协议部分
2、域名部分
3、端口部分
4、虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止
5、文件名部分：从域名后的最后一个“/”开始到“？”为止
6、参数部分：从“？”开始到“#”为止之间的部分
7、锚部分：从“#”开始到最后

【3】 GET和POST的区别
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在1024字节，Get是通过地址栏来传值。
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。（常用于发送表单数据，新建、修改等），Post是通过提交表单来传值。

【4】常见HTTP状态码
1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态码。
2xx（成功）表示成功处理了请求的状态码。
200（成功）：服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
3xx（重定向）要完成请求，需要进一步操作。
301（永久移动）：请求的网页已永久移动到新位置。
302（临时移动）：服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。
304（未修改）：自从上次请求后，请求的网页未修改过。
4xx（请求错误）这些状态码表示请求可能出错，妨碍了服务器的处理。
400（错误请求）：服务器不理解请求的语法。
404（未找到）：服务器找不到请求的网页。
5xx（服务器错误）这些状态码表示服务器在处理请求时发生内部错误。
500（服务器内部错误）：服务器遇到错误，无法完成请求。
503（服务不可用）：服务器目前无法使用（由于超载或停机维护）。

1.HTTP状态码知道哪些？
state code describe mark
100 Continue 一般在发送post请求时已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理 301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

【5】简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

【6】px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

【7】如何消除一个数组里面重复的元素？
// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6

【8】 统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。
var str = "aaaabbbccccddfgh";
var obj = {};
for(var i=0;i<str.length;i++){
var v = str.charAt(i);
if(obj[v] && obj[v].value == v){
obj[v].count = ++ obj[v].count;
}else{
obj[v] = {};
obj[v].count = 1;
obj[v].value = v;
}
}
for(key in obj){
document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1
}

【9】写一个function，清除字符串前后的空格。（兼容所有浏览器）**
function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s)|(\s)$/g,""); //去除前后空白符
}
}

【10】一次完整的HTTP事务是怎样的一个过程？
基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户

其他问题

【1】你遇到过比较难的技术问题是？你是如何解决的？

【2】常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

【3】页面重构怎么操作？

【4】列举IE 与其他浏览器不一样的特性？
IE支持currentStyle，FIrefox使用getComputStyle
IE 使用innerText，Firefox使用textContent
滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
事件方面：IE：attachEvent：火狐是addEventListener
鼠标位置：IE是event.clientX；火狐是event.pageX
IE使用event.srcElement；Firefox使用event.target
IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none
CSS圆角：ie7以下不支持圆角

【5】99%的网站都需要被重构是那本书上写的？

【6】什么叫优雅降级和渐进增强？

渐进增强和优雅降级
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

【7】WEB应用从服务器主动推送Data到客户端有那些方式？

Javascript数据推送
Commet：基于HTTP长连接的服务器推送技术
基于WebSocket的推送方案
SSE（Server-Send Event）：服务器推送数据新方式

【8】对Node的优点和缺点提出了自己的看法？
（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

【9】你有哪些性能优化的方法？
（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

谈谈性能优化问题
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启GZIP，
代码层面的优化
用hash-table来优化查找
少用全局变量
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
用setTimeout来避免页面失去响应
缓存DOM节点查找的结果
避免使用CSS Expression
避免全局查询
避免使用with(with会创建自己的作用域，会增加作用域链长度)
多个变量声明合并
避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
尽量避免在HTML标签中写Style属性
移动端性能优化
尽量使用css3动画，开启硬件加速。
适当使用touch事件代替click事件。
避免使用css3渐变阴影效果。
可以用transform: translateZ(0)来开启硬件加速。
不滥用Float。Float在渲染时计算量比较大，尽量减少使用
不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
合理使用requestAnimationFrame动画代替setTimeout
CSS中的属性（CSS3 transitions、CSS3 3D
transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
PC端的在移动端同样适用

【10】http状态码有那些？分别代表是什么意思？
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用

【11】一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
查找浏览器缓存
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报头)
服务器回馈报头(响应报头)
html文档开始下载
文档树建立，根据标记请求所需指定MIME类型的文件
文件显示

浏览器这边做的工作大致分为以下几步：

加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。

解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

【12】除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

【13】你常用的开发工具是什么，为什么？

【14】对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js，前端可以实现服务端的一些事情

前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，

参与项目，快速高质量完成实现效果图，精确到1px；

与团队成员，UI设计，产品经理的沟通；

做好的页面结构，页面重构和用户体验；

处理hack，兼容、写出优美的代码格式；

针对服务器的优化、拥抱最新前端技术。

你觉得前端工程的价值体现在哪
1.为简化用户使用提供技术支持（交互部分）
2.为多个浏览器兼容性提供支持
3.为提高用户浏览速度（浏览器性能）提供支持
4.为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
5.为展示数据提供支持（数据接口）

【15】加班的看法？
加班就像借钱，原则应当是------救急不救穷

【16】平时如何管理你的项目？
先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如页面模块开始和结束）；
CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）
JS 分文件夹存放命民以该JS 功能为准英文翻译；
图片采用整合的 images.png png8 格式文件使用尽量整合在一起使用方便将来的管理

【17】说说最近最流行的一些东西吧？常去哪些网站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js

【18】移动端（Android iOS）怎么做好用户体验?
清晰的视觉纵线、信息的分组、极致的减法、
利用选择代替输入、标签及文字的排布方式、
依靠明文确认密码、合理的键盘利用、

【19】你在现在的团队处于什么样的角色，起到了什么明显的作用？

【20】你认为怎样才是全端工程师（Full Stack developer）？

【21】介绍一个你最得意的作品吧？

【22】你的优点是什么？缺点是什么？

【23】最近在学什么？能谈谈你未来3，5年给自己的规划吗？

【24】如何看待前端开发？
前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js，前端可以实现服务端的一些事情