klaus

klaus 查看完整档案

深圳编辑昆明理工大学  |  计算机科学与技术 编辑klaus  |  前端 编辑 blog.csdn.net/qq_40890601 编辑
编辑

努力成为一个合格的前端er

个人动态

klaus 收藏了文章 · 10月20日

前端常见跨域解决方案(全)

什么是跨域?

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。

广义的跨域:

1.) 资源跳转: A链接、重定向、表单提交
2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等

其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。

什么是同源策略?
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略限制以下几种行为:

1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

常见跨域场景

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名,不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名,不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名,不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同,子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

跨域解决方案

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

一、 通过jsonp跨域

通常为了减轻web服务器的负载,我们把js、css,img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许,基于此原理,我们可以通过动态创建script,再请求一个带参网址实现跨域通信。

1.)原生实现:

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

服务端返回如下(返回时即执行全局函数):

handleCallback({"status": true, "user": "admin"})

2.)jquery ajax:

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

3.)vue.js:

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

后端node.js代码示例:

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

jsonp缺点:只能实现get一种请求。

二、 document.domain + iframe跨域

此方案仅限主域相同,子域不同的跨域应用场景。

实现原理:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。

1.)父窗口:(http://www.domain.com/a.html)

<iframe id="iframe" data-original="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

2.)子窗口:(http://child.domain.com/b.html)

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

三、 location.hash + iframe跨域

实现原理: a欲与b跨域相互通信,通过中间页c来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。

具体实现:A域:a.html -> B域:b.html -> A域:c.html,a与b不同域只能通过hash值单向通信,b与c也不同域也只能单向通信,但c与a同域,所以c可通过parent.parent访问a页面所有对象。

1.)a.html:(http://www.domain1.com/a.html)

<iframe id="iframe" data-original="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    
    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>

2.)b.html:(http://www.domain2.com/b.html)

<iframe id="iframe" data-original="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 监听a.html传来的hash值,再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>

3.)c.html:(http://www.domain1.com/c.html)

<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再通过操作同域a.html的js回调,将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

四、 window.name + iframe跨域

window.name属性的独特之处:name值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

1.)a.html:(http://www.domain1.com/a.html)

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');

    // 加载跨域页面
    iframe.src = url;

    // onload事件会触发2次,第1次加载跨域页,并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后,读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域页)成功后,切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});

2.)proxy.html:(http://www.domain1.com/proxy....
中间代理页,与a.html同域,内容为空即可。

3.)b.html:(http://www.domain2.com/b.html)

<script>
    window.name = 'This is domain2 data!';
</script>

总结:通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

五、 postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
a.) 页面和其打开的新窗口的数据传递
b.) 多窗口之间消息传递
c.) 页面与嵌套的iframe消息传递
d.) 上面三个场景的跨域数据传递

用法:postMessage(data,origin)方法接受两个参数
data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。
origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

1.)a.html:(http://www.domain1.com/a.html)

<iframe id="iframe" data-original="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>

2.)b.html:(http://www.domain2.com/b.html)

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

六、 跨域资源共享(CORS)

普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。

需注意的是:由于同源策略的限制,所读取的cookie为跨域请求接口所在域的cookie,而非当前页。如果想实现当前页cookie的写入,可参考下文:七、nginx反向代理中设置proxy_cookie_domain 和 八、NodeJs中间件代理中cookieDomainRewrite参数的设置。

目前,所有浏览器都支持该功能(IE8+:IE8/9需要使用XDomainRequest对象来支持CORS)),CORS也已经成为主流的跨域解决方案。

1、 前端设置:

1.)原生ajax

// 前端设置是否带cookie
xhr.withCredentials = true;

示例代码:

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

2.)jQuery ajax

$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息,但不会含cookie
    ...
});

3.)vue框架

a.) axios设置:

axios.defaults.withCredentials = true

b.) vue-resource设置:

Vue.http.options.credentials = true
2、 服务端设置:

若后端设置成功,前端浏览器控制台则不会出现跨域报错信息,反之,说明没设成功。

