今日头条前端面试总结

这些问题是我在头条的一面面试中被面试官问到的，总结出来，但愿对你有用 ^_^

1.行标签都有哪些？特色？

img、span、a、sub、sup、em、i、b、strong

设置width、heigh不起做用

margin、padding垂直方向不起做用，水平方向上有效

2.img标签

由于上面说了行元素设置宽高是不起做用的，因此才会被问到这个，我就解释了为何它是行元素，由于在使用中，img元素中包含图片的话，它是按照一行排列的，下面的内容是我以后查阅获得的：

img元素是可替换内联元素，可替换就是浏览器根据元素的标签和属性，来决定元素的具体显示形式，img、input、textarea、select、object都是替换元素，替换元素通常有内在尺寸，因此具备width/height，能够设定，当不指定img的width和height的时候，就按照其内在尺寸显示，也就是图片被保存的时候的宽度和高度

参考这里

3.实现一个响应式的正方形

刚开始我答的是width、height设置为百分比，或者用em、rem这样的单位

而后面试官说的是，里面是有内容的，这样子呈现出正方形，哦，看来刚开始被本身想的拐跑了，而后我就想到了flex，flex中的项目的排列方式设置一下

4.跨域

跨域这个问题，jsonp、domain、webSocket、CORS（请求头Origin字段，服务器判断，返回三个Accept-control-*字段）

5.缓存了解吗？

跟缓存相关的HTTP请求头中有三个字段：Cache-control、Expires（指定具体过时日期）、Last-Modified（验证资源是否过时）。

关于优先级，Cache-Control比Expires能够控制的多一些， 并且Cache-Control会重写Expires的规则Cache-Control比Expires能够控制的多一些， 并且Cache-Control会重写Expires的规则，Cache-Control是关于浏览器缓存的最重要的设置，由于它覆盖其余设置，好比 Expires 和 Last-Modified

Mainfest能够缓存一个应用，pwa中有Mainfest和Service Worker能够实现缓存

参考这里

6.XSS是什么说一下？

跨站脚本攻击，这些可执行的脚本由攻击者提供，最终为用户浏览器加载，不一样于大多数攻击，有存储型和反射型，防护方式，编码，过滤，解码

7.CSRF了解吗？

跨站请求伪造（攻击者盗用你的身份，以你的身份发送恶意请求），一次CSRF攻击的步骤：

• 登陆受信任的网站A，并在本地生成cookie
• 在不登出A的状况下，访问危险网站B

防护的方法：

总的思想在客户端页面增长伪随机值

• Cookie Hashing 全部的表单都包含一个伪随机值
• 验证码
• 不一样的表单包含一个不一样的伪随机值

8.一个列表，假设有100000个数据，这个该怎么办？

刚开始想到的就是分页的原理，就是每次服务器端返回必定数目的数据，而后面试官说假如到了100页，客户端要缓存这么多数据吗？这个数据多的话，浏览器确定是吃不消的，而后我就说了这样的话，能够在显示某一屏的时候，缓存下一屏，这样体验好一点

9.倒计时怎么作？

利用Date对象

<div>
        <span id="day"></span>天
        <span id="hour"></span>时
        <span id="minutes"></span>分
        <span id="second"></span>秒
    </div>

setInterval(function() {
        timer();
    }, 1000);

    function timer() {
        var time = (new Date(2017, 8, 24, 14, 46, 0)) - (new Date());

        var day = parseInt(time / 1000 / 60 / 60 / 24, 10);
        var hour = parseInt(time/ 1000/ 60/ 60 % 24, 10);
        var min = parseInt(time / 1000 /60 % 60, 10);
        var second = parseInt((time / 1000) % 60, 10);

        document.getElementById('day').innerHTML = day;
        document.getElementById('hour').innerHTML = hour;
        document.getElementById('minutes').innerHTML = min;
        document.getElementById('second').innerHTML = second;
    }

其中，由于setInterval函数也是存在着延迟的，因此就须要矫正时间，关于矫正时间，我当时主要从客户端出发，可是后面想到能够利用与服务器沟通，得到时间

10.说说Vue框架，对于对象引用的状况呢？

说了双向绑定、vue-router、vue-resource，关于对象引用的状况说了数组的两种状况下的处理（设定值和改变长度）

11.算法题，对于一个数组，纯数字，求和等于m

当时在回答这道题的时候，可能表述的不够清楚，后面本身也从新作了思考，也出了它的代码

#include<stdio.h>
#include<stdlib.h>

#define N 1000
int a[N];
int c = 0;
int n;
int x[N] = {0}; 
int sum = 0;
int rest = 0;

int traceBack(int i) {
    if(sum == c) {
        return 1;
    }
    if(i > n) {
        return 0;
    } 

    rest -= a[i];
    if(sum + a[i] <= c) {
        x[i] = 1;
        sum += a[i];
        if(traceBack(i+1)) {
            return 1;
        }
        sum -= a[i];
    }

    if(sum + rest >= c) {
        x[i] = 0;
        if(traceBack(i + 1)) {
            return 1;
        }
    }

    rest += a[i];
    return 0;   
}

void main(void) {
    scanf("%d%d", &n, &c);
    int i;
    for(i = 0; i < n; i++) {
        scanf("%d", &a[i]);
        rest += a[i];
    }

    if(traceBack(0)) {
        for(i = 0; i < n; i++) {
            if(x[i]) {
                printf("%d ", a[i]);    
            }
        }
    }
}