1.0.1 • Published 8 months ago

common-frame-template v1.0.1

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
8 months ago

test-plugin

node--pakeage.json to Vue

内容：

  • version 表明了当前的版本
  • name 设置了应用程序/软件包的名称
  • description 是应用程序/软件包的简短描述
  • main 设置了应用程序的入口点
  • private 如果设置为 true ，则可以防止应用程序/软件包被意外地发布到 npm
  • scripts 定义了一组可以运行的 node 脚本
  • dependencies 设置了作为依赖安装的 npm 软件包的列表
  • devDependencies 设置了作为开发依赖安装的 npm 软件包的列表
  • engines 设置了此软件包/应用程序在哪个版本的 Node.js 上运行
  • browserslist 用于告知要支持哪些浏览器（及其版本）

TODO tree

合理利用 TODO 做测试，格式： // TODO 内容 测试代码 //实际代码（先注释，等打包发布的时候将测试代码注释，这段代码开启）

实用工具函数

https://zhuanlan.zhihu.com/p/113385396?hmsr=toutiao.io&utm_campaign=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

实用前端工具

学习网站 (部分)

ES module（import） 和 CommonJS module（require）的区别

  • ES module 是值的引用 CommonJS module 是值的拷贝
  • CommonJS 模块是运行时加载，ES6 模块是编译时加载
  • CommonJS 模块是同步加载，ES6 模块是异步加载，

