2016年前端面试总结（实习生）

来源：互联网发布：linux设置ntp客户端编辑：程序博客网时间：2024/06/09 20:19

一、技术上的：

1. IE6底下怎么固定网页中的小窗口（页面中的悬浮框） ?

fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。解决代码如下

<!--[if IE 6]--><style>html{overflow:hidden;} /*一定要写*/body{ height;100%;overflow:auto;}#rightform form{position:absolute;}</style><!--[ end if ]-->

2.请问使用jsonp只能使用get方法进行提交，表单数据提交不上去你会怎么做?

jsonp只能使用get方法进行提交，表单数据提交不上去你会怎么做，jsonp默认的ajax请求是异步的，并且jsonp只有get方法，没有post方法。

3.你知道angularJS当中的判断语句 ng-if 、ng-swith 么?

ng-if 一般用于input 或者 button 属性值为false/true 类似于ng-view 用于显示或者隐藏，都需要绑定在作用域上。

4.你使用H5页面APP端展示（下拉刷新，上拉加载）不能使用框架，使用原生js ，你是怎么实现的？

http://www.jb51.net/article/98394.htm 这里有详细介绍

思路：手指触摸屏幕向上滑动，使用scroll()方法，然后监听判断是否到达了页面底部、【过程中要计算滚动高度】如果到达了页面底部，然后就用ajax 请求下一页的数据，JS加载DOM节点然后显示到页面
1、引用iScroll.js，在初始化时添加两个事件监听：touchMove、DOMContentLoaded。
2、实现iScroll插件的onScrollEnd事件，也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。
3、上拉加载更多请求后台时就相当于分页请求数据，这时候需要在ajax请求时发送pageIndex参数，而初始化加载时需要从后台返回一个pageCount以便前台判断。
4、最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法。

5.你知道HTML 5 有哪些新特性么?

H5 不是基于SGML 标准通用标记语言（Standard Generalized Markup Language）、新的文档类型、脚本和链接无需type html语义化
H5 当中添加了很多新的标签
- 结构标签：Hgroup、Header和Footer和功能标签：video、audio、mark、small) canvas(图像)
- 新的属性（占位符 (placeholder)、 required 、autofocus 、controls、pattern等表单属性的丰富）
- 移除了原先表示样式的标签 big center font s 和功能不是很强的标签仅用CSS样式改变（text-decoration:line-though; underline overline）
H5 功能上：添加了画布多媒体拖拽缓存技术本地数据库 sqlLite indexDB
canvas存在兼容问题区分 HTML和HTML5 : 看DOCTYPE 看HTML 文档中的标签

6.你作品中的××网页，是怎么布局的，怎么做的，做了哪些?

对于我的××网作品，我主要使用DIV+CSS进行行式布局（从上往下）和列式布局（从左往右）、并且对其主页，列表页，详细页，以及用户注册，登陆等全套静态页面的制作，并且在制作前期使用Photoshop进行网页中icon和图片的切片，在制作过程中使用IEtest进行了不同浏览器的测试，解决了目前主流浏览器的兼容问题。

7.可以说说图片轮播（图片翻转）你是怎么做到的（实现的）？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>轮播</title>    <style type="text/css">        *{ margin: 0px; padding: 0px; }        #div_box{width: 170px; height: 165px; border: 10px solid #dddddd; margin: 25% auto; overflow: hidden;}        .ul_box{width: 680px; height:165px;position: relative;right: 0;}        .ul_box>li{float: left;width: 170px; height: 165px;list-style: none;}       </style>    <script type="text/javascript">        window.onload=function () {            var ul=document.getElementById("ul_box");            var lis=ul.children;           // ul.style.right=pos+"px";            function move() {                var pos=0;               function add() {                   if(pos<510){                       pos+=170;                   }else {                       pos=0;                   }                   ul.style.right=pos+"px";            }               setInterval(add,1000);                /*var interval= setInterval(add,100);                ul.onmouseover=function () {                    console.log(1);                    clearInterval(interval);                };                ul.onmouseleave=function () {                    console.log(2);                    var interval= setInterval(add,100);                }*/            }            move();        };    </script></head><body>    <div id="div_box">        <ul class="ul_box" id="ul_box">            <li><img src="sh-yw-01mt.jpg" alt="" width="170px" height="165px"></li>            <li><img src="sh-yw-02dl.jpg" alt="" width="170px" height="165px"></li>            <li><img src="sy-yw-04gk.jpg" alt="" width="170px" height="165px"></li>            <li><img src="sy-yw-05hy.jpg" alt="" width="170px" height="165px"></li>        </ul>    </div></body></html>

8.IE 8 底下的浏览器不支持圆角（box-radio）属性，如果页面遇到圆角你会怎么做？

使用圆角背景替代圆角属性

9.你对JS当中的面向对象了解多少？了解哪些？你说说吧

Javascript是面向对象开发的脚本语言，所以在JS中就有很多内置对象（包括：Object、Array、Function、Pattern、Math 、包装器函数【String、Number、Boolean】），既然javascript是面向对象开发的，那么面向对象的前提：抽象，。抽象：一、创建对象（简单对象的创建）；二、封装——构造函数/工厂方法；三、继承——原型链的继承（属性的继承），目前这是我对JS的个人理解。

10.Git当中的项目会进行分支么？

对于Git的使用，主要是公司为了便于开发使用的代码托管工具，目前只要能够简单使用GitHub 进行代码的clone、Push、Pull、更新后Push即可【面试官不会问详细的】对于分支本人还在学习中。。。

