前端面试题目准备

1.高度已知，请写出三栏布局，其中左右宽度个300px,中间自适应：

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Layout</title>
  6     <style>
  7         html *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         .layout{
 12             margin-top: 20px;
 13         }
 14         .layout article div{
 15             min-height: 100px;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20 <!--浮动-->
 21 <section class="layout float">
 22     <!--//样式和结构中都把center写在right前面-->
 23     <style media="screen">
 24         .layout.float  .left{
 25             float: left;
 26             width: 300px;
 27             background: red;
 28         }
 29         .layout.float  .right{
 30             float: right;
 31             width: 300px;
 32             background: blue;
 33         }
 34         .layout.float .center{
 35             background: yellow;
 36         }
 37 
 38     </style>
 39     <article class="left-right-center">
 40         <div class="left"></div>
 41         <div class="right"></div>
 42         <div class="center">
 43             <h1>浮动解决方案</h1>
 44             这是三栏布局的中间部分
 45         </div>
 46     </article>
 47 </section>
 48 <!--绝对定位-->
 49 <section class="layout absolute">
 50     <style>
 51         .layout.absolute  .left-center-right>div{
 52             position: absolute;
 53         }
 54         .layout.absolute .left{
 55             left: 0;
 56             width: 300px;
 57             background: red;
 58         }
 59         .layout.absolute .center{
 60             left: 300px;
 61             right: 300px;
 62             background: yellow;
 63         }
 64         .layout.absolute .right{
 65             right: 0;
 66             width: 300px;
 67             background: green;
 68         }
 69     </style>
 70     <article class="left-center-right">
 71         <div class="left"></div>
 72         <div class="center">
 73             这是三栏布局绝对定位中间部分
 74         </div>
 75         <div class="right"></div>
 76     </article>
 77 </section>
 78 
 79 <!--伸缩布局-->
 80 <section class="layout flexbox">
 81     <style>
 82         .layout.flexbox{
 83             margin-top: 140px;
 84         }
 85         .layout.flexbox .left-center-right{
 86             display: flex;
 87         }
 88         .layout.flexbox  .left{
 89             width: 300px;
 90             background: red;
 91         }
 92         .layout.flexbox .center{
 93             flex:1;
 94             background: yellow;
 95         }
 96         .layout.flexbox .right{
 97             width: 300px;
 98             background: blue;
 99         }
100     </style>
101     <article class="left-center-right">
102     <div class="left"></div>
103     <div class="center">
104         这是三栏布局的flexbox的中间部分
105     </div>
106     <div class="right"></div>
107     </article>
108 </section>
109 <!--表格布局-->
110 <div class="layout table">
111     <style>
112         .layout.table .left-center-right{
113             width: 100%;
114             display: table;
115             height: 100px;
116         }
117         .layout.table .left-center-right>div{
118             display:table-cell;
119         }
120         .layout.table .left{
121             width: 300px;
122             background:red;
123         }
124         .layout.table .center{
125             background: yellow;
126         }
127         .layout.table .right{
128             width: 300px;
129             background:blue;
130         }
131     </style>
132     <article class="left-center-right">
133         <div class="left"></div>
134         <div class="center">
135            <h2>表格布局</h2>
136         </div>
137         <div class="right"></div>
138     </article>
139 </div>
140 <!--网格布局-->
141 <section class="layout grid">
142     <style>
143         .layout.grid .left-center-right{
144             display: grid;
145             width: 100%;
146             grid-template-rows:100px;
147             grid-template-columns: 300px auto 300px;
148         }
149         .layout.grid .left{
150             background: red;
151         }
152         .layout.grid .center{
153             background: yellow;
154         }
155         .layout.grid .right{
156             background: blue;
157         }
158     </style>
159     <article class="left-center-right">
160         <div class="left"></div>
161         <div class="center">
162             <h2>网格布局</h2>
163         </div>
164         <div class="right"></div>
165     </article>
166 </section>
167 </body>
168 </html>

 2.谈谈你对css盒模型的认识：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BFC</title>
 6 </head>
 7 <body>
 8    <!--bfc垂直方向边距重叠-->
 9 <section id="margin">
10     <style>
11         #margin{
12             background:pink;
13             overflow: hidden;
14         }
15         #margin>p{
16             margin: 5px auto 25px;
17             background: red;
18         }
19     </style>
20     <p>1</p>
21     <div style="overflow: hidden">
22         <p>2</p>
23     </div>
24     <p>3</p>
25 </section>
26    <!--bfc元素不与float元素重叠-->
27 <section id="layout">
28     <style>
29         #layout{
30             background: red;
31         }
32         #layout .left{
33             float: left;
34             width: 100px;
35             height: 100px;
36             background: pink;
37         }
38         #layout .right{
39             height: 110px;
40             background:#ccc;
41             overflow: auto;
42         }
43     </style>
44     <div class="left"></div>
45     <div class="right"></div>
46 </section>
47    <!--BFC子元素即使市float元素也会参与高度计算，即可以撑开父元素的高度-->
48 <section id="float">
49     <style>
50         #float{
51             background: red;
52             /*float: left;*/
53             overflow:auto;
54         }
55         #float .float{
56             float: left;
57             font-size: 30px;
58         }
59     </style>
60     <div class="float">我是浮动元素</div>
61 </section>
62 </body>
63 </html>

 3.捕获事件的流程；

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <!--捕获事件流程：和定义的顺序没关系，和响应的顺序有关系-->
 9     <div id="ev">