1.)Java后台:

/*
 * 导入包:import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义:HttpServletResponse response
 */

// 允许跨域访问的域名:若有端口需写全(协议+域名+端口),若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

// 允许前端带认证cookie:启用此项后,上面的域名不能为'*',必须指定具体的域名,否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 

// 提示OPTIONS预检时,后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

2.)Nodejs后台示例:

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var postData = '';

    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });

    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);

        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域(协议+域名+端口)
            /* 
             * 此处设置的cookie还是domain2的而非domain1,因为后端也不能跨域写cookie(nginx反向代理可以实现),
             * 但只要domain2中写入一次cookie认证,后面的跨域接口都能从domain2中获取cookie,从而实现所有的接口都能跨域访问
             */
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});

server.listen('8080');
console.log('Server is running at port 8080...');

七、 nginx代理跨域

1、 nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。

location / {
  add_header Access-Control-Allow-Origin *;
}
2、 nginx反向代理接口跨域

跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。

实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。

nginx具体配置:

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

1.) 前端代码示例:

var xhr = new XMLHttpRequest();

// 前端开关:浏览器是否读写cookie
xhr.withCredentials = true;

// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

2.) Nodejs后台示例:

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));

    // 向前台写cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取
    });

    res.write(JSON.stringify(params));
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

八、 Nodejs中间件代理跨域

node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。

1、 非vue框架的跨域(2次跨域)

利用node + express + http-proxy-middleware搭建一个proxy服务器。

1.)前端代码示例:

var xhr = new XMLHttpRequest();

// 前端开关:浏览器是否读写cookie
xhr.withCredentials = true;

// 访问http-proxy-middleware代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();

2.)中间件服务器:

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({
    // 代理跨域目标接口
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,

    // 修改响应头信息,实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },

    // 修改响应信息中的cookie域名
    cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改
}));

app.listen(3000);
console.log('Proxy server is listen at port 3000...');

3.)Nodejs后台同(六:nginx)

2、 vue框架的跨域(1次跨域)

利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下,由于vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域,无须设置headers跨域信息了。

webpack.config.js部分配置:

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改
        }],
        noInfo: true
    }
}

九、 WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。

1.)前端代码:

<div>user input:<input type="text"></div>
<script data-original="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });

    // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

2.)Nodejs socket后台:

var http = require('http');
var socket = require('socket.io');

// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello:' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});
查看原文

klaus 发布了文章 · 9月21日

Vue 知识点及答案

MVVM的理解

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式。 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上

如何实现一个自定义组件,不同组件之间如何通信的?

props/$emit
注:组件中的数据共有三种形式:data、props、computed
vue 组件间通信

nextTick

因为DOM渲染总是在队列任务完成之后才会执行,所以要在当前队列中查看下一个队列的数据可以使用nextTick
Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,因为created时还没有渲染DOM

生命周期

image.png

虚拟dom的原理
双向绑定的原理?数据劫持?

通过数据劫持结合发布者-订阅者的方式来实现,Vue是通过Object.defineProperty() 来实现,Object.defineProperty()可以控制一个对象属性的一些特有操作,比如读写权、是否可以枚举等。

Proxy 相比于 defineProperty 的优势
watch computed区别

computed

  • 计算属性computed,只有依赖数据发生改变时才会重新计算
  • 不支持异步,当computed内有异步操作时,无法监听数据的变化,
  • computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算的到的值;
  • 如果一个属性是其他属性计算而来的,那么使用computed

watch

  • 不支持缓存,数据变化会直接触发重新渲染
  • watch支持异步
