面试题
1.jsonp跨域及其实现方式
var url="http://www.xxx.com?callback=handle"
var script=document.createElement("script")
script.setAttribute("src",url)
// 允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
2.cors实现跨域
//服务端
Access-Control-Allow-Origin=*
//服务端
headers:{
origin:localhost
}
3.手写节流函数trottle
function trottle(fn,delay)
{
// 函数节流： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
let timer=null;
return function(){
if(!timer)
{
timer=setTimeOut(()=>{
//apply接收数组
fn.apply(this,arguments);
timer=null;
},delay)
}
}
}
function debounce(fn,delay)
{
// 函数防抖： 在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
let timer=null;
return function()
{
if(timer)
{
timer=null;
}
timer=setTimeOut(()=>{
fn.apply(this.arguments)
},delay)
}
}
4.XSS与CSRF
XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。
XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。
设置httponly禁止js读cookie
CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被
攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。
CSRF 攻击的本质是利用了 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。
解决:指定请求头中的HTTP refer来自同一个域名,发送token
5.Cookie有哪些字段，如何禁止JS访问Cookie
domin,path,expires,key,value,httpOnly(禁止js访问cookie)
6.进程之间通信机制
管道、消息队列、信号、共享内存
7.HTTPS
HTTP 信息明文传输 80端口
https需要申请证书
HTTPS=HTTP+SSL(加密协议传输) 443端口
客户端向服务器发起HTTP请求,服务器返回SSL证书给客户端,然后客户端使用公钥进行加密
确保数据在传输的过程中不被窃取、改变、保证数据的完整性。
8.数据库
增:insert
删:delete
改:update
查:select
9.CSS选择器优先级
行内>ID>CLASS>Tag
多个选择器并列使用权重相加
10.CSS盒子模型
margin->border->padding->content
标准盒模型: width,height=content-box
IE盒模型:width,height=content+padding+border
11.两栏布局
.left
{
float:left;
width:200px;
}
.right{
margin-left:200px;
}
.left
{
float:left;
width:200px;
}
.right{
//触发BFC,内部元素对外部元素布局没有影响
over-flow:hidden;
}
.wrapper{
display:flex;
}
.left{
width:200px;
}
.right{
flex:1;
}
12.三栏布局
.wrapper{
display:flex;
}
.left{
width:200px;
position:absolute;
left:0;
}
.right{
width:200px;
position:absolute;
right:0;
}
.center{
margin-left:200px;
margin-right:200px;
}
position的值介绍
1.static
static是默认值表示没有定位,该元素出现在正常的文档流当中
2.relative
相对定位,相对于元素正常出现在文档流中的位置进行定位
3.absolute
绝对定位,相对于最近的具有定位属性的父元素进行绝对定位
若不存在这样的父元素,就相对于body进行定位。
4.fixed
相对于浏览器窗口进行定位。
margin重叠
上下边距都有,取较大的那个
水平左右的边距永远不会重合
解决边距重叠
1.外层元素padding代替
2.透明边框border
圣杯布局(两侧宽度固定，中间宽度自适应的三栏布局)
在CSS中，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性。
<html>
<body>
<div class="container">
<div class="middle">middlediv>
<div class="left">leftdiv>
<div class="right">rightdiv>
div>
body>
<style>
.container{
overflow:hidden;
padding:0 200px;
}
.middle{
float:left;
width:100%;
background:red;
height:200px;
}
.left{
float:left;
position:relative;
width:200px;
left:-200px;
background:purple;
margin-left:-100%;//让左边部分上去
height:200px;
}
.right{
float:left;
position:relative;
width:200px;
right:-200px;
background:yellow;
height:200px;
margin-left:-200px;//让右边部分上去
}
style>
html>
双飞翼布局
跟圣杯布局差不多,只不过用margin代替padding,只有content在container里面
#center
#left
#right