10         <style>
11             #ev{
12                 width: 300px;
13                 height: 100px;
14                 background: red;
15                 color:#fff;
16                 text-align: center;
17                 line-height: 100px;
18             }
19         </style>
20         目标元素
21     </div>
22     <script>
23         var ev=document.getElementById('ev');
24         window.addEventListener('click',function(){
25             console.log('window capture')
26         },true);
27         document.addEventListener('click',function(){
28             console.log('document capture')
29         },true);
30         document.documentElement.addEventListener('click',function(){
31             console.log('html capture')
32         },true);
33         body.addEventListener('click',function(){
34             console.log('body capture')
35         },true);
36        ev.addEventListener('click',function(){
37             console.log('ev capture')
38         },true)
39         // 自定义事件演示
40         var eve=new Event('test');
41        ev.addEventListener('test',function(){
42            console.log('test dispatch');
43        })
44         ev.dispatchEvent(eve);
45     </script>
46 </body>
47 </html>

 4.get和post的区别：

a.get在浏览器回退时是无害的，而post会再次提交请求；

b.get产生的url地址可以被收藏，而post不可以；

c.get请求会被浏览器主动缓存，而post不会，除非手动设置；

d.get请求只能进行url编码，而post支持多种编码方式；

e.get请求参数会被完整保留在浏览器的历史记录里，而post中的参数不会被保留；

d.get请求在url中传送的参数是有长度限制的，而post没有限制；

e.对于参数的数据类型，get只接收ascll字符，而post没有限制；

f.get比post更不安全，因为参数直接暴露在url上，所以不能用来传递敏感信息；

g.get参数通过url传递。post放在request body中；

http状态码有哪些？

a.1xx:指示信息--表示请求已接收，继续处理；

b.2xx:成功--表示请求已被成功接收；

c.3xx:重定向：要完成请求必须进行更进一步的操作；

d.4xx:客户端错误---请求有语法错误或者请求无法实现；

e.5xx:服务器错误--服务器未能实现合法的i请求；

HTTP状态码：

200：客户端请求成功；

206：客户发送了一个带有range头的get请求，服务器完成了它；

