1. 最简单的一道题

    ‘11’ 2 //22
    ‘a8’
    3 //NaN
    “88’”*2 //NaN
    var a = 2, b = 3;
    var c = a+++b; // c = 5
    var c = a+++(++b); //c=7, a=3, b=3

  1. 一道this的问题
    var num = 10;
    var obj = {

    num:8,
    inner: {
        num: 6,
        print: function () {
            console.log("num: "+num+" , this.num: "+this.num);
        }
    }
    

    }
    num = 888;
    obj.inner.print(); //num: 888 , this.num: 6
    var fn = obj.inner.print;
    fn(); //num: 888 , this.num: 888, this: Window
    (obj.inner.print)(); //num: 888 , this.num: 6
    (obj.inner.print = obj.inner.print)(); //num: 888 , this.num: 888 , this: Window

  2. var和function的预解析问题,以及变量和function的先后顺序的问题
    // 以下代码执行输出结果是什么
    function b () {

    console.log(a);
    var a = 10;
    function a() {};
    a = 100;
    console.log(a);
    

    }
    b();

    function c () {

    console.log(a);
    function a() {};
    var a = 10;
    a = 100;
    console.log(a);
    

    }
    c();

    (function d (num) {

    console.log(num);
    var num = 10;
    

    }(100))

    (function e (num) {

    console.log(num);
    var num = 10;
    function num () {};
    

    }(100))

    (function f (num) {

    function num () {};
    console.log(num);
    var num =10
    console.log(num);
    

    }(100))

    //仍然是预解析(在与解析过程中还要考虑一下当前变量的作用于)
    function m () {

    console.log(a1); // underfined
    console.log(a2); // underfined
    console.log(b1); // underfined
    console.log(b2); // underfined
    if(false) {
        function b1 (){};
        var a1 = 10;
    }
    if(true) {
        function b2 (){};
        var a2 = 10;
    }
    console.log(a1); // underfined
    console.log(a2); // 10
    console.log(b1); // underfined
    console.log(b2); // function
    

    }
    m();

    function n() {

    if(2>1) {
        arr = 10;
        brr = 10;
        let arr;
        var brr;
        console.log(arr);
        console.log(brr);
    }
    

    }
    n(); // ReferenceError

//ƒ a() {}
//10:39:10.654 VM1688:7 100
//10:39:10.654 VM1688:12 ƒ a() {}
//10:39:10.655 VM1688:16 100
//10:39:10.655 VM1688:21 100
//10:39:10.655 VM1688:26 ƒ num() {}
//Uncaught TypeError: (intermediate value)(intermediate value)(…) is not a function

此阶段浏览器只是对var、function、函数形参进行一个解析的准备过程。而且在这个“预解析”过程中,有一个预解析先后顺序,即函数的形参 -> function -> var。而且重名时预留函数、后来者覆盖前者。预解析结果形参如果有值则解析到值,没有则为underfined,函数则解析到整个函数体,变量都为underfined;这道题目中没有参数出现,所以先不讨论。所以这道题在“预解析”时,函数声明权重优先会被提升

  1. 函数节流是什么,有什么优点(之前没有了解过这个概念,懵逼了)
    函数节流的目的
    从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的。例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起,有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作,其高频率的更改可能会让浏览器崩溃。又例如,我们常见的一个搜索的功能,我们一般是绑定keyup事件,每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容搜索一次而已。为了解决这些问题,就可以使用定时器对函数进行节流。

函数节流的原理
某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

  1. dom事件委托什么原理,有什么优缺点
    事件委托原理:事件冒泡机制
    优点
    1.可以大量节省内存占用,减少事件注册。比如ul上代理所有li的click事件就很不错。
    2.可以实现当新增子对象时,无需再对其进行事件绑定,对于动态内容部分尤为合适

缺点
事件代理的常用应用应该仅限于上述需求,如果把所有事件都用事件代理,可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

  1. http的cache机制,以及200状态下怎么实现 from cache(表示接触最多的就是304的from cache)(用于优化,没有接触过,需要理解)
    含义
    定义:浏览器缓存(Browser Caching)是为了加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。

作用
cache的作用:
1、减少延迟,让你的网站更快,提高用户体验。
2、避免网络拥塞,减少请求量,减少输出带宽。

实现手段
Cache-Control中的max-age是实现内容cache的主要手段,共有3种常用策略:max-age和Last-Modified(If-Modified-Since)的组合、仅max-age、max-age和ETag的组合。

对于强制缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行比较缓存策略。
对于比较缓存,将缓存信息中的Etag和Last-Modified通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存。

  1. 一个原型链继承的问题
    // 有一个构造函数A,写一个函数B,继承A
    function A (num) {

    this.titileName = num;
    

    }
    A.prototype = {

    fn1: function () {},
    fn2: function () {}
    

    }
    这个问题的关注点是B继承的A的静态属性,同时B的原型链中不存在A实例的titleName属性

  2. 什么是虚拟dom
    React为啥这么大?因为它实现了一个虚拟DOM(Virtual DOM)。虚拟DOM是干什么的?这就要从浏览器本身讲起