性能优化

  • 图片优化:
    1. 用户体验优化，逐步加载图片:
      • 图片懒加载：使用统一占位符(加 loading 效果、骨架屏方案等)
      • 使用 LQIP(低质量图像占位符)：加载先使用低分辨率图片，后使用高分辨率图片替换
      • 使用 SQIP(基于 svg 的图像占位符)
    2. 图片服务器自动优化解密
  • DOM 优化
    1. 对 DOM 节点的操作统一处理后再加入到 DOM Tree 中
    2. 尽量不使用 DOM 操作，可以使用 DocumentFragment (文档片段，相当于一个存放 DOM 的仓库,可将需要更新的 DOM 当如一次性更新)
    3. 延迟加载即将呈现的内容
    4. 删除 DOM 前要取消监听该 DOM 的事件
    5. vue，react 都有虚拟 DOM，通过 diff 算法简化和减少 DOM 操作
  • html 优化(页面渲染优化)
    1. 减少 html 嵌套
    2. 减少 DOM 节点数
    3. 减少无意义代码
    4. 删除 http 或 https
    5. 删除无意义的代码和注释
    6. 省略多余的标签和属性
    7. 使用相对路径
    8. css 放页面头部，JavaScript 放 html 底部：
      • JavaScript 的渲染、加载、解析会阻塞 DOM，而 CSS 的加载不会阻塞 DOM 解析，但会阻塞 DOM 树渲染，也会阻塞 js 执行，css 放在头部可以减少浏览器重排次数，如果放在底部，会出现白屏，影响用户体验
  • css 优化
    1. css 优化：
      • 减少 css 嵌套层数：css 的解析顺序是从右到左
      • 使用 class 和 id 选择器，不使用元素选择器
      • 减少 expensive 属性的使用，如 nth-child,position:fixed 等
      • 避免使用占用 cpu 和内存较多的属性，比如 text-indent
      • 减少使用耗电量多的属性，比如 css3 3d transform
      • 尽量不使用 css 表达式
      • 渲染动画时开启硬件加速(GPU 加速)
      • 减少回流和重绘
    2. 减少回流和重绘：
      • 使用 absolute 定位，使元素脱离文档流
      • 避免使用 table 布局
      • 尽量不使用 float 布局
      • 图片设置 width 和 height
      • 设置屏幕缩放级别用 viewport
      • 避免频繁设置样式，最好把样式设置完成后再一次性更改
      • 简化浏览器不必要的任务，减少重新布局
      • 避免使用 css 表达式
      • 避免使用会引起回流/重绘的属性，把相应变量缓存起来
      • 合并对多次 DOM 的操作，改为批量操作
      • 减少绘制区域范围，减少绘制开销大的属性的使用
    3. 提升 css 文件加载性能：
      • 使用外链 css
      • 尽量避免使用@import
      • 字体部署在 CDN 上 (iconfont)
      • 将字体以 base64 形式保存在 css 中并使用 localStorage 进行缓存(iconfont)

  • JavaScript 优化

    1. js 函数保持简洁，单一职责原则
    2. 使用事件委托
    3. 防抖、节流处理
    4. 减少 js 动画，使用 css 动画和 canvas 动画
    5. 合理使用 requestAnimationFrame 代替 setTimeout 和 setInterval

    6. 合理使用缓存

      •  cookie/sessionStorage/localStorage/indexedDB

    7. 长列表使用虚拟列表优化

    8. 使用可缓存的 ajax 请求

    9. 如果 js 文件中没有 DOM 操作，可以将 JavaScript 脚本设置为异步加载，用 async 或 defer 标记代码

      •  <script async type="text/javascript" src="test.js"></script>
 <script defer type="text/javascript" src="test.js"></script>

  • 音视频优化

    1. 音视频压缩
    2. 使用合适的音视频格式
      • 协议传输层协议应用领域优缺点
        HTTP-FLVTCP直播/点播兼容性好，低延迟，保密性不强
        HLSTCP点播Apple 支持度高，移动端兼容性好，但延迟较高
        RTMPTCP直播Adobe 支持度高，低延迟，但有累积延迟
        RTMFPUDP直播带宽消耗低，数据传输速率高，需 Flash Player 支持
        RTSP+RTPTCP+UDPIPTV支持组播，效率高，存在丢包问题，浏览器里不支持

    3. 视频懒加载：设置 preload 为 none，浏览器不会预加载任何视频数据

      •  <video controls preload="none">
   <source src="路径.webm" type="video/webm"></source>
   <source src="路径.mp4" type="video/mp4"></source>
 </video>

    4. 移除多余音轨信息：增加 muted 属性，有助于减少视频体积

      •    <video muted></video>

    5. 移除不必要的视频：在不需要使用视频的时候去掉视频，比如小屏幕可以通过媒体查询去掉视频展示

      •   @media screen and(max-width:650px){
    #video{
      display:none;
     }
   }

  • 静态文件优化

    1. 压缩工具：html-minifier、clean-css、uglify-js、uglify-es
    2. 静态文件打包：
      • 公共组件拆分
      • 压缩 html、css、js、图片
      • 合并 css/js 文件，雪碧图
  • 打包构建优化
    • 打包工具：
      • Grunt：最早的打包工具，一个项目需要定制多个小任务和引用多个插件
      • Gulp：通过流来简化多个任务的配置和输出，配置代码较少
      • Webpack：预编译，文件在内存中处理，支持多种模块化(commonjs,amd,umd)，配置简单
      • Vite：esm 编译
    1. 升级版本(webpack)
    2. 缩小文件搜索范围
    3. 后缀列表要尽可能的短
    4. 频率越高的文件后缀要写在最前面，保证最快速度找到文件
    5. 写入导入语句时，最好要带上后缀，可以避免以上的查找过程
    6. 多进程、多线程的打包
    7. 区分环境：webpack4 开始，通过 mode 参数区分开发、生产环境
    8. 压缩代码：包括 HTML,CSS,Javascript,图片字体等资源的压缩
    9. 使用 tree shaking：ree shaking 可以帮助移除项目中的无用代码,通过 package.json 的 sideEffects 属性实现
    10. 开启 bundleAnalyzer：使用 webpack-bundle-analyzer
    11. 分包加载：通过 splitChunks 配置实现
    12. 开启 HMR：通过 webpack-dev-server 的 hot 属性实现
    13. 使用 CDN：CDN 又叫内容分发网络，通过把资源部署到不同的城市，用户在访问时优先访问地理位置最近的服务器，从而加速资源获取速度，一般静态资源适合放在 CDN
    14. 设置 devtool：不同的 devtool 存在性能差异，开发环境最佳为 eval-cheap-module-source-map

  • 浏览器优化

    • webview 启动过程： 在 app 首次打开时没有启动浏览器内核的，只有在创建 webview 内核的时候，才会启动浏览器内核(70-700ms)，并创建 webview 的基础框架

    1. 使用全局 webview 优化，在客户端刚启动的时候就创建一个全局 webview 待用，隐藏。当用户访问 webview 时，直接用 webview 加载对应网页并显示：

      •  减少首次打开webview的时间，但会增加内存开销

    2. url 预加载，从所有准备好再请求页面到准备和请求页面同时进行，URL load 和动画并行加载

  • 接口优化

    1. 接口合并，减少页面请求数
    2. 接口上 CDN，可以把不需要实时更新的接口同步至 CDN，等此接口内容变更后再同步至 CDN 集群中，如果一段时间内未请求数据，会用源站接口继续请求
    3. 接口域名上 CDN，增强可用性、稳定性
    4. 接口降级，核心业务用接口降级，用基础接口进行实现，比如大促的推荐接口，在大促时间点可以直接运营编辑的数据。另外接口如果无法访问，使用预设好的垫底备份数据
    5. 接口监控，监控接口成功率，比如弱网、超时、网络异常、网络切换等情况，排查出问题要结合后端、测试运维一起解决
    6. 接口监控
    • 接口缓存优化策略
    1. ajax/fetch 缓存：前端请求时带上 cache，依赖浏览器本身缓存机制
    2. localstorage、sessionstorage 本地缓存
    3. 多次请求，在弱网、超时等异常情况需要

  • 同构直出

    • 一套代码既可以在服务端运行又可以在客户端运行，这就是同构
      • 优点:
        1. 性能：降低首屏渲染速度
        2. 服务端渲染在 SEO 层面有天然优势
        3. 可以有效避免客户端兼容性问题，比如白屏
        4. 直接上线 2 个版本，便于灾备
  • 前端缓存

