面试3

时间 2019-11-24

原文原文链接

同源策略

协议+域名+端口彻底相同才叫同源如下三种行为受到限制: （1）没法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。php

（2）没法接触非同源网页的 DOM。css

（3）没法向非同源地址发送 AJAX 请求（能够发送，但浏览器会拒绝接受响应）。html

解决： cookie 浏览器经过document.domain属性来检查是否同源。 A 网页的网址是http://w1.example.com/a.html，B 网页的网址是http://w2.example.com/b.html（一级域名同样，二级不同）前端

// 两个网页都须要设置
document.domain = 'example.com';
复制代码

这时候a设置一个cookie，b就能够读到这个cookiehtml5

AJAX: jsonp CORS（“跨域资源共享”）:Access-Control-Allow-Originreact

Content-Type: text/html; charset=utf-8webpack

安全

XSS

XSS（Cross-site scripting)即跨站点script 举例web

恶意用户 A 在网站提交留言为<script>console.log(document.cookie)</script>，这段代码被上传到服务器。
B访问网站的留言，这段脚本在 B 的浏览器直接执行，恶意用户 H 的脚本就能够任意操做 B 的 cookie。有了 cookie，恶意用户 H 就能够伪造 B 的登陆信息。

产生缘由：前端的代码在显示留言的时候，操做DOM的时候innerHTML方法，或者用了jQuery中的$p.html(content)方法。面试

解决办法：ajax

前端尽可能使用innerText（jQuery就是用text()方法，不要本身）
将 < >'' ' 这些可疑的符号转义，如<变成 < （HTML实体）

CSRF攻击

（CSRF的全名为Cross-site request forgery）伪造跨站请求过程：

假设给用户赚钱的请求连接是：www.game.com/Transfer.ph…
而后若是客户端已经验证并登录www.game.com网站，此时客户端浏览器保存了游戏网站的验证cookie（已登陆，而且浏览器保存了须要登陆的cookie）
客户端再tab另外一个页面进行访问恶意攻击者的网站，并从恶意攻击者的网站构造的连接（好比构造一个img标签，url就是构造的虚假的连接，例如是http://www.game.com/Transfer.php?toUserId=100&vMoney=1000）来访问游戏网站（再开一个网页，这个网页里有一个img标签，url是假的）
浏览器将会携带该游戏网站的cookie进行访问，1000块游戏币就转给那个虚假的userid了（由于已经登陆了，浏览器里保存了cookie，因此浏览器会带着这个cookie访问这个假的img的连接）

对于get请求能够很轻松的攻击，对于post，攻击者可诱导用户进入带 Form 表单可用POST方式提交参数的页面。

解决方法：

服务端在收到路由请求时，生成一个随机数，在渲染请求页面时把随机数埋入页面（通常埋入 form 表单内，）
服务端设置setCookie，把该随机数做为cookie或者session种入用户浏览器
当用户发送 GET 或者 POST 请求时带上_csrf_token参数（对于 Form 表单直接提交便可，由于会自动把当前表单内全部的 input 提交给后台，包括_csrf_token）
后台在接受到请求后解析请求的cookie获取_csrf_token的值，而后和用户请求提交的_csrf_token作个比较，若是相等表示请求是合法的。

解决方法： 一Token字符串验证。总结：

服务器请求的时候，生成一个随机数
而后埋到要提交的form表单里，方法是生成一个input标签页（）
服务端设置setCookie，把该随机数做为cookie保存到客户端浏览器里
在发送请求的时候把cookie里的token随机数和form表单里的随机数进行比较，若是一致，就经过验证

二让用户本身填写验证码

性能优化

HTTP缓存
CSS引用写在<head></head>,script标签写在body闭合标签前面，先加载内容与样式。
图：懒加载，雪碧图。
压缩代码：css去掉回车，空格。
CDN：静态文件放在CDN。
webpack，将几个小文件组成大文件，减小请求次数。

地平线须要学习的：

webGL

three.js 封装了webGL的API

数组方法，快排，冒泡，数组去重

数组方法

Array.isArray() Array.isArray(arr) // true

2.实例方法 valueOf()，toString() arr.valueOf() // [1, 2, 3]返回自己 arr.toString() // "1,2,3,4,5,6"

push()，pop() shift()//删除第一个元素

join()//变成一个字符串

concat()//数组合并

reverse()//颠倒数组

