蓝裙子的百合魂

12 天前

腾讯课堂IMWeb前端求职训练营-Day02

本文作者:IMWeb 蓝裙子的百合魂 原文出处:IMWeb社区 未经同意,禁止转载

系列目录

腾讯课堂IMWeb前端求职训练营-Day01

腾讯课堂IMWeb前端求职训练营-Day02

腾讯课堂IMWeb前端求职训练营-Day03

腾讯课堂IMWeb前端求职训练营-Day04

腾讯课堂IMWeb前端求职训练营-Day05

腾讯课堂IMWeb前端求职训练营-Day06

一、经典面试题

5. 一次完整的HTTP事务是怎样的一个过程?

一个页面从输入url到页面加载显示完成的过程,大致分为以下几步:

1) 浏览器地址栏输入url;

2)浏览器会先查看浏览器缓存--系统缓存--路由缓存,如有存在缓存,就直接显示。如果没有,接着第三步;

3)DNS解析、查找该域名对应的IP地址、重定向(301)、发出第二个GET请求;

4)进行HTTP协议会话;

5)客户端发送报头(请求报头);

6)服务器回馈报头(响应报头);

7)html文档开始下载;

8)文档树建立,根据标记请求所需指定MIME类型的文件;

9)文件显示。

浏览器这边做的工作大致分为以下几步:

  • 加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML, JS, CSS, Image等)。
  • 解析:对加载到的资源(HTML, JS, CSS, Image等)进行语法解析,建立响应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等)。

6. 你所了解到的Web攻击技术?

分为两类:

1)利用Web服务器的漏洞进行攻击,如CGI缓冲区溢出,目录遍历漏洞利用等攻击;

2)利用网页自身的安全漏洞进行攻击,如SQL注入,跨站脚本攻击等。

7. Ajax是什么? Ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

1)Ajax是什么?

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript和 XML),是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

2)Ajax的交互模型:

  • 用户发出异步请求;
  • 创建 XMLHttpRequest 对象;
  • 告诉 XMLHttpRequest 对象哪个函数会处理XMLHttpRequest 对象状态的改变,为此要把对象的onReadyStateChange 属性设置 为响应该事件的 JavaScript函数的引用;
  • 创建请求,用 open 方法指定是 get 还是 post ,是否异步, url 地址;
  • 发送请求, send 方法;
  • 接收结果并分析;
  • 实现刷新;

3)同步和异步的区别:

  • 同步:脚本会停留并等待服务器发送回复然后再继续;
  • 异步:脚本允许页面继续其进程并处理可能的回复;

AJAX使用的是异步,传统的Web是使用的同步。 同步更新是需要对整个页面进行更新,并且以新页面的形式显示出来。因为服务器每次都会返回一个新的页面,所以传统的web应用有可能很慢而且用户交互不友好。

4)解决跨域:

  • CORS,跨域资源共享,定义了必须在访问跨域资源时,浏览览器与服务器该如何沟通,基本思想是,使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是否成功。注意,请求和响应都不包含cookie信息。IE8通过XDomainRequest对象支持CORS,其它浏览器通过XHR对象原生支持CORS。
  • 图像Ping,多用于动态创建图像。该方式与服务器进行简单、单向的跨域通信。 它有两个主要缺点,一是只能发送GET请求,二是无法访问服务器的响应文本。
  • JSONP,填充式JSON,应用JSON的一种新方法。它是被包含在函数调用中的JSON,例如,callback({“name”:“abc”}); JSONP由两部分组成,毁掉函数和数据。毁掉函数是当响应到来时应该在页面中调用的函数。数据时传入毁掉函数中的JSON数据。
  • Comet,是一种服务器向页面推送数据的技术。两种方式可实现,长轮询和流。
  • SSE,服务器发送事件。SSE API用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据。
  • Web Sockets API

8.什么叫优雅降级和渐进增强?

"都关注于同一网站在不同设备里不同浏览器下的表现程度。"

"优雅降级":首先完整地实现整个网站,包括其中的功能和效果. 然后再为那些无法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验却不至于完全失效;

"渐进增强":从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及完整内容, 然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能,当浏览器升级时, 它们会自动呈现并发挥作用.

二、编程题

4. 末尾添加元素

题目:在数组 arr 末尾添加元素 item。不要直接修改数组 arr,结果返回新的数组。

/* 常规方法 */
function append(arr, item) {
    var newArr = [];
    for(var i = 0, len = arr.length; i < len; i++){
        newArr.push(arr[i]);
    }
    newArr.push(item);
    return newArr;
}

/* slice 方法*/
function append(arr, item) {
    var newArr = arr.slice(0);    // slice(start, end(可选)); 返回部分数组,不修改原数组。
    newArr.push(item);
    return newArr;
}

/* concat 方法*/
function append(arr, item) {
    return arr.concat(item);     // 数组合并,不改变原数组。
}

5. 删除数组的第一个元素

题目:删除数组 arr 第一个元素。不要直接修改数组 arr,结果返回新的数组。

function curtail(arr) {
    var newArr = arr.slice(0);
    newArr.shift();         // unshift:头部添加;shift:头部删除。
    return newArr;
}

6. 根据idx和item添加元素

题目:在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr,结果返回新的数组。

function insert(arr, item, index) {
    var newArr = arr.slice(0);
    newArr.splice(index, 0, item);    
    // splice(idx, num, item);idx:要删除的起始位置;num(可选):要删除的个数;idx(可选):要添加的项;返回被删除的元素;修改原数组。
    return newArr;
}

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。