如我们所知,在浏览器渲染网页的过程中,加载到HTML文档后,会将文档解析并构建DOM树,然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树,然后将RenderObject树渲染成页面(当然中间可能会有一些优化,比如RenderLayer树)。这些过程都存在与渲染引擎之中,渲染引擎在浏览器中是于JavaScript引擎(JavaScriptCore也好V8也好)分离开的,但为了方便JS操作DOM结构,渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离,通信是需要付出代价的,因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。

而虚拟DOM干了什么?它直接用JavaScript实现了DOM树(大致上)。组件的HTML结构并不会直接生成DOM,而是映射生成虚拟的JavaScript DOM结构,React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更,再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在,计算性能会比较好,而且由于减少了实际DOM操作次数,性能会有较大提升

  1. js基础数据类型和引用类型分别是什么?这个前提条件下写一个getType,返回相应的类型
    1.基本数据类型(自身不可拆分的):Undefined、Null、Boolean、Number、String
    2.引用数据类型(对象):Object (Array,Date,RegExp,Function)
    ES6基本数据类型多了个symbol 据说这道题刷了百分之二十的人 感谢Abbyshen提出

function gettype(nm){
return Object.prototype.toString.call(nm).slice(8,-1);
}

  1. dom选择器优先级是什么,以及权重值计算(一道老问题了)
    1.行内样式 1000
    2.id 0100
    3.类选择器、伪类选择器、属性选择器[type=”text”] 0010
    4.标签选择器、伪元素选择器(::first-line) 0001
    5.通配符、子选择器、相邻选择器 0000

  2. react和vue比较来说有什么区别
    1 component层面,web component和virtual dom
    2 数据绑定(vue双向,react的单向)等好多
    3 计算属性 vue 有,提供方便;而 react 不行
    4 vue 可以 watch 一个数据项;而 react 不行
    5 vue 由于提供的 direct 特别是预置的 directive 因为场景场景开发更容易;react 没有
    6 生命周期函数名太长 directive

  3. 网页布局有哪几种,有什么区别
    静态、自适应、流式、响应式四种网页布局
    静态布局:意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置;
    自适应布局:就是说你看到的页面,里面元素的位置会变化而大小不会变化;
    流式布局:你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
    自适应布局:每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。

  4. 执行下面代码
    var a = {};
    var b = {key: ‘b’};
    var c = {key: ‘c’};
    var d = [3,5,6];
    a[b] = 123; // a[‘[object Object]’] = 123
    a[c] = 345; // a[‘[object Object]’] = 345
    a[d] = 333; // a[‘3,5,6’] = 333
    注:将object做为key时,会自动转为字符串[object Object],将数组做为key时,也会将数组转为字符串;
    换:可使用ES6中的Map替换,Map允许使用object做为key

  5. js垃圾回收机制知道哪些,v8引擎使用的哪一种
    js的两种回收机制
    1 标记清除(mark and sweep)
    2 引用计数(reference counting)

javascript与V8引擎
垃圾回收机制的好处和坏处

好处:大幅简化程序的内存管理代码,减轻程序猿负担,并且减少因为长时间运转而带来的内存泄露问题。

坏处:自动回收意味着程序猿无法掌控内存。ECMAScript中没有暴露垃圾回收的借口,我们无法强迫其进行垃圾回收,更加无法干预内存管理。

  1. 作用域什么时候生成的?
    页面加载–>创建window全局对象,并生成全局作用域–>然后生成执行上下文,预解析变量(变量提升),生成全局变量对象;
    $scope

  2. 理解web安全吗?都有哪几种,介绍以及如何预防
    1.XSS, 跨站脚本攻击(Cross Site Scripting), 也就是跨站脚本注入

攻击方法:

  1. 手动攻击:
    编写注入脚本,比如”/><!–等,
    手动测试目标网站上有的input, textarea等所有可能输入文本信息的区域
  2. 自动攻击
    利用工具扫描目标网站所有的网页并自动测试写好的注入脚本,比如:Burpsuite等
    防御方法:
  3. 将cookie等敏感信息设置为httponly,禁止Javascript通过document.cookie获得
  4. 对所有的输入做严格的校验尤其是在服务器端,过滤掉任何不合法的输入,比如手机号必须是数字,通常可以采用正则表达式
  5. 净化和过滤掉不必要的html标签,比如:iframe, alt,script 等
  6. 净化和过滤掉不必要的Javascript的事件标签,比如:onclick, onfocus等
  7. 转义单引号,双引号,尖括号等特殊字符,可以采用htmlencode编码 或者过滤掉这些特殊字符
  8. 设置浏览器的安全设置来防范典型的XSS注入
    2.SQL注入

