[转]原文:Web前端面试标题汇总

翻阅目录

以下是采访一些面试中不时会赶上的经文面试题以及自个儿面试进度中有部分未缓解的难题,通过对文化的整治以及经验的下结论,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正,水平有限,望各位不吝指教。:)

 

 

回去顶部

HTML/CSS部分

 

壹 、什么是盒子模型?

在网页中,壹个要素占有空中的轻重由几个部分构成,其中包含成分的故事情节(content),成分的内边距(padding),成分的边框(border),成分的内地距(margin)四个部分。那多个部分占用的空间中,有的有个别可以显得相应的内容,而有的某个只用来分隔相邻的区域或区域。六个部分共同构成了css中成分的盒模型。

 

贰 、行内成分有何样?块级成分有怎么着? 空(void)成分有那么些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级成分:div、ul、li、dl、dt、dd、p、h1-h六 、blockquote
空元素:即系没有内容的HTML成分,例如:br、meta、hr、link、input、img

 

三 、CSS完毕垂直水平居中

一道经典的题材,落成形式有很三种,以下是内部一种落成:
HTML结构:

    <div class="wrapper">
        <div class="content"></div>
    </div>    

CSS:

    .wrapper {
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #ddd;
     }
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        //父元素需要相对定位
        top: 50%;
        left: 50%;
        margin-top:-100px ;   //二分之一的height,width
        margin-left: -100px;
    } 

 

肆 、简述一下src与href的界别

href
是指向网络财富所在地方,建立和近期因素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部财富的职责,指向的始末将会放到到文档中当前标签所在地点;在乞请src能源时会将其针对性的能源下载并动用到文档内,例如js脚本,img图片和frame等因素。当浏览器解析到该因素时,会暂停其余财富的下载和处理,直到将该财富加载、编译、执行达成,图片和框架等要素也这么,类似于将所指向财富嵌入当前标签内。这也是怎么将js脚本放在底部而不是尾部。

 

5、什么是CSS Hack?

一般的话是指向区其他浏览器写区其余CSS,就是 CSS 哈克。
IE浏览器Hack一般又分为三种,条件哈克、属性级哈克、拔取符哈克(详细参考CSS文档:css文档)。例如:

    // 1、条件Hack
   <!--[if IE]>
      <style>
            .test{color:red;}
      </style>
   <![endif]-->
   // 2、属性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
   // 3、选择符Hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */

 

⑥ 、简述同步和异步的界别

联手是阻塞方式,异步是非阻塞方式。
协办就是指3个进度在实践有个别请求的时候,若该请求必要一段时间才能回到消息,那么这么些历程将会直接等候下去,直到收到再次来到新闻才继续执行下去;
异步是指进度不须要直接等下去,而是继续执行上边的操作,不管其余进度的场馆。当有新闻重回时系统会通报进度展开处理,那样可以进步施行的频率。

jQuery, 

7、px和em的区别

px和em皆以长度单位,不一致是,px的值是一直的,钦赐是稍微就是稍稍,统计相比简单。em得值不是定点的,并且em会继承父级成分的字体大小。
浏览器的默许字体高都以16px。所以未经调整的浏览器都适合:
1em=16px。那么12px=0.75em, 10px=0.625em

 

捌 、什么叫优雅降级和渐进增强?

渐进增强 progressive enhancement:
针对低版本浏览器举办营造页面,保证最中央的效率,然后再针对高档浏览器进行职能、交互等改革和增添作用达到更好的用户体验。

优雅降级 graceful degradation:
一伊始就营造一体化的法力,然后再指向低版本浏览器举办兼容。

区别:

a. 优雅降级是从复杂的现状初叶,并统计减少用户体验的要求

b.
渐进增强则是从七个百般基础的,可以起功能的版本初阶,并不断增加,以适应今后条件的内需

c.
降级(功能衰减)意味着往重放;而渐进增强则意味朝前看,同时确保其基础处于安全地区

 

九 、浏览器的基础分别是何许?

IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:在此从前是presto内核,Opera现已改用谷歌(Google) Chrome的Blink内核
Chrome:Blink(基于webkit,谷歌与Opera Software共同开发)

 

归来顶部

JavaScript部分

 

什么添加、移除、移动、复制、创设和寻找节点?

1)创造新节点
createDocumentFragment() //创立壹个DOM片段
createElement() //创立2个切实的因素
createTextNode() //成立二个文本节点

2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过成分的Name属性的值
getElementById() //通过成分Id,唯一性

 

兑现1个函数clone,可以对JavaScript中的5种重大的数据类型(包涵Number、String、Object、Array、Boolean)举办值复制。

    /**
 * 对象克隆
 * 支持基本数据类型及对象
 * 递归方法
 */
function clone(obj) {
    var o;
    switch (typeof obj) {
        case "undefined":
            break;
        case "string":
            o = obj + "";
            break;
        case "number":
            o = obj - 0;
            break;
        case "boolean":
            o = obj;
            break;
        case "object": // object 分为两种情况 对象(Object)或数组(Array)
            if (obj === null) {
                o = null;
            } else {
                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
                    o = [];
                    for (var i = 0; i < obj.length; i++) {
                        o.push(clone(obj[i]));
                    }
                } else {
                    o = {};
                    for (var k in obj) {
                        o[k] = clone(obj[k]);
                    }
                }
            }
            break;
        default:
            o = obj;
            break;
    }
    return o;
}

 

怎样解除二个数组里面重复的要素?

// 方法一:
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

 

在Javascript中哪些是伪数组?如何将伪数组转化为专业数组?

伪数组(类数组):无法直接调用数组方法或期望length属性有怎样异样的一言一动,但还可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都回去NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为实在的Array对象。

function log(){
      var args = Array.prototype.slice.call(arguments);  
//为了使用unshift数组方法,将argument转化为真正的数组
      args.unshift('(app)');

      console.log.apply(console, args);
};

 

Javascript中callee和caller的作用?

caller是回来一个对函数的引用,该函数调用了当前函数;

callee是重临正在被实践的function函数,约等于所钦定的function对象的正文。

 

请描述一下cookies,sessionStorage和localStorage的不同

sessionStorage用于地点存储1个会话(session)中的数据,这个数量唯有在同三个会话中的页面才能访问并且当会话为止后数据也随后销毁。因而sessionStorage不是一种持久化的本地存储,仅仅是会话级其他储存。而localStorage用于持久化的当地存储,除非主动删除数据,否则数据是永恒不会晚点的。

web storage和cookie的区别

Web
Storage的定义和cookie相似,差别是它是为着更大体积存储设计的。Cookie的尺寸是受限的,并且每便你请求多少个新的页面的时候库克ie都会被发送过去,那样平空浪费了带宽,此外cookie还须要钦点作用域,不得以跨域调用。
而外,Web
Storage拥有setItem,getItem,removeItem,clear等艺术,不像cookie需求前端开发者自身封装set库克ie,getCookie。但是Cookie也是不得以或缺的:Cookie的意义是与服务器进行交互,作为HTTP规范的一有的而留存
,而Web Storage仅仅是为了在地方“存储”数据而生。

 

计算字符串中字母个数或计算最多字母数。

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+'&nbsp;'); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 
}   

 

jQuery的轩然大波委托方法on、live、delegate之间有怎么样分别?

 

怎么晓得闭包?

 

跨域请求财富的格局有如何?

 

议论垃圾回收机制方法及内存管理

 

支付进度中相遇的内存走漏情状,如何化解的?

 

回来顶部

HTTP

 

两遍完整的HTTP事务是何等的2个经过?

着力流程:

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求,浏览器得到html代码

e. 浏览器解析html代码,并请求html代码中的能源

f. 浏览器对页面举办渲染展现给用户

 

HTTP的状态码有怎么着?

 

HTTPS是何等落到实处加密?

 

重临顶部

