Web前端21届面经_个人汇总

CSS

CSS 3有什么新特征？

• 过渡——transition

• 动画——animation

• 形变——transform

• 滤镜——filter

• 渐变

• 阴影——box-shadow

• 图片边框——border-image

• 背景——background-clip

• 文字

  • 多行省略

• 弹性布局

CSS有哪几种选择器

• 标签
• 类名
• id
• 属性
• 伪类
• 伪元素

如何实现垂直居中

• line-height 等于 height
• top50% + translateY(-50%)
• flex+align-items:center

JS

数组的几种方法

isArray()

push()、pop()、shift()、unshift()

splice()、slice()

reverse、sort

join

call与apply的区别

call接收数据列表

apply接收可迭代变量

防抖、节流

防抖

function debounce(fn,interval){
    var timer = null;
    return function(){
        var _this = this,
            args = arguments;
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(function(){
            fn.apply(_this,args)
        },interval)
    }
}

节流

function throttle(fn,interval){
    var timer = null;
    return function(){
        var _this = this,
            args = arguments;
        if(timer) { return; }
        timer = setTimeout(function(){
            fn.apply(_this,args)
            timer = null;
        },interval)
    }
}

闭包

函数中返回的函数叫闭包，使外部函数可以访问内部函数的私有变量

function func(){
    var a = 1;
    return function(){
        console.log(a)
    }
}
var logA = func();
logA();// 1

应用

• 柯里化
• 函数作用域绑定

HTTP、浏览器

浏览器输入URL到显示页面经历了什么

DNS解析域名得到IP地址

发送HTTP请求

建立TCP链接、三次握手

服务器响应返回数据包

断开TCP链接、四次挥手

浏览器解析数据。

生成DOM树、生成CSSOM渲染树，合成俩树渲染页面

回流、重绘

前端性能优化

GET与POST的区别

get请求在url中携带数据，数据会被保存在URL中，数据量小2k，一般用于获取服务器提供的数据

post请求在请求体中携带数据，数据量大（理论上无限），用于修改数据并上传
并且post会产生两个tcp数据包，将请求头（header）发送过去后，得到100 continue再发送请求体

什么叫跨域，怎么解决

跨域问题

同源指的是：协议、域名、端口皆相同的请求

Ajax同源安全策略，不能跨域请求

解决办法：

1. JSONP
2. CORS
3. 代理
4. iframe+hash
   1. 主页面给iframe的src设置hash传参，并修改窗口大小
   2. iframe监听窗口大小，得到hash，然后请求并设置

XSS攻击

Cookie、Session、Storage三者区别

cookie存储在浏览器上在HTTP头中传输

HTTP强缓存、协商缓存

简书HTTP缓存

强缓存

expires

http/1.0 控制浏览器缓存时间的字段，其值为服务器返回该请求结果缓存的到期时间，如果客户端请求时的时间小于这个值，则直接返回缓存

Cache-Control

http/1.1 控制浏览器缓存的规则

• public：允许代理服务器与客户端缓存
• (默认值)private：只允许客户端缓存
• no-cache：客户端缓存内容，通过协商缓存
• no-store：不缓存，既不强制缓存也不协商缓存
• max-age=xxx缓存内容将在xxx秒后失效

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

协商缓存

编程题

实现一个方法，返回一个随机的16进制颜色

/**
 * 随机16进制颜色
 * @returns {string} 16进制颜色码
 */
function getRandomColor() {
    var str = "0123456789abcdef";
    var res = "#";
    for (var i = 0; i < 6; i++) {
        res += str.charAt((Math.random() * str.length) | 0);
    }
    return res;
}