vue-router(hash, HTML5 新增的 pushState
  • 单页应用,如何实现其路由功能---路由原理
  • vue-router如何做用户登录权限等
  • 你在项目中怎么实现路由的嵌套
vuex的理解
查看原文

赞 0 收藏 0 评论 0

klaus 发布了文章 · 9月21日

服务端与网络知识点

常见状态码
  • 1xx 通知
  • 2xx 成功
  • 3xx 重定向
  • 4xx 客户端错误
  • 5xx 服务端错误
400,401,403状态码分别代表什么
  • 400 bad request,请求报文存在语法错误
  • 401 unauthorized,表示发送的请求需要有通过 HTTP 认证的认证信息
  • 403 forbidden,表示对请求资源的访问被服务器拒绝
  • 404 not found,表示在服务器上没有找到请求的资源

HTTP状态码详细解说

浏览器缓存
cookie, session, token

彻底理解session,cookie和token

前端持久化的方式、区别
DNS是怎么解析的
CDN
计算机网络的相关协议
http/https/http2.0

http超文本传输协议,默认端口80,特点

  • 无连接,意思是限制每次连接只处理一个请求,服务器处理完客户的请求,并受到客户的应答后,即断开连接,采用这种方式可以节省传输时间
  • 媒体独立
  • 无状态协议。对事物处理没有记忆能力。
get post区别
  • 传输方式,get是通过地址栏URL传递,post是将参数放在HTTP请求体内
  • 传输数据大小,get 是同过URL传输,URL最大长度是2048个字符,post 没有限制
  • post 后退会重新提交。get 不会
  • get 请求只URL编码,post支持多种编码
  • get 请求可以被缓存,post 不能被缓存

post 相对于get 更安全,但传输速度比get慢。

ajax、 axios库

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。而AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
axios 是一个基于promis库HTTP库,可以用在浏览器和node.js 中。promise 解决了ajax 的回调地狱问题。

tcp三次握手,四次挥手流程
跨域
websocket
Http请求中的keep-alive
网络分层
即时通信,除了Ajax和websocket
模块化,commonJS,ES6,CMD,AMD
查看原文

赞 1 收藏 1 评论 0

klaus 发布了文章 · 9月18日

前端HTML/CSS/JS 知识点

HTML 5

简称H5,是最新的第五代HTML标准。

语义化

H5 新增的标签能够让你更恰当地描述你的内容是什么,新增的语义化标签有<section>,<artical>,<footer>等等。

input和textarea的区别

input 是单行文本框,不可以换行,
textarea 是多行文本框,无value 属性

用一个div模拟textarea的实现

.main{
    width: 400px;
    min-height: 50px;
    max-height: 100px;
    _height: 100px; //IE6
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
    outline: 0;
    border: 1px solid #a0b3d6;
    font-size: 12px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto; //超过最大高度就出现滚动条
    _overflow-y: visible;
}
<div contenteditable="true" class="main">
    .....此处省略.....
</div>

CSS

盒模型

所有HTML元素都可以被看作一个盒子,它包括:边距,边框,填充,和实际内容。
image.png

flex 布局

弹性布局,任何一个容器都可以使用flex 布局,Webkit 内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

css单位

单位有很多,举例:绝对长度和相对单位,绝对长度有px、cm等,相对单位rem,em,vh,vw 等等
菜鸟教程--CSS单位

css选择器

类选择器,id选择器,属性选择器,*选择器,标签选择器以及其他各种复杂选择器查看下面的链接。
菜鸟教程--所有选择器

层叠上下文

z-index 的理解

常见页面布局

浮动布局,定位布局,flex布局,grid布局,表格布局

响应式布局

@media 媒体查询
可以在css样式里直接写

@media 类型 and (条件1) and (条件二)
{

css样式

}

也可以使用@import 导入

@import url("css/moxie.css") all and (max-width:980px);

也可以在link里

<link rel="stylesheet" type="text/css" href="css/moxie.css" media="all and (max-width=980px)"/>

css预处理器,后处理器

预处理器:可以被转换为CSS文件,但是它们灵活性比CSS好许多
SassLESSStylus 是目前最主流的 CSS 预处理器。
CSS 后处理器 是对 CSS 进行处理,并最终生成 CSS 的 预处理器

css3新特性

太多了。
transition, animation, transform以及新选择器等等
之前记录的CSS3 新特性 :css3 新特性

display哪些取值

常见的 none,inline,inline-block,block以及更多

相邻的两个inline-block节点出现间隔

给父级盒子加上 font-size:0,然后给子元素加上相应的font-size 即可

meta viewport 移动端适配

viewport 是浏览器显示视图的区域,meta viewport标签可以让开发者控制显示页面内容的区域。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

画三角形

通过设置宽高为0,设置border相关属性就可以实现三角形
border-color: transparent transparent #000 transparent;

1像素边框问题

百度一下

JS

原型/原型链/构造函数/实例/继承

有几种方式可以实现继承

五种:
对象冒充,call()方法方式,apply() 方法方式,原型链方式,混合方式
参考:五种实现继承的方式

arguments对象

JavaScript 没有重载,使用arguments 对象可以模拟重载,通过数组下标的方式访问实参。
arguments.length为函数实参个数,arguments.callee引用函数自身

数据类型判断

typeof 操作符可以判断数据类型,它返回表示数据类型的字符串(返回结果只能包number,boolean,string,function,object,undefined,symbol)
toString.call(testObj)
instanceof
更多方法

作用域链、闭包、作用域

原生Ajax 写法

IE7 以上以及其他浏览器都支持XMLHttpRequest 对象
XHR的用法
open()启动一个请求以备发送,接受三个参数,请求类型,请求的URL和是否异步发送的布尔值。
xhr.open('get','example.php',false)
调用send() 方法,接收一个参数,即请求体要发送的数据,如果不需要发送数据就传入null
xhr.send(null)
由于这次的请求是同步的,接下来的代码会等请求完成之后才会执行,在收到响应后,响应的数据会填充xhr对象的属性,相关属性的简介如下:
responseText:作为相应主体被返回的文本;
responseXML:如果响应的内容类型是“text/xml”或“application/xml”,这个属性一般将保存包含着响应数据的XML DOM文档;
status:响应的HTTP状态;
statusText:HTTP状态的说明;

完整的请求示例:(xhr 使用封装好的createXHR函数,高程三的572页)

xhr.open('get','example.txt',false);
xhr.send(null);
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
    alert(xhr.responseText)
}else{
    alert("Request was unsuccessfult:"+xhr.status);
}