算法相关

 

手写数组火速排序

有关快排算法的事无巨细表达,可以参考阮一峰先生的稿子高效排序
“迅速排序”的思想很简单,整个排序进度只须要三步:
(1)在数据集之中,选用贰个要素作为”基准”(pivot)。
(2)全部小于”基准”的成分,都移到”基准”的右侧;全体大于”基准”的要素,都移到”基准”的右边。
(3)对”基准”左边和左边的三个子集,不断重复第①步和第一步,直到全部子集只剩余一个成分截止。
参照代码:

 var quickSort = function(arr) {
  if (arr.length <= 1) { return arr; }
  var pivotIndex = Math.floor(arr.length / 2);
  var pivot = arr.splice(pivotIndex, 1)[0];
  var left = [];
  var right = [];
  for (var i = 0; i < arr.length; i++){
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat([pivot], quickSort(right));
};

 

JavaScript兑现二分法查找

二分法查找,也称折半搜索,是一种在静止数组中搜寻特定元素的搜索算法。查找进程可以分成以下步骤:
(1)首先,从静止数组的中档的要素起头搜寻,即便该因素正好是目标成分(即要查找的因素),则搜索进程甘休,否则进行下一步。
(2)假使目的成分大于可能小于中间成分,则在数组大于或低于中间成分的那二分一区域搜索,然后重新第三步的操作。
(3)假使某一步数组为空,则意味找不到对象成分。
参照代码:

     // 非递归算法
        function binary_search(arr, key) {
            var low = 0,
                high = arr.length - 1;
            while(low <= high){
                var mid = parseInt((high + low) / 2);
                if(key == arr[mid]){
                    return  mid;
                }else if(key > arr[mid]){
                    low = mid + 1;
                }else if(key < arr[mid]){
                    high = mid -1;
                }else{
                    return -1;
                }
            }
        };
        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
        var result = binary_search(arr,10);
        alert(result); // 9 返回目标元素的索引值       


    // 递归算法
        function binary_search(arr,low, high, key) {
            if (low > high){
                return -1;
            }
            var mid = parseInt((high + low) / 2);
            if(arr[mid] == key){
                return mid;
            }else if (arr[mid] > key){
                high = mid - 1;
                return binary_search(arr, low, high, key);
            }else if (arr[mid] < key){
                low = mid + 1;
                return binary_search(arr, low, high, key);
            }
        };
        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
        var result = binary_search(arr, 0, 13, 10);
        alert(result); // 9 返回目标元素的索引值  

 

回到顶部

Web安全

 

您所领会到的Web攻击技术

(1)XSS(Cross-Site
Scripting,跨站脚本攻击):指通过存在安全漏洞的Web网站注册用户的浏览器内运维违规的HTML标签只怕JavaScript进行的一种攻击。
(2)SQL注入攻击
(3)CS哈弗F(Cross-Site Request
Forgeries,跨站点请求伪造):指攻击者通过设置好的牢笼,强制对已形成的求证用户进行非预期的个人音信或设定音讯等一些状态更新。

 

重临顶部

前者质量

 

怎么着优化图像、图像格式的差异?

 

浏览器是怎么样渲染页面的?

 

归来顶部

设计方式

 

对MVC、MVVM的理解

 

回到顶部

正则表达式

 

写二个function,清除字符串前后的空格。(包容全部浏览器)

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
    }
}

 

使用正则表达式验证邮箱格式

    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
    var email = "example@qq.com";
    console.log(reg.test(email));  // true  

职业规划

 

对前者工程师这几个职位你是什么了解的?

a. 前端是最贴近用户的程序员,前端的能力就是能让成品从 88分进化到 100
分,甚至更好

b. 参与项目,火速高品质落成完毕效益图,精确到1px;

c. 与社团成员,UI设计,产品老板的关系;

d. 做好的页面结构,页面重构和用户体验;

e. 处理hack,包容、写出精彩的代码格式;

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

相关文章

网站地图xml地图