前端知识点

light1120
305 阅读10分钟

html5

  • 1，新增语意类标签（header footer nav section）
  • 2，新增storage
  • 3，多媒体
  • 4，websocket
  • 5，图形类（canvas , svg ，webgl）

webApi

  • 1, canvas
  • 2, Geolocation
  • 3, WebSocket
  • 4, Web Audio
  • 5, Fetch
  • 6, Web Components

css

  • 1，flexbox
  • 2， grid 布局
  • 3， BFC Block Formatting Context BFC提供了一个独立的容器，容器里外布局相互不影响。也可以解决一些问题，如高度重叠问题，清除浮动问题（放到同一个BFC中） 触发条件：absolute/fixed/inline-box/overflow!==visible
  • 4，link @import: link 标签 页面同时加载，还能加载其他，@import 语法，页面之后，只能加载css
  • 5，less / postcss

typescript

  • 1，type 和 interface 区别 type 定义一个别名 / 定义交叉类型，联合类型 interface 用于继承和实现 extends implements (type 也能做，& implements)推荐interface
  • 2，泛型 为了解决不同类型的问题，比如定义不同类型的字典 type Dictionary<T> = { [key:string]:T } 泛型页可以继承其他interface , 用来进行对泛型的约束
  • 3，装饰器Decorators： 本质上是一个函数，用来添加或者修改，被装饰属性，方法，类 的描述，就是Object.defineProterty里的值

webpack

  • 1，loader : 是用来解析文件的，style-loader / vue-loader / less-loader / postcss-loader / babel-loader / ts-loader
  • 2，pulgin : 是用来扩展功能的，SplitChunksPlugin (切割文件) / HotModuleReplacementPlugin(热更新) / ExtractTextPlugin （css独立文件）/ UglifyjsWebpackPlugin（压缩）/ HtmlWebpackPlugin
  • 3，dllPlugin : 类似splitChunkPlugin，可以将第三方依赖库打包到一个文件，这个依赖库不会跟业务代码一起打包，除非本身依赖由改变
  • 4，happyPack : 将loader由单进程转换为多进程
  • 5，Tree-Shaking :
  • 6，按需加载
  • 7 自定义plugin

