2019-03-28

一、请选择下面结果为true的表达式

null instanceof Object
null == undefined
NaN == NaN
parseInt("8",8) == 8
100 == "100"

二、实现一个通用的事件绑定函数，addEvent(dom,type,handler)

三、不使用全局变量，使用闭包写一个函数，实现返回从1逐渐增加的数值，比如第一次调用返回1，第二次返回2，第三次返回3...

四、实现一个对象拷贝函数extend(target,source,isDeep)

五、下面一段代码：

     var name = "Bill ";

     var aFamousPerson = {

              name:"Steve ",

               fiend:{

                        name:"Mark",

                        showMyName:function(){ alert(this.name)}

               }       

     }

     1) 调用aFamousPerson.friend.showMyName(),显示结果是哪个？

     2) 如果加一段代码，show = aFamousPerson.friend.showMyName,然后再执行show(),显    示的结果是哪个？

     3) 如果希望依次显示，Bill、Steve、Mark,代码该如何写？

六、实现一个trim函数，用于去除字符串左右的空格，可以如下调用：

     "  ab cd e  ".trim; //结果为"ab cd e"

七、有一段html结构如下：

     

               内容 1

               ....

               内容 1

     

     其中li节点数量很大且可能动态变化。

     实现一个功能，当点击这些节点的时候，弹出li节点的坐标信息及节点内容。

八、谈谈你所知道的跨域解决方案（至少3种）。

九、http协议有哪些请求类型？有哪些常见的状态码？什么是长连接？如果要将页面缓存一天，服务器该如何设置？

十、有一个url为 htttp://www.example.com/getUserInfo?userId=123&valideCode=abcd的页面，

会展示用户的一些私密信息（比如薪资），请考虑如何解决以下安全问题：

     1）防止SQL注入攻击。

     2）防止XSS攻击。

     3）防止CSRF攻击。

十一、一个页面从输入url到页面加载完成，整个过程中发生了什么？请谈谈你的理解（过程尽可能详细）。

十二、如果一个页面被投诉说加载很慢，需要你来给出方案，你有哪些措施？（至少10条）

十三、HTML5规范已于2014年10日定稿，列出你所知道的HTML5新技术（10条）

十四、有10万cdkey号码（数字、字母组成的序列号，每个序列号可以在网站上兑换一定的物品，比如购物券等）。给出发放cdkey的一个方案。

     1）用户在网站上登录后领取，每人限领一张。

     2）在用户量并发比较大的时候，不允许出现一个cdkey发放给多人的情况。

     3）给出价格设计并解释主要步骤流程。

参考答案

一、2，5
二、
function addEvent(dom,type,handler){
if (dom.addEventListener) {
dom.addEventListener(type,handler,false);
}else if (dom.attachEvent) {
//如果为IE浏览器，添加事件采用 attachEvent
dom.attachEvent(‘on’+type,handler);
}else{
dom[‘on’+type] = handler;
}
}
三、
function Foo() {
let i = 1;
return function() {
console.log(i++);
}
}

var f1 = Foo();
f1();
f1();

首先，这是一个js中的闭包，一个函数有权操作另一个函数的变量和作用域，这里，匿名函数有权访问foo函数的i变量，其次，需要知道foo与foo()的区别，foo指的是整个foo函数的js代码，foo（）指的是return的语句。var f1=foo()，那么f1实际上的值为匿名函数代码段，然后f1()。
五：
1.Mark, 2.Bill, 3.
show = function(){
console.log(name);
console.log(aFamousPerson.name);
aFamousPerson.friend.showMyName()
}
show();
六：
Object.prototype.trim = function(){
return this.replace(/(^\s)|(\s$)/g,”);//去除两端空格

// return this.replace(/\s+/g,””); //去除所有空格
// return this.replace( /^\s/, ”);//去除左空格
// return this.replace(/(\s$)/g, “”);//去除右空格

}
七：
var ul = document.getElementById(‘item’);
ul.onclick = function (e) {
var e = e || window.event;
var target = e.target || e.srcElement;
alert(e.clientX+’，’+e.clientY);
alert(target.textContent);
}
四、此道题答案来自网络：
/*
- @param {Object} target 目标对象。
- @param {Object} source 源对象。
- @param {boolean} deep 是否复制(继承)对象中的对象。
- @returns {Object} 返回继承了source对象属性的新对象。
  /
  function extend(target, /optional/ source, /optional*/ deep) {
  target = target || {};
  var sType = typeof source,
  i = 1,
  options;
  if (sType === ‘undefined’ || sType === ‘boolean’) {
  deep = sType === ‘boolean’ ? source : false;
  source = target;
  target = this;
  }
  if (typeof source !== ‘object’ && Object.prototype.toString.call(source) !== ‘[object Function]’)
  source = {};
  while (i <= 2) {
  options = i === 1 ? target : source;
  if (options != null) {
  for (var name in options) {
  var src = target[name],
  copy = options[name];
  if (target === copy)
  continue;
  if (deep && copy && typeof copy === 'object' && !copy.nodeType)
  target[name] = this.extend(src ||
  (copy.length != null ? [] : {}), copy, deep);
  else if (copy !== undefined)
  target[name] = copy;
  }
  }
  i++;
  }
  return target;
  };
