青葡萄科技笔试

1、加密算法

DES、AES、RSA、Base64、MD5、SHA1

2、IE内核

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

 

Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

 

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

3、

var a = 5;

setTimeout(function(){documment.write(a);a = 532;},0);

a = 66;

结果为66。

4、HTML5的新特性

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。

<canvas> 新元素；
新多媒体元素:<audio>、<video>、<source>、<embed>、<track>；
新表单元素：<datalist><keygen><output>
新的语义和结构元素：<article><aside><bdi><command><details><dialog><summary><figure><figcaption><figure><footer><header><mark><meter><nav><progress><ruby><rt><rp><section><time><wbr>。

5、判断哪些为真？

null instanceof Object
false
typeof null
"object"                        //null是特殊的object对象，为空的；instanceof是实例，不存在的。
null == undefined
true
null === undefined
false
NaN == NaN
false

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。它返回值是一个字符串，该字符串说明运算数的类型。
typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined。

我们可以使用typeof来获取一个变量是否存在，如if(typeof a!="undefined"){alert("ok")}，而不要去使用if(a)因为如果a不存在（未声明）则会出错，对于Array,Null等特 殊对象使用typeof一律返回object，这正是typeof的局限性。

instanceof 用于判断一个变量是否某个对象的实例，如var a=new Array();alert(a instanceof Array);会返回true，同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类。

补充：

typeof(NaN): number
typeof(Number.MIN_VALUE): number
typeof(Infinity): number
typeof(window): object
typeof(Array()): object
typeof(function(){}): function
typeof(document): object
typeof(null): object
typeof(eval): function
typeof(Date): function
typeof(sss): undefined
typeof(undefined): undefined

6、智力题

7、parseInt() 函数可解析一个字符串，并返回一个整数。

string	必需。要被解析的字符串。
radix	可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

parseInt("10");            //返回 10
parseInt("19",10);        //返回 19 (10+9)
parseInt("11",2);        //返回 3 (2+1)
parseInt("17",8);        //返回 15 (8+7)
parseInt("1f",16);        //返回 31 (16+15)
parseInt("010");        //未定：返回 10 或 8

parseInt(3,10)
3
parseInt(3,2)
NaN
parseInt(3,0)
3

8、用浏览器打开一个网页时，浏览器会使用到哪些网络协议

应用别人的话：

应用层使用了HTTP协议进行超文本传输，对于服务器后台处理应该有telnet远程调用协议响应用户，DNS协议获取网络地址，即IP地址；打开网页，网页显示用到了表示层的HTML协议；
另外必然用到了传输层的TCP和网络层的IP协议；网络层ARP协议获取物理地址；ICMP协议控制信息的传递，还有很多吧，我就不知道了

HTTP，TCP，IP，DNS，ARP，ICMP必然有

或者

应用层：
http，telnet
运输层：
udp,tcp
网络层：
ip,arp,rarp,icmp,igmp
数据链路层：
ppp

9、

function foo(a){var a;return a;}
function bar(a){var a = 'bye';return a;}
undefined
foo('hello')
"hello"
bar('hello')
"bye"

10、

var person = function(){
var name = "base";
return{
getNmae:function(){return name;},
setName:function(newName){name = newName;}
}
}();
undefined
console.log(person.name)
undefined
console.log(person.getNmae())
base
person.setName("sam");
undefined
console.log(person.getNmae())
sam

1、

'6'+2
"62"
'6'-2
4

2、

var User = {count:5;getCount:function(){return this.count;}};
console.log(User.getCount());
var func = User.getCount;
console.log(func());

程序出错了

3、正则表达式

为什么使用正则表达式？

典型的搜索和替换操作要求您提供与预期的搜索结果匹配的确切文本。虽然这种技术对于对静态文本执行简单搜索和替换任务可能已经足够了，但它缺乏灵活性，若采用这种方法搜索动态文本，即使不是不可能，至少也会变得很困难。

通过使用正则表达式，可以：

• 测试字符串内的模式。
  例如，可以测试输入字符串，以查看字符串内是否出现电话号码模式或信用卡号码模式。这称为数据验证。
• 替换文本。
  可以使用正则表达式来识别文档中的特定文本，完全删除该文本或者用其他文本替换它。
• 基于模式匹配从字符串中提取子字符串。
  可以查找文档内或输入域内特定的文本。

4、快速排序最好和最坏情况的时间复杂度

1、一个完整的HTTP事务的过程

1、域名解析

2、发起TCP的三次握手

3、建立TCP连接后发起http请求

4、服务器端响应http请求，浏览器得到html码

5、浏览器解析html代码，并请求html代码中的资源

6、浏览器对页面进行渲染并呈现给客户

2、IE与火狐的事件机制有什么区别？怎么样阻止事件冒泡？

3、纯CSS实现一个三角形

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .div {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 10px solid red;
        }
        .div1{
            width: 0;
            height: 0;
            border-top: 10px solid black;
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
        }
        .div2{
            width: 0;
            height: 0;
            border-left: 20px solid black;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent
        }
    </style>
</head>
<body>
    <div class="div"></div><br />
    <div class="div1"></div><br/>
    <div class="div2"></div>
</body>
</html>

4、前端的性能优化有哪些？