攻击方法:
编写恶意字符串,比如‘ or 1=1–等,
手动测试目标网站上所有涉及数据库操作的地方
防御方法:

  1. 禁止目标网站利用动态拼接字符串的方式访问数据库
  2. 减少不必要的数据库抛出的错误信息
  3. 对数据库的操作赋予严格的权限控制
  4. 净化和过滤掉不必要的SQL保留字,比如:where, or, exec 等
  5. 转义单引号,上引号,尖括号等特殊字符,可以采用htmlencode编码 或者过滤掉这些特殊字符
    3.CSRF,(Cross-site request forgery),也就是跨站请求伪造

就是攻击者冒用用户的名义,向目标站点发送请求
防范方法:

  1. 在客户端进行cookie的hashing,并在服务端进行hash认证
  2. 提交请求是需要填写验证码
  3. 使用One-Time Tokens为不同的表单创建不同的伪随机值

  4. sessionStorage和localstorage能跨域拿到吗?比如我在www.baidu.com设置的值能在m.baidu.com能拿到吗?为什么
    localStorage会跟cookie一样受到跨域的限制,会被document.domain影响

cookie、sessionStorage、LocalStorage不能跨域,不能跨浏览器, cookie、LocalStorage跨域需要特殊处理。

  1. localstorage不能手动删除的时候,什么时候过期
    除非被清除,否则永久保存
    clear()可清除
    sessionStorage 仅在当前会话下有效,关闭页面或浏览器后被清除

  2. cookie可以设置什么域?可以设置.com吗
    可以通过设置domain来实现

6.封装一个函数,参数是定时器的时间,.then执行回调函数。
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
7.一行代码实现数组去重?
[…new Set([1,2,3,1,’a’,1,’a’])]

9.怎么判断两个对象相等
JSON.stringify(obj)==JSON.stringify(obj);//true

WebSocket
HTML5带来的新协议,通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll(即不中断连接一直等待数据),或者是ajax轮询的方式(每隔一段时间发送请求,建立连接,询问是否有新的数据)。这两种方式的缺点在于long poll的阻塞,以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调,在发送请求升级服务端的协议并收到确认信息后,服务端一有新的信息/数据就会主动推送给客户端,至于要一次HTTP握手便可以建立持久连接

跨域相关
只要协议、域名、端口有不同,则视为不同的域。(域名和域名对应的IP也是跨域)

1.CORS: Cross-Origin Resource Sharing
基于服务器支持的跨域,服务器设置Access-Control-Allow-Origin响应头,浏览器可允许跨域

2.设置domain
能从子域设到主域,如a.b.c.com—>b.c.com—>c.com
具体情况:在页面中用iframe打开了另一个页面(前提:两个页面主域是相同的)
利用frameElement.contentWindow.document.domain设置frame子页面的主域,document.domain设置主页面的主域,之后就能互相获取dom中的数据。
缺点是只能用于不同子域间的交互。

3.例如拥有src属性的img标签,每次改变src属性,都会发起http请求。
var img = new Image();
img.onload = function(){
//code here
};
img.onerror = function(){
//code here
};
img.src=”http://server.com/data?query=3";
缺点是只能使用GET请求,不能获取数据,一般用于提交统计信息什么的。
script、link、iframe只有在添加到DOM中才会发起请求

4.HTML5 postMessage
支持IE8+和主流浏览器,写法也简单..

//source: http://test.org:4000
//get the window object of target origin
var win = window.open(“http://target.com");
//or this, when a frame is used
var win = document.getElementById(“targetId”).contentWindow;
win.postMessage(“data here”, “http://target.com/rest");

//target: http://target.com/tiny
function handleMessage(event){
if(event.orgin!=”http://test.org:4000")
return;
var data = event.data;
//code here

//event.source is window.opener
event.source.postMessage(“response data here”, event.origin);
}
window.addEventListener(“message”, handleMessage, false);
5.window.name
即使在页面打开多层iframe后,每个iframe中window.name 属性值都是相同的,以此用作数据传输的工具。
但由于跨域的限制,是无法获取另一个frame中的window.name数据,所以要使用一个同域的代理(proxy.html):

  1. jsonp
    目前主流跨域方法
    调用其他域的脚本获取数据,前提是另一个域能知道回调函数名,这个可以通过请求发送给目标域。
    直接写jQuery封的jsonp

$.getJSON(“http://target.com/data?callback=callbackFunctionName", function(data){});
$.getJSON会把获取的responseText转为json,如果url中有callback参数,数据会以script标签形式获取。

  1. 浏览器中的BOM与DOM

BOM
BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。BOM对象

window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
document 对象,文档对象;
location 对象,浏览器当前URL信息;
navigator 对象,浏览器本身信息;
screen 对象,客户端屏幕信息;
history 对象,浏览器访问历史信息;

DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
即html标签、属性、文本对应的js对象。
HTML DOM 模型被结构化为对象树:
过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件