文章目录
BFC、IFC、GFC、FFC
BFC块级格式上下文，页面中一块区域容器其子元素不会在布局上影响到外面的元素
如何产生：
- float不为none
- overflow不为visible
- position不为relative和static，脱离文档流
- display为table-cell、table-caption、inline-block等
- 是body根元素
BFC的应用：
- 垂直方向的外边距重叠，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准
- 清除浮动，计算子级浮动元素的高度
- 阻止元素覆盖，形成两栏布局，左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化
- 解除文字环绕
IFC内联格式化上下文，框线高度由最高的实际高度为准，垂直方向的margin和padding不会影响
GFC网格布局上下文，display为gird
FFC为自适应格式上下文，display为flex或者inline-flex的时候
div水平垂直居中
-
absolute定位，配合transform（不知道子元素大小）
-
absolute定位，配合负margin（知道子元素大小）
-
absolute定位，margin:auto(不知道子元素大小)
-
flex布局，justify-content和align-items都为center(不知道子元素大小)
-
display为table-cell，vertial-align为middle，text-align为center(不知道子元素大小)
-
absolute定位，使用calc（）计算位置（知道父、子元素大小）
display_none,visibility_hidden,opacity_0区别
display:none不会被渲染（会重排），不能触发事件，不能被继承属性，不支持transition动画
visibility:hidden会被渲染（会重绘），不会被触发事件，会被子元素继承，显示不支持隐藏支持动画
opacity:0会被渲染（不会重绘），会触发事件。会被子元素继承且不能取消，可以支持动画
CSS优先级
css优先级计算Specificity累加
id选择器 0，0，1，0，0
类选择器、属性选择器、伪类 0，0，0，1，0
元素和伪元素 0，0，0，0，1
通配符为 0，0，0，0，0
行内样式 0，1，0，0，0
！important 1，0，0，0，0
移动端1px边框的问题
移动端中css的1px不等于移动设备的1px，比如我们pc中模拟看到的iphone为375但是实际是750
边框变粗的原因：移动端和pc端的像素密度不同，通常移动端为devicePixelRatio2
-
部分移动端支持border-width：0.5px
-
使用border-image、background-image结合图片像素透明实现
-
-
使用box-shadow模拟边框
-
viewport+rem实现
-
使用伪类+transform：scale（0.5）
map和parseInt
函数节流和函数防抖
节流指的是一定时间内只会执行一次函数，先触发
防抖指的是任务触发的间隔超过一定时间才能执行，后触发
总的来说节流和防抖都是避免频繁调用函数的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('mousemove', throttle(function (e) {
console.log('throttle',e)
}, 3000))
window.addEventListener('mousemove', debounce(function (e) {
console.log('debounce',e)
}, 3000))
//函数节流
function throttle(fn, time = 1000) { //给节流设定一个默认的1s
let flag = true; //闭包设定一个flag作为判断依据
return function (...args) {
if (!flag) return; //如果flag为false说明时间还没到，则不执行
else {
fn.apply(this, args); //通过apply赋予执行的上下文
flag = false; //改变flag的状态
setTimeout(() => {
flag = true; //到达规定时间后重新恢复
}, time)
}
}
}
//函数防抖
function debounce(fn, time = 1000) {
return function (...args) {
clearTimeout(fn.timer);//为事件清除上次的计时，下面再重新计时
fn.timer = setTimeout(() => {
fn.apply(this,args);//获取上下文环境
}, time)
}
}
</script>
</body>
</html>
Set、Map、WeakSet、WeakMap的区别
重点是遍历和弱引用
判断数组的方法
- Object.prototype.toString.call(arr)->"[object Array]"
- arr instanceof Array ->true,去找原型链prototype
- Array.isArray(arr) ->true，ES5新增的方法，推荐使用
ES6的class有哪些特性
- class会变量提升（类似let、const）但是不会初始化赋值，会出现暂时性死区
- class内部使用严格模式
- class的所有方法（静态方法或实例方法）都是不可枚举的
- class的所有方法都没有原型对象prototype，也不能使用new
- 必须使用new来调用class
- class内部无法重写类名
全局const和let的获取
全局的const和let声明的变量不在window
所以顶层window是获取不到块级的变量的，但是可以直接用a、b拿到
浏览器兼容问题
使用第三方库、兼容工具、代码条件注释、渐进增强/优雅降级
前端性能优化
- 减少http请求
- 减少dom操作
- 避免不必要的重排和重绘
- 剪短优化css选择器（从右向左匹配）
- 压缩js和css代码减少体积
- 开启gzip压缩
- css放head，js放body下面
- 压缩图片以及使用css Sprite（雪碧图）
- 使用CDN加速，适当进行文件缓存
- 合理控制cookie的大小
前端的安全性问题
xss：恶意注入html/js代码到用户浏览的网页上，从而窃取cookie、劫持会话或者钓鱼诈骗等攻击
原因：
- 浏览器能够解析执行js代码但是不能分辨是否恶意
- 交互功能的丰富可能会造成xss漏洞
- 程序员建站缺乏相关的安全意识
- xss手段灵活多变
危害：
- 盗取用户账号
- 控制用户的行为
- 盗取用户的资料
- 非法转账
- 强制发送电子邮件
- 控制受害者机器发送攻击
防护：
- 将重要的cookie设置为http-only
- 定义并检查用户的表单
- 数据进行html Encode处理
- 过滤标签输入输出
- 过滤事件的代码
csrf：跨站伪造请求，伪造受信用户的请求
特点：
- 依靠用户标识威海网站
- 欺骗用户的浏览器发送http请求给目标站点
防护：
- 通过referer、token等或者验证码监测用户提交
- 不要在页面的链接中暴露用户的隐私信息
- 最好使用post操作
- 避免全站cookie，严格设置cookie的域
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