对象深拷贝、浅拷贝

浅拷贝--只复制了引用而没有复制到值。

var obj1 = {
name: 'klaus'
}
var obj2 = obj1
obj2.name = 'crazy'

console.log('obj1:', obj1)   // {name: "crazy"} 
console.log('obj2:', obj2)   // {name: "crazy"}

我们只想复制对象的数据,而不想修改原来的值,所以有了深拷贝。
如果对象没有函数,只是键值对数据,使用JSON方法

var obj2 = JSON.parse(JSON.stringify(obj1)) 

第三方库lodash

var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]); // => false

参考

图片懒加载、预加载

原理是现在 img 处放一个占位,真是的图片地址放在img 标签的另一个属性(自定义属性)上,当用户滚动页面或者点击图片上的加载时就会将这个属性上的值赋给src。
预加载是消耗服务器前端性能换取更好的用户体验。
参考

实现页面加载进度条

this关键字

函数式编程

手动实现parseInt

为什么会有同源策略

怎么判断两个对象是否相等

事件模型

  • 事件委托、代理
  • 如何让事件先冒泡后捕获

window的onload事件和domcontentloaded

for...in迭代和for...of有什么区别

函数柯里化

call apply区别,原生实现bind

  • call,apply,bind三者用法和区别:角度可为参数、绑定规则(显示绑定和强绑定),运行效率、运行情况。

async/await

立即执行函数和使用场景

设计模式(要求说出如何实现,应用,优缺点)/单例模式实现

iframe的缺点有哪些

数组问题

  • 数组去重
  • 数组常用方法
  • 查找数组重复项
  • 扁平化数组
  • 按数组中各项和特定值差值排序

BOM属性对象方法

服务端渲染

垃圾回收机制

eventloop

  • 进程和线程
  • 任务队列

如何快速让字符串变成已千为精度的数字

ES6

声明 let、const

