*进公司之后git的配置
*git config --global user.name "git账号是公司给你新开的"
*git config --global user.email git右上角的名称
*配置 公钥 私钥
ssh-keygen -t rsa -C *公司给你的登录账号*
cat ～/.ssh/id_rsa.pub //打开公钥，拷贝所有内容
*git clone：拷贝 git 项目到本地
*git status：查看本地文件状态
*git log：查看提交日志
*git add：跟踪文件 把代码保存到缓冲区
*git commit -m '描述文字(有意义的)'：把项目提交到本地仓库
*git push origin 分支名：提交(当前在哪个分支下面 就只能往当前这个分支 push)
*git branch -v：查看本地分支，*号表示当前哪个分支上
*git branch -a：查看本地和远程的分支
*git checkbox 分支名：切换分支(只有当前分支上没有任何修改了 才能切换分支)
*git checkbox -b 分支名 origin/分支名：基于本地分支创建自己本地的分支
*git pull origin 分支名：拉取最新代码
*git fetch：同步远程分支
*git diff：比较代码
*git reset --hard commit 哈希值：回滚代码
*git stash save '描述'：缓存 stash
*git stash list ：查看存储的栈列表
*git stash apply stash@{1}：回到某一个存储上从0开始
*git stash apply：回到最近储藏
*git push -f origin 分支：强制提交
*git revert commit 的哈希值：撤回某一条提交
*事件
1.注册事件
false：未开启捕获，从里向外执行事件
true：开启捕获，从外向里执行事件
el.addEventListener(事件，回调函数，false)
2.删除事件
el.removeEventListener(事件，回调函数，false)
3.取消默认事件
event.preventDefault()
4.阻止冒泡
event.stopPropagation()
5.事件阶段
捕获阶段、目标阶段、冒泡阶段
*new 类 经过哪几步
1.创建一个空对象{}
2.执行构造器 把{}赋值给this
3.给{}赋值
4.返回对象给类的实例
*单点登录
1.cookie 设置 domian 域名
2.发送页面 iframeWindow.postMessage(message,targetOrigin)
监听
window.addEventListener('message',e=>{
console.log(e.data);
},false);
3.sso
*class
1.class怎么实现继承
class A {
constants(){
//为什么要调用super 因为 子类没有自己的this 需要调用super继承父类
super()
}
}
class B extends A {
//constructor 不写默认会调用
constructor () {
//调用super 是因为子类没有自己的this，需要继承父类的this
super()
}
}
*httponly：不可修改的cookie
*cdn oss：
cdn 是内容分发网络，是一组分散在不同地理位置的web服务器 打开网站时 找最近的cdn服务器访问 可以加速访问网站速度
oss存储文件的服务器 公司项目一般存在oss上
*window.onload 页面 dom 和 image js css 全部加载完成触发
window.addEventListener('DOMContentLoaded',() => { //页面dom加载完成 //等所有的script link img iframe })
*前端性能优化
javascript：
*把script放在html底部
*使用e6，7减少代码量
css：
*尽可能使用css3属性
图片：
*雪碧图
*webp
*icon
*图片蓝加载
*避免图片src属性为空
http：
*尽可能减少页面http请求
*cdn
*浏览器缓存包括 强缓存 和 协商缓存
*避免重定向
*开启Gzip压缩
react，vue：
*路由懒加载
*SSR(前后端同构)
webpack：
*alias配置别名
*extensions 在导入语句没带文件后缀时 webpack会自动带上后缀名
*externals 配置某些文件不打包
*ExtractTextPlugin 拆分 CSS 打包
*DllPlugin 第三方文件单独打包缓存
*entry 拆分多少个模块
*移动端开发：
wap：手机浏览器看的网站 wap
hybrid：混合开发 HTML5+CSS3+原生壳(安卓，IOS壳)
原生app：开发系 安卓 IOS APP (React Native Flutter)
*内存泄漏:
1.闭包
2.死循环
*网页白屏可能是哪些原因引起的：
1.网络延迟 加载慢
2.css隐藏了页面模块
3.js加载慢阻塞整个页面加载
4.进行比较大运算 页面卡死
5.路由错误 加载页面没有内容
*async 原理
function spawn (genF) {
return new Promise(reslove => {
const gen = genF()
function step (nextF){
let next
next = nextF()
if(next.done){
return reslove(next.value)
}
Promise.reslove(next.value)
.then(v=>step(()=>gen.next(v)))
}
})
}
*原型链 prototype
创建一个函数或者class类，js会自动为函数或者类添加一个prototype属性，默认包含2个属性constructor和proto，constructor指向当前类，proto指向上一级prototype这就形成了原型链
*继承
//1.E6 class继承：引用类型 共享的
//2.原型链继承：引用类型 共享的
//3.寄生组合式继承
function inheritPrototype(subType,superType){
//创建对象，创建父类型的一个副本
var prototype = Object.create(superType.prototype);
//增强对象，弥补因重写原型而失去的默认的constructor属性
prototype.constructor = subType;
//指定对象，将新创建的对象赋值给子类的原型
subType.prototype = prototypep
}
//父类初始化实例属性和原型属性
function SuperType(){
this.colors = ["red","blue","green"];
}
//借用构造函数传递增强子类实例属性(支持传参和避免篡改)
function SubType(){
SuperType.call(themeVariables);
}
//将父类原型指向子类
inheritPrototype(SubType,SuperType);
//{color:["red","blue","green"];}
var instancel = new SubType();
//{colors:["red","blue","green"];}
var instance2 = new SubType();
instance1.colors.push("2");//["red","blue","green","2"]
instance2.colors.push("3");//["red","blue","green","3"]
console.log(instance2.colors,1111);
*怎么减少重绘 回流
1.css
(1).不要使用table布局，可能很小的一个改动会造成整个table的重新布局
(2).集中改变样式className
(3).使用position：absolute/fixed；脱离文档流
(4).利用transform translate 去代替 left top
(5).避免使用css表达式 例如：calc()
*js
(1).动态插入多个节点时，可以使用文档碎片(DocumnetFragment)，创建后一次插入，避免多次的渲染性能
(2).使用resize事件时，做防抖和节流处理
(3).可以先为元素设置为不可见：dispaly：none，操作结束后再把它显示出来。
*需求文档prd
*做项目流程(PM产品，QA测试，FE前端，UI，dev后台)
1.项目需求评审 大概2-3次
*第一次 提很多不合理问题 PM 记录 改第二版
*第二次 提很多不合理问题 PM 继续改
*第三次 终审
//敏捷开发：一个项目 一组固定的人(QA FE DEV) 一个月迭代2版
//半个月迭代一次 14-4 = 10，4天 6天
2.UI出图
3.前端 后台给出具体的确定排期(UI绘图)
4.QA给出测试排期(技术评审)
5.提测改bug
6.发布上线，跟踪线上问题
*apply：
Function.prototype.apply = function (context,args) {
//不传默认是全局，window
context = context || window
//args不传时默认时空数组，防止下面用spread操作符时报错
args = args ？ args:[]
//把this存到context.fn，这里的this是调用的函数
context.fn = this
//执行调用的函数，this指向context，参数用spread操作符扩展
const res = context.fn(...args)
//删除，不污染context
delete context.fn
//返回res
return res
}
call：
Function.prototype.call = function (context,...args) {
//不传默认是全局，window
context = context || window
//args不传时默认时空数组，防止下面用spread操作符时报错
args = args ？ args:[]
//把this存到context.fn，这里的this是调用的函数
context.fn = this
//执行调用的函数，this指向context，参数用spread操作符扩展
const res = context.fn(...args)
//删除，不污染context
delete context.fn
//返回res
return res
}
*从输入一个URL到浏览器页面展现到底发生了什么
输入网址
DNS解析
建立TCP/IP链接(三次握手四次握手)
发送HTTP请求
服务器处理请求
服务器返回HTTP响应
浏览器渲染页面并展现(结合html渲染详细说)
断开链接
*怎么设置git不上传某些文件
设置 .gitgnore
*为什么会有跨域：因为浏览器的同源策略(CORS)即协议，域名，端口 只要有一个不同就会产生跨域
*怎么解决跨域：jsonp，node代理，后台设置请求头
*上线后怎么解决跨域 设置 nginx
*怎么看依赖包文件版本：pageage.json
*hash history 区别：
1.hash 带#，history 不带#
2.history 上线后刷新页面后会展示404 找不到页面(设置nginx可以解决这个问题)，hash刷新正常显示
*项目上传 使用 阿里云
*为什么会有跨域：因为浏览器的同源策略(CORS)即协议，域名，端口 只要有一个不同就会产生跨域
*怎么解决跨域：
jsonp
<script src="后台接口地址"></script>
后台返回一个函数调用方法 例如 abc(数据)
前端在js里设置一个abc方法，后台调用前端的abc方法传递数据
node代理n
node请求后台接口(node请求后台接口不走浏览器所以不会跨域)，前端请求node的接口
后台设置请求头
response.setHeader("Access-Control-Allow-Origin"."*")
response.setHeader("Access-Control-Allow-Methods"."*")
response.setHeader("Access-Control-Max-Age"."3600")
response.setHeader("Access-Control-Allow-Headers"."*")
response.setHeader("Access-Control-Allow-Credentials"."true")
*add(1)(2)(3)
function add(a){
return b => {
return c => {
return a + b + c
}
}
}
*fetch axios 区别：
fetch是浏览器自带的
fetch只对网络请求报错 对400 500 都当作成功的请求
fetch默认不会带cookir
fetch不支持abort不支持超市控制
axios体积小 没有fetch的这些问题
*umi4 && umi3 区别
*umi4 只能通过 plugin.ts 配置 index.html
*通过 useLocation，useParams，useSearchParams 获取路由参数
*支持vue
*默认集成react18，router6
*支持 vite webpack 2种构建方式
*children 改成了 <Outlet />
*构建速度更快
*javascript 数据类型
boolen, null, undefined, number, string, symbol, BigInt, object
*JS中浅拷贝 和 深拷贝
深拷贝：递归 和 JSON.stringify，其他都是浅拷贝，JSON.stringify 会过滤掉空值 一般不用
浅拷贝方法：Object.assign，...扩展运算符，Object.create
公司使用 _.cloneDeep 实现深拷贝
移动端
一.移动类型
wap(手机浏览器 输入网址)
hybrid(混合 前端 + 安卓 前端 + IOS) 壳子原声 + H5 + C3
原生app(安卓 IOS)
二.hybrid 壳子
安卓WebView 封装了一个自定义的浏览器(https://www.douyin.com)
IOS WKWebView 封装了一个自定义的浏览器
三.布局类型
自适应布局 rem
响应式布局 @media
@media screen and (max-width: 1000) {
.div{
color:
flex:
}
}
四.前端 + 安卓 IOS 代码交互
ios: WebViewJavascriptBridge
android: jsbridge
五：调试 hybrid
1.手机连接USB线 输入 chrome://inspect/#devices
2.点击inspect 进行测试
3.手机 和 电脑 必须是同网段
*心跳检测：检测前端和后台链接是不是还存在，如果已经断开 通知后台，后台关闭链接
实现：每隔一段时间调用send()
