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

读书目录

  • HTML/CSS部分
  • JavaScript部分
  • HTTP
  • 算法相关
  • Web安全
  • 前端性能
  • 设计模式
  • 正则表达式
  • 职业规划

以下是采一些面试中不时会面遇上的藏给试题和和谐面试过程被生出有非缓解之问题,通过对文化之整治和更的下结论,重新巩固自己之前端基础知识,如有错误或再好之答案,欢迎指正,水平有限,望各位不吝指教。:)

 

 

回来顶部

HTML/CSS部分

 

1、什么是盒子模型?

当网页中,一个要素占有空中的深浅由几独组成部分组成,其中囊括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的异地距(margin)四单有。这四只有占用的上空中,有的有足展示相应的内容,而部分有只用来分隔相邻之区域要区域。4单有共同组成了css中元素的盒模型。

 

2、行内元素来什么?块级元素来哪? 空(void)元素来那些?

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

 

3、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;
    } 

 

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

href
是依赖于网络资源所在位置,建立及时因素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指于外部资源的职,指向的内容以会见放到至文档中即签所在位置;在呼吁src资源时见面以那个对的资源下载并行使及文档内,例如js脚本,img图片以及frame等要素。当浏览器解析到该因素时,会搁浅其他资源的下载和处理,直到将欠资源加载、编译、执行了,图片与框架等元素呢如此,类似于以所依赖为资源嵌入当前签内。这吗是怎拿js脚本放在脚而无是脑袋。

 

5、什么是CSS Hack?

貌似的话是本着不同的浏览器写不同之CSS,就是 CSS Hack。
IE浏览器Hack一般以分为三栽,条件Hack、属性级Hack、选择符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 */

 

6、简述同步跟异步的区分

合是死模式,异步是非阻塞模式。
旅就是靠一个过程在实施某请求的时光,若该要需要一段时间才会返信息,那么这进程将见面一直等待下,直到收到返回信息才继续执行下去;
异步是依赖进程不欲直接当下,而是继续执行下面的操作,不管其他进程的状态。当起消息返回时系统会通知进程展开拍卖,这样好增强执行之效率。

 

7、px和em的区别

px和em都是长单位,区别是,px的价是定点的,指定是小就是是聊,计算比便于。em得值不是一定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整之浏览器都入:
1em=16px。那么12px=0.75em, 10px=0.625em

 

8、什么吃优雅降级和循序渐进增强?

慢慢进增强 progressive enhancement:
本着小版本浏览器进行构建页面,保证最好核心的功效,然后重新指向高档浏览器进行功能、交互等改善与长功能上更好之用户体验。

大雅降级 graceful degradation:
相同开始就是构建完整的效益,然后又对小版本浏览器进行兼容。

区别:

a. 优雅降级是于繁杂的现状开始,并意欲减少用户体验的供

b.
渐进增强则是起一个很基础的,能够起作用的版本开始,并不断扩大,以适应未来环境的要

c.
降级(功能衰减)意味着向回看;而逐年进增强则表示朝前羁押,同时保证其基础处于安全地区

 

9、浏览器的基本分别是呀?

IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:以前是presto内核,Opera现就改用Google Chrome的Blink内核
Chrome:Blink(基于webkit,Google与Opera Software共同开发)

 

回来顶部

JavaScript部分

 

何以添加、移除、移动、复制、创建及找节点?

1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个实际的因素
createTextNode() //创建一个文本节点

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

3)查找
getElementsByTagName() //通过标签号
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性

 

兑现一个函数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用于地方存储一个会话(session)中之数码,这些多少只有当和一个对话中之页面才能够访问并且当会讲话了晚数也跟着销毁。因此sessionStorage不是同一种植持久化的地面存储,仅仅是碰头讲话级别的囤积。而localStorage用于持久化的本土存储,除非主动删除数据,否则数据是永恒不见面晚点的。

web storage和cookie的区别

Web
Storage的定义以及cookie相似,区别是她是为更老容量存储设计之。Cookie的大大小小是受限的,并且每次你请一个初的页面的时刻Cookie都见面为发送过去,这样平空浪费了牵动富,另外cookie还待指定作用域,不可以跨域调用。
除开,Web
Storage拥有setItem,getItem,removeItem,clear等办法,不像cookie需要前端开发者自己封装setCookie,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事务是怎么样的一个经过?

主导流程:

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)CSRF(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. 前端是绝贴近用户的程序员,前端的能力就是是会吃产品于 90区划进化到 100
分,甚至又好

b. 与型,快速高质量完成实现效益图,精确到1px;

c. 同团队成员,UI设计,产品经理的联络;

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

e. 处理hack,兼容、写起美丽的代码格式;

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

相关文章

网站地图xml地图