let 是 es6 新增的用于声明变量,和 var 差不多,有以下几点区别:

  • var没有块级作用域,let 有
  • var可以重复声明变量,但let不能,在声明变量之前使用变量会报错,而var会报 undefined

解构赋值

从数组和对象中提取值,对变量进行赋值

声明类与继承:class、extend

class 类,添加属性和原型不一样

class User {
    name = "John"; 
} 
let user = new User();
alert(user.name); // John
alert(User.prototype.name); // undefined
  • 必须使用new 来调用
  • 不可枚举,原型中enumerable 为false
  • 总是使用 use strict

Promise的使用与实现

解决了ajax 的回调地狱

generator(异步编程、yield、next()、await 、async)

await/async 语法糖

箭头函数this指向问题、拓展运算符

map和set

map类似对象,set类似数组,但有区别。

  • 有没有用过,如何实现一个数组去重,map数据结构有什么优点?

set 可用于数组去重,因为set 不会添加重复的值,使用扩展运算符...(内部使用for of)可以将set 转换为数组

[...new Set(array)] 

map优点: map 中不仅仅可以使用字符串作为键,,各种类型的值(包括对象)都可以当作键。Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。

ES6怎么编译成ES5,css-loader原理,过程

ES6转成ES5的常见例子

babel

使用es5实现es6的class

浏览器

输入url到展示页面过程发生了什么?

  • 浏览器查找域名的 IP 地址,先查找本地hosts文件是否有对应的规则,如果有就会直接使用里面的ip地址,如果没有,浏览器会发出一个 DNS(Domain Name System,域名系统)请求到本地DNS服务器,本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。
  • 浏览器向 web 服务器发送一个 HTTP 请求

全面的解释

重绘与回流

  • 重绘(repaint): 当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要UI层面的重新像素绘制,因此 损耗较少
  • 回流(reflow): 当元素的尺寸、结构或触发某些属性时,浏览器会重新渲染页面,称为回流。此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因此是较重的操

会触发回流的操作:

  • 页面初次渲染
  • 浏览器窗口大小改变
  • 元素尺寸、位置、内容发生改变
  • 元素字体大小变化
  • 添加或者删除可见的 dom 元素
  • 激活 CSS 伪类(例如::hover)
  • 查询某些属性或调用某些方法
  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()
回流必定触发重绘,重绘不一定触发回流。重绘的开销较小,回流的代价较高。

防抖与节流

cookies、session、sessionStorage、localStorage

浏览器内核

查看原文

赞 0 收藏 0 评论 0

klaus 关注了用户 · 9月15日

夜行风 @yexingfeng

字节跳动持续招人中~
内推链接:https://job.toutiao.com/s/JrK...

关注 38

klaus 关注了用户 · 5月13日

null仔 @xiaoqianduan_58b28cfebff36

总是有人要赢的,那为什么不能是我呢

关注 2306

klaus 关注了专栏 · 5月13日

SegmentFault 思否观察

SegmentFault 思否对开发者行业的洞见、观察与报道

关注 17895

klaus 关注了用户 · 5月13日

leexiaoran @li1076629390

关注 536

klaus 关注了专栏 · 5月13日

qbit snap

开箱即用,拿走不谢。

关注 206

klaus 关注了用户 · 5月13日

政采云前端团队 @zhengcaiyunqianduantuandui

Z 是政采云拼音首字母,oo 是无穷的符号,结合 Zoo 有生物圈的含义。寄望我们的前端 ZooTeam 团队,不论是人才梯队,还是技术体系,都能各面兼备,成长为一个生态,卓越且持续卓越。

政采云前端团队(ZooTeam),一个年轻富有激情和创造力的前端团队,隶属于政采云产品研发部,Base 在风景如画的杭州。团队现有 50 余个前端小伙伴,平均年龄 27 岁,近 3 成是全栈工程师,妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵,也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外,还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战,推动并落地了一系列的内部技术产品,持续探索前端技术体系的新边界。

关注 1438

认证与成就

  • 获得 1 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 5月13日
个人主页被 42 人浏览