八：跨域解决方案
1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
参考：http://www.coolivan.com/463
九、
1.http协议有哪些请求类型:
①OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送’*’的请求来测试服务器的功能性。
②HEAD：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。
③GET：向特定的资源发出请求。
④POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。
⑤PUT：向指定资源位置上传其最新内容。
⑥DELETE：请求服务器删除Request-URI所标识的资源。
⑦TRACE：回显服务器收到的请求，主要用于测试或诊断。
⑧CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

2.有哪些常见的状态码:
① 客户方错误 1xx;
② 成功 2xx;
③ 重定向 3xx;
④ 客户方错误 4xx;
⑤ 服务器错误 5xx

3.长连接：
HTTP协议采用“请求-应答”模式，当使用普通模式，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；
当使用长连接（Keep-Alive）又称持久连接时，使客户端到服务器的连接持续有效，当出现对服务器后继请求时，长连接功能避免了建立或者重新建立连接。

4. 页面缓存一天，服务器的设置：
①Http Header，Expires: 设置为后一天
②把请求的html缓存入redis，ttl设置为86400s
十：
1）防止SQL注入攻击。
①检查变量数据类型和格式
②过滤特殊符号
③绑定变量，使用预编译语句

2）防止XSS攻击。
①token验证
②referer来源
③隐藏令牌

3）防止CSRF攻击。
①cookie 设置http only
②代码转义
③过滤html
十一、完整的HTTP过程
a. 域名解析

b. 发起TCP的3次握手

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

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

e. 浏览器解析html代码，并请求html代码中的资源
以下为页面解析渲染
F.构建DOM树
G.DOM树与CSS样式进行附着构造呈现树
H.布局
I.绘制
十二、
1. 资源合并压缩，减少HTTP请求
2. 使用内容发布网络，CDN加速
3. DNS预解析，减少DNS查找
4. 合理利用缓存，添加Max-Age、expires头、配置ETag
5. 将CSS样式表放在顶部，将javascript脚本放在底部
6. 避免使用CSS表达式，避免使用@import
7. 优化精简javascript（DocumentFragments，防抖与节流，事件委托，Web Storage缓存， Web Workers）
8. 非核心代码异步加载, 延迟加载依赖
9. 使用外部javascript和CSS缓存
10. 避免重定向
11. 服务器开启Gzip压缩
12. nginx反向代理
十三、
语义：能够让你更恰当地描述你的内容是什么。
连通性：能够让你和服务器之间通过创新的新技术方法进行通信（web sockets等）。
离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行（离线资源、在线和离线事件、DOM存储、IndexDB、自web应用程序中使用文件[FileReader]）。
多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择(canvas、webGL)。
性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用（WebWorkers、XMLHttpRequest2、HistoryAPI、拖放、requestAnimationFrame、全屏API、指针锁定API、在线和离线事件）。
设备访问 Device Access：能够处理各种输入和输出设备（触控事件touch、使用地理位置定位、检测设备方向）。

classList
autofocus
email Inputs
Local Storage
fullScreen
visibilitychange
prefetch
IndexDB
video/audio
canvas/webGL
WebWorkers
HistoryAPI
File API
WebSockets
insertAdjacentHTML()
outerHTML
dataset
…

2019-03-28

你可能感兴趣的:(2019-03-28)