npm

  • 1, 原理：新建shell 将node_module/.bin 加入path变量，执行完了，再恢复
  • 2，支持通配符 node **/**.js
  • 3, 参数 npm run xxx --xxx
  • 4，可以串行执行或者并行支持 npm run task1 && npm run task2 （串行） 、 npm run task1 & npm run task2 (并行)
  • 5，钩子 ，配置了prebuild build , 会串行执行钩子，npm run build == npm run prebuild && npm run build
  • 6，简写 npm start == npm run start
  • 7, 变量，预留了"pm_package_"前缀，可以通过process.env.pm_package_xxx 拿到package.json的xx值，process.env.pm_package_xxx_yyy,拿到xxx对象的yyy属性值

前端代码工作流

  • 1，prettier 格式化代码
  • 2，eslint 代码规范检查
  • 3，EditorConfig 跨编辑器规范 如end_of_line indent_size等
  • 4，husky/lint-staged 规范检查增强，在git add commit 操作时，通过hooks方式来执行 prettier ，eslint 等

es6

  • 1 es10 添加了import（） 异步加载模块
  • 2 async await 是generator函数的语法糖，用于同步形式写异步函数
  • 3 promise 优缺 回调地狱，链式操作 / 无法终止，内部报错不会抛出只能用回调接受，报错堆栈不友好
  • 4 babel 原理: 将es6转换成AST， 再转译成新的AST ，然后在转换成es5
  • 5 继承：es5和es6继承是有区别的：es5是创建对象，然后在原型链上添加父类属性。es6是根据父类数据特征，创建对象，属性都在对象本身。
  • 6 class: es5，创建对象是在原型链上操作，es6 对象方法，不可枚举

js

  • 1，防抖：将高频操作优化为最后一次执行（可以添加immediate参数）（场景：用户输入） 节流：每隔一段时间后执行一次（场景：滚动，resize）
  • 2，函数柯里化：预置通用参数，返回通用函数，供频繁调用。降低通用性，提高适用性
  • 3， macroTask microTask: macro: setTimeout setInterval micro:promise nextTick observe 执行顺序，macro micro... 先将执行栈清空，在将micro队列清空，然后在执行macro队列
  • 4，EventLoop: 事件循环（执行栈，任务队列）
  • 5，instanceof:原型链__proto__中找其构造函数的原型对象prototype
  • 6 for(let key in obj) 遍历对象 遍历的是对象的key值，也包含了继承下来的值
  • 7 for(let value in iterator) 遍历对象，遍历的是value指，但是要iterator接口，如Array set map等

js引擎

  • 一段代码是如何执行的：

    首先js引擎创建一个执行上下文，push到执行栈中，给所有的变量赋值初始值undefined。然后逐行执行代码，如果有函数的声明和调用，会类似创建函数执行上下文，push到执行栈继续执行。如果遇到子函数调用，会继续创建函数执行上下文，push到执行栈继续执行。如果遇到父函数已经return ，子函数没有执行完，会移除父函数执行上下文，但是会保留父函数变量和复制。（就是闭包）。在遇到异步操作时，会将异步执行函数，push到任务队列（这里分macrotask : EventQueue ，microtask: JobQueue）。当执行栈执行完后，将所有microtask依次push到执行栈继续执行。然后再讲一个macrotask push到执行栈继续执行完。如果有新的microtask生成，就会先继续执行所有microtask。再执行后面的macrotask，形成Event Loop。就是每执行完一个macrotask，之后会执行所有的microtask

http

  • 建立连接：3次握手，C发送建立连接请求，S发送接受连接，C发送确认接受连接
  • 释放连接：4次握手，C发送释放请求，S发送确认，S发送释放请求，C发送确认
  • 请求报文：3个部分，请求行（请求方法，协议版本，url），请求头（ua，accept），请求数据（post中数据）
  • 响应报文：3个部分，响应行（状态码），消息头（content，date）, 响应数据
  • 状态码：200 301（永久重定向get head 其他308） 304（没修改） 307(暂时重定向) 308（永久重定向） 400（bad请求） 401（没权限） 403（禁止） 404（没找到） 500（服务错误） 502（网络错误） 504（网络超时）
  • content-type: text/html text/css text/json-p text/plain（纯文本如base64）| image/XXX | application/json application/pdf application/javascript application/x-www-form-urlencoded | audio/xxx | video/xxx | multipart/form-data （表单上传文件）
  • text/javascript（废弃） - application/x-javascript（实验） - application/javascript(标准)
  • 简单请求：就是html form可以发出的请求（HEAD,GET,POST）Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
  • 非简单请求：就是不能用form发出的，如PUT,DELETE等。CROS在处理非简单请求时，浏览器会先发送预检请求到服务器询问是否允许CROS，如果允许再发送正式请求
  • 跨域：jsonp 只支持get方式 / cros Access-control-Allow-origin / postMessage
  • form表单无跨域问题：form提交之后页面会跳转到另外的页面，之前的页面无法获取新页面内容。和src跳转差不多。
  • 浏览器同源策略：禁止的是js脚步的是获取未经允许的页面内容，并不禁止向其页面发送请求。
  • cookie 设置httponly，禁止js读取cookie来防止xss
  • get/post： get 一次tcp请求，post 2次tcp请求（header,data）
  • keep-alive : 减少tcp建立连接次数提高吞吐率，但是需要设置timeout，避免资源浪费
  • 强缓存：Cache-control Expires
  • 协商缓存：Last-Modified Etag （304）需要一次和服务器通讯
  • from disk cache : 都属于强缓存, 初次访问 若js,img,css缓存，则from disk
  • from memory cache : 刷新页面，没有关闭浏览器窗口，相关数据在浏览器缓存，则from memory
  • https：在http和tcp之间增加了一层SSL安全层，加密，认证
  • http2.0：
    • 1、新增二进制格式，1.1是基于文本解析的，表现形式有很多。二进制只认0/1，包含所有场景
    • 2、header压缩
    • 3、服务端推送
    • 4、多路复用，一个连接承载多个request

web安全

  • csrf: 原理：用户打开A网站，未关闭浏览器打开了B网站，B网站使用用户在A网站的cookie向A网站发起了恶意请求，cookie是用户在A网站正常的cookie，被A网站信任，进而执行了恶意请求。防御：根据referer禁止第三方请求/请求添加token校验
  • xss: 原理：注入恶意代码，在访问页面时被执行。反射型：一次性攻击，通过诱导转改过的恶意连接来攻击。存储型：恶意代码存储在数据库，用户每次访问都会被攻击，容易造成蠕虫。防御：连接校验，转入输入输出
  • CSP：内容安全策略

browser

  • 1）输入url之后：DNS解析 / TCP 3次握手 / 发送请求 解析url / 服务器返回html / 浏览器渲染 html->DOM树 css->Style树 结合生成渲染树，layout布局，GPU绘制
  • 2）这里的优化，DNS缓存/keep-alive/gzip/虚拟dom
  • 3）重绘（repaint）：不影响布局的元素更新，影响较小。回流(reflow)：尺寸结构发送变化后需要渲染页面（窗口变化，元素位置大小，字体，添加删除元素） 减少dom删减，使用字符串或者documentFragment requestAnimationFrame
  • 4）内存泄漏：定时器/闭包/dom引用

浏览器兼容

android : 在解析有小数字号的时候不准确，`line-height == height` 无法居中

ios: focus()方法必须由用户主动触发，不能放在回调中执行，nextTick(先隐藏） , setTimeout（动画）

性能优化

压缩，gzip，svg sprite，浏览器缓存，本地存储，CDN，虚拟DOM，repaint/reflow，防抖/节流，按需加载。。。

  • dom: 1):缓存dom 2):减少重绘与回流 3):documentFragement 4):减少计算属性的访问，offsetTop 5): 事件委托，避免大量事件绑定
  • 图片: base64 png jpg svg sprite
  • 缓存: 1）:浏览器缓存 2）:CDN缓存 3）:服务器缓存 4）:数据缓存

Vue+Vuex+Vue-router

hash / history / abstract(非浏览器环境) 父子路由，路由按需加载， vuex modules

  • 生命周期): beforeCreate created beforeMount mounted beforeUpdate Updated beforeDestroy destroyed activated deactivated errorCaptured serverPrefeth

  • Vue 高阶组件（HOC）：传入一个组件，返回一个组件，不渲染真实DOM，如：transition / keep-alive / 防抖节流组件

  • Vue 函数式组件（无状态组件）：functional 给定相同输入，总是相同输出，不触发任何生命周期，只是函数，渲染开销小，效率高 高阶组件用于复用，函数式组件用于渲染

  • 新属性）: $attr $lisentioner 可以用vm.访问父组件非prop传入的特性（class,style除外）/访问父组件v-on的事件监听器（.native除外）

  • nextTick）: 默认是microtask , 默认是通过promise来实现的

  • Vue Dom更新）: 维护一个观察者队列，通过waiting标识位，将更新DOM的方法只flushSchedulerQueue会被push到nextTick回调一次

  • Vuex原理）：通过Vuex.mixin 在所有组件beforeCreate注入了一个this.$store对象，通过new Vue(state)的方式将state数据进行双向绑定 | 对数据的调用其实this._vm._data.?state

git

git add -p 
git checkout -b 
git merge
git config --list 
git config add xxx:YYY  
git config credential.helper manager
git reset --hard
git remote prune origin 
//submodule
git submodule add xxx.git xxx
git clone yyy.git subtest --recurse-submodules   //会把submoudule也拉取下来
git clone yyy.git && git submodule update --init --recursive  //也可以分2步拉取
//服务端git
git config --global credential.helper store
git config --global user.name  xx
git config --global user.email xxx

也可以配置私钥，免密拉取

nginx

  • nginx -s stop / nginx -s reload
    调优:
  • worker_processes (进程) / worker_cpu_affinity （利用多核cpu）/ worker_rlimit-nofile 65535(单个进程打开最多文件,与ulimit -n一致)
  • epoll事件模型，效率高 / sendfile on (开启高效文件传输) / keepalive-timeout 30 (保持回话连接超时事件)
  • gzip 开启压缩 / expires (静态资源缓存)
  • ssi (nginx 模块，类SSR)/ log_format (日志)/ proxy_pass （转发）

Docker

  • image: 镜像就是文件系统
  • docker: 基于linux容器上层的一种封装，方便移植，复制
  • 重启配置和docker
sudo systemctl start docker

/usr/lib/systemd/system/docker.service
/etc/docker/daemon.json 

sudo docker login --username=xxx aaa.bbb.com
sudo docker build --network=host -t aaa.bbb.com/xxx/xxx:latest ./
sudo docker images
sudo docker push aaa.bbb.com/xxx/xxx:latest

运维

  • 命令： | rz / sz (上传下载) | ps aux （进程） | tar （打包） | tcpdump （tcp 流量） | rpm （安装情况） | ethtool （网卡） | watch （网络数据）| pwdx （进程号目录） | sar （磁盘io）| ulimit (单进程限制)
avatar
文章
阅读
粉丝