301：所请求的页面已经转移到新的url(永久的）

302：所请求的页面已经临时转移到新的urll;

304:客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户原来缓冲的文档还可以继续使用；

400：客户端请求有语法错误；不能被服务器所理解；

401;请求未经授权；

403：对被请求页面的访问被禁止；

404：请求资源不存在；

500：服务器发生不可预期的错误原来缓冲的文档还可以继续使用

501：请求未完成。服务器临时过载或当机，一段时候后可以恢复正常；

HTTP持久链接：

　　http:1.1版本支持：1.0不支持；

　　　HTTP协议采用“请求-应答”模式。当使用普通模式，即非keep-Alive模式的时候，每个请求/应答客户端和服务器都要新建一个连接，完成之后立即断开；（HTTP协议为无连接协议）；

　　当使用keep-Alive模式（又称持久连接/连接重用）时。keep-Alive功能使客户端到服务器的连接持续有效，当出现对服务器的后继请求时，keep-ALIVE功能避免了建立或者重新建立连接；

管线化：

在使用持久连接的情况下，某个连接上消息的传递类似于：

请求1>响应1>请求2>响应2>请求3>响应;

管线化情况下：

请求1>请求2>请求3>响应1>响应2>响应3；

管线化机制通过持久连接完成，仅http/1.1支持此技术；

只有GET和HEAD请求可以进行管线化，而POST则有所限制；

初次创建连接时不应启动管线机制，因为对方（服务器）不一定支持HTTP/1.1版本的协议；

管线化不会影响响应到来的顺序；如上面的例子所示，响应返回的顺序并未改变；

HTTP/1.1要求服务器端支持管线化，但并不要求服务器端也对响应进行管线化处理，知识要求对于管线化的请求不失败即可；

由于上面提到的服务器端的问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不好，因此现代浏览器默认并未开启管线化支持；

 

什么是DOCTYPE及作用：

DTD（document type definition,文档类型定义）是一系列的语法规则，用来定义XML或html的文件类型，浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式；

DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错；

 

HTML4.01的严格模式下该DTD包含所有HTML元素和属性，但不包括展示性和启用的元素；

HTML4.01的宽松或是传统模式下的DTD包含所有HTML元素和属性，包括展示性和弃用的元素；

 

重排reflow:

DOM结构中的各个元素都有自己的盒子（模型），这些都是需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个国恒叫reflow;

触发reflow:

1.当你增加/删除/修改DOM节点时，会导致reflow或repaint;

2.当你移动dom位置或是搞个动画的时候；

3.当你修改css样式的时候；

4.当你resize窗口的是hi i偶。或是滚动的时候；

5.当你修改网页的默认字体的时候；

 

重绘repaint:

定义：当各种盒子的位置，大小以及其他属性，如颜色，字体大小都确定下来以后，浏览器于是便把这些元素都按照各自的特性绘制以便，于是页面的内容出现了，这个过程称之为repaint;

触发repaint:

DOM改动；

CSS改动；

JS的运行机制：

　　settimeout/setinterval是异步任务；要挂起，先不执行；

　　任务：同步任务+异步任务；同步任务优先；同步任务执行完成之前异步任务不会被执行；

如何理解JS的单线程；

　　一个时间之内js只能干一件事情；

什么是任务队列：

　　分为同步任务和异步任务

什么是Event Loop：

     事件循环；

 

异步任务：

settimeout和setinterval;

DOM事件；

ES6中的PROMISE;

业务能力：

　　我做过什么业务？独立负责360数据彩票走势图开发；

　　　负责的业务有什么业绩？历时3周完成所有彩种开发，用户量上涨15%；

　　　使用了什么技术方案： 区别常规的canvas方案，使用vml+svg方案；

　　突破了什么技术难点： 解决了走势图高级绘图板的开发；

　　遇到了什么问题： 橡皮擦的问题，动态连线计算等；

 最大的收获是什么： 对业务的理解更加深入，对技术图表更有把握；

终极面试：

　　积极乐观；

　　主动沟通；

　　逻辑顺畅；

　　上进有责任心；

　　有主张，做事果断；

1.职业竞争力：

　　业务能力：可以做到行业第一；

　　思考能力：对同一件事可以从不同角度去思考，找到最优解；

　　学习能力：不断学习新的业务和技术，沉淀。总结；

　　无上限的付出：对于无法解决的问题可以熬夜，加班；

2.职业规划：

　　目标是什么：在业务上成为专家，在技术上成为行业大牛；

　　近阶段的目标：不断的学习积累各方面的经验，以学习为主；

　　长期目标：做几件很有价值的事情，如开源作品，技术框架等；

　　方式方法：先完成业务上的主要问题，做到机制，然后逐步向目标靠拢；

　　多咱们公司和多赞美HR;

　　主动沟通；

 自我介绍：一定要打草稿，展示什么优势，描述什么项目，切忌临场发挥；

  知进退：能不能给我一些资料，我回去研究一下；

三面：有经验，懂合作，有担当，懂规矩，察言观色；

终面：会沟通，要上进，好性格，有主见，强逻辑，无可挑剔；

复盘：胜不骄，败不馁，总结经验，步步为营，多拿几个offer;

 

 

 

　　

　　

posted @ 2018-02-09 00:27  前端极客  阅读(650)  评论(0)  编辑  收藏  举报