HTML
如何理解HTML语义化？
增加代码可读性
利于搜索引擎优化（SEO）
默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
块元素 display:block/table；有div h1 h2... table ui ol p 等
内联元素 display:inline/inline-block；有span img input button 等
CSS - 布局
盒模型
W3C盒模型 (content-box)：包括margin、border、padding、content，元素宽度width=content
IE盒模型 (border-box)：元素的width=border + padding + content
margin负值的问题
相邻元素margin-top、margin-bottom的值会发生重叠，取最大值，块级元素会移动自身位置，内联元素则无效。
margin-top和margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响。对于外界元素而言此时改变的是元素自身的宽度。
margin-bottom负值，下方元素上移，自身不受影响。
BFC（Block format context块级格式化上下文）
一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。
触发BFC的条件：
float不是none
overflow不是visible
position是absolute或fixed
display是flex或inline-block
常见的应用：
清除浮动
.clearfix:after{
content:'';
display:table;
clear:both;
height:0;
}
/*兼容IE*/
.clearfix{
*zoom:1;
}
圣杯布局和双飞翼布局
布局目的
三栏布局，中间一栏最先加载和渲染
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页
布局思路
使用float布局
两侧使用margin负值，一边中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding 一个用margin
代码实现
line-height如何继承
父级元素写具体像素：比如20px，则继承line-height的值为：20px。
父级元素写比例：比如2，则继承line-height的值为：2 * 自身的font-size;
父级元素写百分比：比如200%，则继承line-height的值为： 200% * 父元素字号。（考点）
rem
@media only and (max-width:374px)<html font-size:86px> 1rem=86px；0.16rem = 0.16 * 86; @media only and (min-width:375px) and (max-width:413px) <html font-size:100px> 1rem=100px；0.16rem = 0.16 * 100; @media only and (min-width:414px)<html font-size:110px> 1rem=110px；0.16rem = 0.16 * 110;
JS
类型判断
typeof
仅能判断基础类型、函数、引用类型，但不能判断引用类型的类别（数组、对象）
instanceof
判断引用类型的类别，原理是通过原型链判断
简单深拷贝
function deepClone(obj={}){
if(typeof obj !=='object' || obj == null) {return obj};
let result = (obj instanceof Array)?[]:{};
for(k in obj){
if(obj.hasOwnProperty(k)) result[k] = deepClone(obj[k]);
}
return result;
}
何时使用 === 何时使用 ==
this
this的值是在函数执行时候确认的，不是定义时确认；
在普通函数中调用 - 指向全局对象window
call、apply、bind调用 - 指向传入的对象
作为对象方法被调用 - 指向对象本身
在class中被调用 - 指向实例
箭头函数 - 指向上级作用域的this
手写bind
Function.prototype.myBind = function(){
var args = Array.prototype.slice.call(arguments);
var context = args.shift();
var fn = this;
return function(){
return fn.apply(context,args)
}
}闭包
作用域
全局作用域
函数作用域
块级作用域
手写Promise
EventLoop的执行顺序
宏任务（全部同步代码） > 微任务队列所有代码 > 尝试DOM渲染 > 下一个宏任务(触发event loop指向异步队列所有代码)
宏任务和微任务
宏任务和微任务的区别
宏任务：DOM渲染后触发。微任务：DOM渲染前触发。
宏任务：是浏览器规定的。微任务：是es6语法规定的。
HTTP
原生ajax
const xhr = new XMLHttpRequest();
xhr.open('GET',url,true异步 false同步)；
xhr.onreadystatechange = function(){
//0 还未调用send，1 正在发送，2 发送成功此时已接收到返回数据，3 解析返回的数据，4 解析完成可以在客户端获取内容
if(xhr.readState===4){
if(xhr.status===200){
console.log(xhr.responesText)
}
}
}
xhr.send(null);//post xhr.send(JSON.stringify({}))常见的http状态码
2xx 表示请求成功：200正常返回
3xx 表示重定向：301（永久重定向），302（临时重定向），304（访问资源未发生变化，使用缓存资源）
4xx 表示客户端请求错误：404（访问地址找不到），403（没有访问权限）
5xx 服务端错误：500（服务器错误），504（网关超时）
常见的http header
request Headers
Accept：浏览器可接收的数据格式
Accept-Encoding：浏览器可接受的压缩格式，如gzip
Accept-Language：浏览器可支持的语言编码，如zh-CN、zh
Connection：keep-alive，一次TCP连接重复使用
Cookie：维持客户端和服务端状态
Host：请求的域名是什么
User-Agent：浏览器的信息
Content-Type：发送数据的格式，一般get请求没有，如application/json
Reponese Headers
Content-Type：返回数据的格式
Content-Length：返回数据大小，多少字节
Content-Encoding：返回数据所用的压缩格式，如gzip
Set-Cookie：服务端更改cookie
缓存相关 Headers
expires catch-control，Last-Notified Etag，If-Notified-Since If-None-Match;
什么是Restful API
http的缓存机制
前端工程化
git常见操作命令
git config user.name 用户名 git config user.email 邮箱 配置了用户名和邮箱在提交记录里会看到用户名邮箱信息
git add 文件名 提交某个文件
git add . 提交所有文件
git commit -m "注释注释" 生成一条记录注释
git checkout 文件名 撤销某个文件的修改
git checkout . 撤销所有文件修改 checkout要在commit之前才能撤销
git checkout -b 分支名 创建并切换到新分支
git checkout 分支名 切换分支 撤回文件修改和切换分支都是checkout
git branch 查看分支 master分支为主分支,默认分支
git push origin 分支名 推送修改到git远程存储库
git pull origin 分支名(例如 git pull origin master) 拉取当前服务端最新代码
git fetch 拉取服务端所有分支
git merge 分支名 将某个分支合并到当前分支 CONFLICT冲突
git stash 将修改暂存在当前分支的另一个区域(不影响当前分支),此时可以切换分支了
git stach pop 将暂存的修改推出来
git status 查看文件更改状态
git diff 查看全部更改的内容(新增的文件不在内)
git diff 具体文件名 查看某个文件的内容
git log 查看提交记录,Initial commit是创建时提交的,不用管
git show id(这个id是git log 提交后commit后面显示的长串的ID,要看哪个就在show后贴哪个) 查看提交内容
移动端抓包
window 一般用fiddler，mac一般用charles
性能优化
让加载更快
减小代码体积：代码压缩（比如：webpack生产环境代码压缩，服务器使用gzip压缩）。
减少请求次数：代码合并（webpack将多个css js文件打包成一个，雪碧图），服务端渲染ssr，缓存。
使用更快网络：CDN。
让渲染更快
css 放在header，js放到body后面
对dom操作做缓存、将频繁的dom操作合并为一次、dom离线化
尽早开始执行js，使用DOMContentLoaded
图片使用懒加载，长列表使用下拉加载更多
从用户操作优化
防抖（debounce）
指定时间内只有最后一次触发有效。
const debounce = (fn,delay=50) => {
let timer = null;
return function(){
timer && clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,arguments);
clearTimeout(timer);
},delay)
}
}节流（throttle）
指定时间内只有第一次触发有效。
const throttle = (fn,delay=50) => {
let timer = null;
return function(){
if(timer == null){
fn.apply(this,augements);
timer = setTimeout(()=>{
timer = null;
},delay);
}
}
}前端安全
XSS跨站请求攻击
危害
流量劫持
获取用户cookie信息，盗取账号
篡改、删除页面信息
配合CSRF攻击，实施进一步攻击
攻击类型
存储型XSS（即时，持久性XSS）,一般常见于网页的各种输入（富文本，评论框，留言板，邮件）
反射型XSS（非即时，非持久性XSS）,一般常见在浏览器中输入参数？id=<script>alert('xss')</script>
攻击流程
寻找漏洞 > 构造攻击代码 > 注入代码
XSS预防
特殊字符过滤：如<script>aaa</script>过滤为<script>aaa</script>
引入CSP（内容安全策略Content Security Policy）白名单制度
客户端设置，<meta http-equiv="Content-Security-Policy" content="default-src www.baidu.com">
服务端设置，setHeader('Content-Security-Policy',default-src www.baidu.com)
CSRF跨站请求伪造
如何攻击
攻击者在网站中注入图片，图片地址为攻击者想要请求的接口
预防
get只获取数据，修改数据用post
设置cookie sameSite属性（不随着请求发送），设置cookie不能被第三方网站访问
对请求做验证，比如验证码或者token
服务端队请求来源Referer做验证
共同学习，写下你的评论
评论加载中...
作者其他优质文章