11.你对于PSD格式的图片会进行切片（抠图）么？

肯定说会的，而且还要告诉面试官，你狠熟练，【越简单的问题越是要细心回答，不能认为这个是小儿科的问题或者说太简单的工作】切片并没有想象中的那个简单。

12.一个div我想让他居中，但是不给div（固定宽度和不固定宽度）居中显示，你有几种方法，全部说出来？

1、CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度width、
2、使用text-align实现DIV CSS居中将该属性值设置为center并应用到body元素上即可。（CSS hack技术–>之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后，我们要按照如下代码为body应用text-align属性）这种做法是彻头彻尾的hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。【BUG：之后会出现什么问题吗？body的所有子孙元素都会被居中显示。因此，我们就需要用再写一条规则，让其中的文本回到默认的居左对齐：】
3、定位，（相对，绝对，使用百分比）也可以做到
4、在不设置 Div 元素的宽度（width）的情况下，如何让 Div 元素居中：
使用定位，并且使用百分比，相对绝对都可以（前提是要有容器，让子集撑起父级，然后让父级使用定位元素+百分比）

  <div class="wrap">     <div class="inner">                                     让这个div居中      </div>                           </div>   <style> .wrap { float: left; /* 自适应内容宽度 */position: relative; left: 50%;background-color: #dddddd;} .inner { position: relative; left: -50%;background-color: #cccccc; } </style>

13.一个盒子里面有两个子div 我给外部的100%里面的一个宽度20%，一个80%、浮动，会出现什么情况

div盒子直接使用百分比父级撑不起来，要想让父级撑起来，必须加overflow：hidden；属性，或者给父级加<div style="clear:both"></div>也可以撑起父级或者直接给父级指定宽度。

14.ajax是同步还是异步？怎么个异步你是怎么用代码实现的？

ajax全称 asynchronous javascript and xml, 本就是为异步而生的.
异步和同步其实在这里都可以做。异步虽然不能直接得到返回值。但是有一个回调函数可以使用，现在, 在chrome和firefox中使用同步ajax会收到警告:
一般好像都是异步用的多，同步也可以用异步在回调里面实现。并且用同步的时候会卡死浏览器。
但ajax的异步和同步方法还是有区别的，区别就是同步方法是立即请求后台将结果返回，而异步则是在回调里才知道结果。（代码的后期补上）

15.一个input框前面出现一个图标你有几种方法实现把你所有知道的说出来？

使用标签+img(图片)浮动；
使用display:inline-block;
对目标icon进行定位（position），
使用图片精灵技术（sprite）使用背景background：url() x y；设置图片显示的位置
使用外部资源的icon,比如bootstrap框架里自带的glopyicon等

16.说出两种网页优化的方法？

1、优化图片资源的格式和大小；
2、对js, CSS代码进行打包压缩打包工具(grunt、gulp) ；开启网络压缩(gzip)；
3、使用浏览器缓存(同一个站点下面的不同页面，往往都会复用一部分资源文件，如果把这些资源文件设置为可缓存的)；
4、减少重定向请求(对网页最好使用响应式布局，让其适应不同终端)；

17.如何对页面进行响应式布局响应式布局分为(布局的响应以及文本文字的响应rem)

1.布局及设置meta标签，
2.宽度不固定，可以使用百分比
‌首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）

18.浏览器默认字体是16px‌ Chrom中设置小于12px字体需要使用： -webkit-text-size-adjust:none; body{font-size:14px;}

19.‌(网络)当你在浏览器中输入一个网址，浏览器内部会发生什么？
http://www.cnblogs.com/SarahLiu/p/5954832.html 详解
- 1.敲域名回车
2.查询本地的DNS缓存，以找到域名对应的主机IP地址（若有，则跳到4）
3.查询远程域名根DNS，找到IP地址
4.向远程IP地址的服务器发送请求（若请求失败且未经过2，则返回2，若再再次失败，返回错误代码）
5.服务器响应请求，向用户发送数据
6.浏览器对返回的数据进行处理（浏览器渲染）
7.浏览器显示给用户
DNS 是域名系统 (Domain Name System) 的缩写，是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。

20.‌jQuery中hover,mouseover的区别？

21.‌‌CSS3写一个背景变换的动画？

22.‌‌使用js写一个java中trim()方法去除左右两边多余空格？

23.‌‌PHP中写一个前一天的日期，格式为2016～12～01？

24.‌‌你如何理解跨域请求，有哪些方法解决跨域资源共享除了jsonp还有哪些？

二、非技术问题

（1）. 面试总结：

请做一下自我介绍
你为什么来到这里，你有什么职业目标么(目前什么打算)
你有什么要问我的(必问)
你有接受过系统的学习么
你的这些项目都是什么时候做的
不要提及以前的面试
你的目前的发展你的薪资我往低的给薪资你可以接受么？
你会跳槽么？你以后会想跳槽么？面试官看得不是结果而是你对解决问题的思路和态度
‌沉下心来读别人的代码站在面试官的和公司实际角度解决问题。
不要总是我认为…‌ 问什么答什么别说无关的答案用自己思路解决面试问题
‌使用过flash动画设计
设计网站 Behance Dribble

细节决定一切，我在努力，你呢？

‌

1 0

2016年前端面试总结（实习生）

一、技术上的：

二、 非技术问题

细节决定一切，我在努力，你呢？

二、非技术问题