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