1.请减少HTTP请求，比如：合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。
2.请正确理解 Repaint 和 Reflow。比如：上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置
总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。　　
3.请减少对DOM的操作。比如：修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。
减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
注：在IE中:hover会降低响应速度。
4.使用JSON格式来进行数据交换。原因：JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
5.高效使用HTML标签和CSS样式
6.使用CDN加速（内容分发网络）
其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
7.将CSS和JS放到外部文件中引用，CSS放头，JS放尾
JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。
8.精简CSS和JS文件
9.压缩图片和使用图片Sprite技术
10.注意控制Cookie大小和污染

http://www.cnblogs.com/and/p/3390676.html

1、数组排序

2、通过点击li来弹出相应的innerHTML

    var myul = document.getElementsByTagName("ul")[0];  
    var list = myul.getElementsByTagName("li");  
  
    function foo(){  
        for(var i = 0, len = list.length; i < len; i++){  
            list[i].onclick = function(){  
                alert(i + "----" + this.innerHTML);  
            }  
        }  
    }  
    foo();  

3、计算字符串中单词出现的频率，通过JSON格式返回

 

var str_1 = 'you i he am me you and he'
function abc(str){
var json = {};
var str2 = str1.split(" ");
for(var i;i<str2.length;i++)
{
if(json[str2[i]]==-1){json[str2[i]]=1;}
else {json[str2[i]]++;}
}
return json;
}

 

 

3、输入一个整形数组，数组里有正数也有负数，数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和，求所有子数组的和的最大值。

例如输入一个数组[1,-2,3,10,-4,7,2,-5]，其最大的子数组为3,10，-4,7,2，因此输出为该子数组的和为18，把算法思想描述出来并实现该算法。

https://my.oschina.net/wanglihui/blog/700443

https://segmentfault.com/q/1010000006030894

'use strict';

//最大子数组问题
//随机获取一个数
function randNum() {
  var mid = -50;
  return parseInt(Math.random() * 100) + mid;
}
//随机获取一个数组
function getRandArr(length) {
  var arr = [];
  for(var i=0; i<length; i++) {
    arr.push(randNum());
  }
  return arr;
}

var arr = getRandArr(10);

//分三种情况分解问题,最大数组的下标 leftIdx, rightIdx只能在下面三种中:
// 1. leftIdx,rightIdx 都在 low...mid之间
// 2. leftIdx,rightIdx 都在 mid...high之间
// 3. 或者leftIdx 在low...mid间, rightIdx在 mid...high间

//我们对第三种情况分析
function getAcrossMidSubArray(arr, leftIdx, rightIdx) {
  if (leftIdx == rightIdx) {
    return [leftIdx, rightIdx, arr[leftIdx]];
  }

  var mid = parseInt((leftIdx + rightIdx) / 2);
  //求左侧最大数组值及下标
  var leftMaxSum = Number.NEGATIVE_INFINITY;
  var leftSum = 0;
  var maxArrLeftIdx = mid;
  for(var i=mid; i>= leftIdx; i--) {
    leftSum += arr[i];
    if (leftSum > leftMaxSum) {
      leftMaxSum = leftSum;
      maxArrLeftIdx = i;
    }
  }

  //求右侧最大数组值
  var rightMaxSum = Number.NEGATIVE_INFINITY;
  var rightSum = 0;
  var maxArrRightIdx = mid;
  for(var j=mid+1; j<= rightIdx; j++) {
    rightSum += arr[j];
    if (rightSum > rightMaxSum) {
      rightMaxSum = rightSum;
      maxArrRightIdx = j;
    }
  }
  return [maxArrLeftIdx, maxArrRightIdx, (leftMaxSum + rightMaxSum)];
}

//对于第一种情况,又可以拆分成同样的三种情况
//对于第二种情况,也可以拆分成同样的三种情况
//于是对于第一种和第二种情况只需要递归求解就好
function getMaxSubArray(arr, leftIdx, rightIdx) {
  if (leftIdx == rightIdx) {
    return [leftIdx, rightIdx, arr[leftIdx]];
  }

  var mid = parseInt((leftIdx + rightIdx) / 2);
  //求第一种情况最大值
  let leftMaxSum = getMaxSubArray(arr, leftIdx, mid);
  //求第二种情况最大值
  let rightMaxSum = getMaxSubArray(arr, mid+1, rightIdx);
  //求第三中情况最大值
  let acrossMaxSum = getAcrossMidSubArray(arr, leftIdx, rightIdx);

  if (leftMaxSum[2] > rightMaxSum[2] && leftMaxSum[2] > acrossMaxSum[2]) {
    return leftMaxSum;
  }

  if (rightMaxSum[2] > leftMaxSum[2] && rightMaxSum[2] > acrossMaxSum[2]) {
    return rightMaxSum;
  }
  return acrossMaxSum;
}

console.info(`原数组:`, arr);
let ret = getMaxSubArray(arr, 0, arr.length-1)
console.info(`最大子数组下标[${ret[0]},${ret[1]}]和是:${ret[2]}`);

//测试的某次输出是:
//原数组: [ -11, 34, 37, 30, -42, 4, 16, 47, 36, 19 ]
//最大子数组下标[1,9]和是:181