图片格式对比

1. jpg是有损压缩，png是无损压缩位图，文件比gif和jpg大，但是图像质量更好；gif是位图图形格式，采用LZW压缩算法进行编码，只支持完全透明和完全不透明图形；webp是一种现代图像格式，支持无损压缩和有损压缩

2. jpg不适合线条图形和文字、图标图形，压缩算法不支持这些图形；gif不适合存储彩色图片，因为只有8像素；webp图像质量好，体积小，采用8位压缩算法，不适合彩色图片

3. 使用场景，jpg适合颜色丰富图片，不规则的图形，彩色图大焦点图；png适合纯色透明线条绘图，图标；边缘清晰、有大块相同的颜色区域；gif适合图标，动画；webp适用于图形和半透明图像

控制 DOM 大小

页面交互卡顿和流畅度很大一部分原因在于页面有大量的DOM元素，比如在一个上万节点的DOM树上使用querySelectorAll或getElementByTagName方法查找节点，是一个耗时操作。另外元素绑定事件，事件冒泡和事件捕获也是耗时操作

git 部分实用命令

拉取代码

git init  //进行初始化
git remote add origin 代码仓库地址  //与远程代码仓库建立连接
git fetch origin dev（dev即分支名） //将远程分支拉到本地
git checkout -b LocalDev origin/dev (LocalDev 为本地分支名，dev为远程分支名)  //创建本地分支

或者直接

git clone url（url即代码地址）

远程代码强行覆盖到本地

git fetch --all
git reset --hard origin/dev  (dev为分支名)
git pull

修改本地关联的远程分支

git remote   //查看远程仓库名称
git remote get-url origin   //查看远程仓库地址
git remote set-url origin url  (url为需要关联的仓库地址)    //( 如果未设置ssh-key，此处仓库地址为 http://... 开头)

合并指定分支的指定文件（如向 B 分支合并 A 分支的 src/views/index.vue 文件）

git checkout B  // 先切换到B分支
git checkout A url  (url:src/views/index.vue 为文件的相对路径) // 直接切换A分支的文件路径

其他指令

git status   //查看项目状态，显示所有变更的文件
git add .   //添加所有修改文件到暂存区
git commit -m "message"    //提交说明（message: 说明内容）
git branch   //查看所有本地分支
git branch -r   //查看所有远程分支
git branch -a   //查看所有远程分支和本地分支
git branch name   //新建一个分支，但依然停留在当前分支（name：分支名）
git checkout -b name   //新建一个分支，并切换到该分支
git checkout -     //切换到上一个分支
git branch --set-upstream [branch] [remote-branch]    //建立追踪关系，在现有分支与指定的远程分支关联（branch：本地分支名，remote-branch：远程分支名）
git merge name    //合并指定分支到当前分支--本地（远程需在name前面加origin）
git branch -d name   //删除本地分支
git push origin --delete name    //删除远程分支
git pull    //拉取远程分支代码（若没关联远程分支则需要在后面加上 origin name）
git push    //提交代码
git reflog  // 撤销本次pull
git merge --abort // 撤销本次merge
git reset --hard [版本号]  // 回退到某个版本
git diff   //显示暂存区和工作区的差异
git commit -m "提交内容" --no-verify //跳过eslint验证

pnpm 命令

Alt text

common-frame-template
@element-plus/icons@element-plus/icons-vue@types/lodashalovaanimate.csselement-pluslodashmd5nprogresspiniaremixiconthreevantavuevue-croppervue-router
1.0.1

8 months ago