2018Web前端面试试题总结及答案

1、完成的http请求过程需要经过哪些环节？
1）、域名解析；
2）、发起TCP的3次握手；
3）、建立TCP连接后发起http请求，浏览器得到html代码；
4）、浏览器解析HTML代码，并请求HTML代码中的资源（如js, css，图片）
5）、浏览器对页面进行渲染页面给用户；
2、简述浏览器渲染页面的过程。
1）、基本流程：
解析HTML以构建dom树 –> 构建render树 –>布局render树 —> 绘制render树。
（1） 、因此浏览器会解析HTML、svg、XHTML这三种文件生成一个Dom tree.
（2）、解析css产生一个规则树
（3）、js脚本，主要是通过DOM API和CSS API来操作DOM Tree和css Rule Tree。
3、有哪些方式可以实现多个页面见通信？
使用cookie,使用web worker，使用localeStorage和sessionStorage
三者的区别：
（1）、 cookie：兼容性好，只能存在不大于4kb,可永久存在，要关闭标签页回话立即结束时，不要cookie，因为它还会很可能存在一段时间，即使是session-cookie。
（2）、sessionStorage：不支持跨标签页共享数据集，比如，每次新开启一个标签页都要求用户重新登录。
（3）、localStorage：此处作用localstorage事件来解决这个问题。思路：当打开一个新的标签的时候，先询问是否有sessionstorage,有的话就通过localstorage事件向新页面传递sessionstorage，新页面获取后设置。
4、同步加载和异步加载分别有什么优缺点？
同步请求即是当前发出请求，浏览器什么都不做，必须等到请求完成返回数据之后，才能执行后续的代码，相当于是排队。
异步请求
当发出请求的同时，浏览器可以寄继续做任何事，ajax请求并不会影响页面的加载与用户的操作
5、对性能优化认识：
1）、 减少http请求次数；
2）、减少DNS查询次数；
3）、缓存ajax；
4）、延迟加载；
6、如何对网站的文件和资源进行优化
1）、文件合并（目的是减少http请求）；
2）、文件压缩（目的是直接减少文件下载的体积）
3）、使用cdn托管资源
4）、使用缓存
5）、gizp压缩你的js和css文件
6）、反向链接，网站外链接优化
7、http状态码有哪些？分别代表什么含义？
（1）、信息类：表示接收到请求并且继续处理
100 —-> 客户必须继续发出请求
1001—–>客户要求服务器根据请求转换HTTP协议版本
（2）、响应成功：表示动作被成功地完成，所请求的资源发送回客户端
200 —>表明请求被成功的完成，所请求的资源发送回客户端
201 —>提示知道新文件的url;
202 —–>接受和处理、但处理未完成
203 —-> 返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
（3）、重定向类：为了完成指定的动作，必须接受进一步处理
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个url
302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向
303—–建议客户访问其他url或者访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
4**(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401—–请求未经授权你，这个状态代码必须和www-Authenticate报头域一起使用;
404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在;
405——用户在Request-Line字段定义的方法不允许;
5**(服务端错误类)：服务器不能正确执行一个正确的请求
HTTP 500 - 服务器遇到错误，无法完成请求。
HTTP 502 - 网关错误
HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常
8、实现两等列高的例子


方法一：
<style>
.mainbox{
width: 600px;
margin: 0 auto;
}
.col{
display:table-cell;
width: 400px;
}
.col:first-child{
background: #D0E9C6;
}
.col:last-child{
background: #F05B4F;
}
</style>
<div class="mainbox">
<div class="col">
<h1>虽然很难过，一切很糟糕啊啊啊啊！</h1>
<p>我们本来及时很好的吧回到家看到！</p>
</div>
<div class="col">
<p>我们应该好好学习的，你说呢！</p>
</div>
</div>
方法二：

.mainBox{
display: flex;
}
.left{
flex: 1;
}
.right{
width: 300px;
}
.right{
background: #F05B4F;
}
.left{
background: #E4B9B9;
}

啊哈哈哈！~~~

我感觉自己都快要窒息了！。。。。