slice(起始位置，终止位置)//[起始位置，终止位置)减下来一部分（一小片）数组，一小片，返回一个新数组，原数组不变

splice方法用于删除原数组的一部分红员，并能够在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。(裁剪下来)

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]
复制代码

从下标4开始，日后删2个

sort()//按字典序排序，能够传入函数做为参数规定排序的方式。直接改变了原数组

遍历： map()//映射，并返回一个新数组，里面函数能够调整数组的值

forEach()//forEach方法不返回新数组，只用来遍历数据

filter()//过滤一个数组 [1, 2, 3, 4, 5].filter(function (elem) { return (elem > 3); }) // [4, 5]

indexOf()//indexOf方法返回给定元素在数组中第一次出现的位置. 若是没有出现则返回-1

String的方法

属性：length

方法： var s = new String('abc'); s.charAt(1) // "b" 这个方法彻底能够用数组下标替代。 'abc'.charAt(1) // "b" 'abc'[1] // "b"

concat()

slice()减一小块下来，返回新字符串，[起始位置，结束位置) substring()同样，优先使用slice() substr()同样，优先使用slice()

indexOf() 用于肯定一个字符串在另外一个字符串中第一次出现的位置，返回结果是匹配开始的位置。若是返回-1，就表示不匹配

trim()去除字符串两端的空格，返回新字符串

toLowerCase() toUpperCase() 变换大小写

split()将字符串分割为数组 'a|b|c'.split('|') // ["a", "b", "c"]，与jion相对应

Math

Math.floor()，Math.ceil()地板值，天花板值，相对于数轴的。

Math.round()四舍五入

Math.random() [0,1)的随机数

快排

let a = [1,1,1,2,2.2,12,14,23,443,5,5,435,45656768,4,6,7,5,8,33,67,86,2,86,67,845,4,24,5342,1,2]
function quickSort (arr){
  if(arr.length<=1) {return arr}
  // let midIndex = Math.floor(arr.length/2)
  // let midItem = arr.splice(0,1)[0]
  let midItem = arr[0]
  let left = []
  let right = [] 
  for(i = 0;i<arr.length;i++){
    if(i!==0){//跳过中间值
      if(arr[i]<midItem){
        left.push(arr[i])
      }else{
        right.push(arr[i])
      }
    }
  }
  return quickSort(left).concat([midItem],quickSort(right))
}
console.log(quickSort(a))
复制代码

jsbin.com/ravujoyopi/…

数组去重

let a=[1,1,1,2,2,2,3,3,3,3,undefined,'xxx','xxx','3','3','undefined']

function f(array){
  let hash = {}
  let returnArr = []
  for(let i=0;i<array.length;i++){
    let arrItemStr = (typeof array[i]) + array[i] + ""//防止undefined和'undefined'转换成字符串而后冲突

    if(hash[arrItemStr]!==1){//说明未进入hash
      hash[arrItemStr]=1
      returnArr.push(array[i])
    }
  }
// console.log(hash)
  return returnArr
}
console.log(f(a))


//2：
console.log(Array.from(new Set(a)))
复制代码

ES6

了解let const 解构赋值箭头函数 promise

canvas SVG

数据可视化

d3.js echarts，2d的柱状图，折线图，饼图，3d的有3d地球模型，3d柱状图，3d地图

video标签

接下来的学习目标就是react

自我介绍

我是一名软件工程专业的大四学生，由于对前端感兴趣，因此自学前端半年多，对技术颇有热情，想找一份工做一遍工做一边提高本身的技术能力。

Array的几个用法必定要搞会，记下来

string.slice( array.join( indexOf()

网易面试

伪类，伪元素

伪类： :hover :focus :active :visited :link :first-child ，:last-child ，nth-child()用来选取不一样状态的元素伪元素： ::before ::after ,实际存在的元素，用content：''来作小三角形，小圆点

html5标签

html5标签header footer main artical section aside nav，有点：若是都用div或者span来着，那么不清楚每一部分的含义，语义化，结构清晰，提升可读性。有利于seo，好比标题是h1，爬虫爬取数据会优先爬取标题。

DOCTYPE 规定使用哪一个版本的html 使用html5

元素

块级元素：div p header footer main artical section aside nav 行内元素：span、a、b、i，strong 行内块元素：img，input，button

this的题目

function f() {
		console.log(this.x);
	}
	f();
	var x = 2;
	var a = {x: 1};
	a.f = f;
	var b = a.f;
	a.f();
	b();
复制代码

面试3