1.0.1 • Published 8 months ago
common-frame-template v1.0.1
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://www.345tool.com/
- 颜色转换:
- svg 转 iconfont:https://icomoon.io/app/#/select
- pdf 工具:https://tools.pdf24.org/zh/
- websocket 在线测试:http://coolaf.com/tool/chattest
- 图片压缩工具:https://tinypng.com/
- 开发简历模板:https://www.developers.pub/resume
- 前端导航页:
- 在线工具箱:https://tool.lu/
- Vue 全家桶:https://vue3js.cn/
学习网站 (部分)
- 知乎热门技术分享:https://toutiao.io/c/fe
- 阮一峰的个人网站:http://www.ruanyifeng.com/home.html
- js 教程:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
- lodash 库:https://www.lodashjs.com/
- 深入了解 V8 引擎:https://zhuanlan.zhihu.com/p/27628685
- 后台管理系统模板:https://mp.weixin.qq.com/s/5vJ12DnT3b6O4Q847tgYRw
- webpack 配置详解:https://juejin.cn/post/7023242274876162084
- 前端面试篇:https://blog.poetries.top/FE-Interview-Questions/docs/base.html#%E5%A6%82%E4%BD%95%E4%B8%8Ehr%E8%B0%88%E8%96%AA%E8%B5%84
ES module(import
) 和 CommonJS module(require
)的区别
- ES module 是值的引用 CommonJS module 是值的拷贝
- CommonJS 模块是运行时加载,ES6 模块是编译时加载
- CommonJS 模块是同步加载,ES6 模块是异步加载,
性能优化
- 图片优化:
- 用户体验优化,逐步加载图片:
- 图片懒加载:使用统一占位符(加 loading 效果、骨架屏方案等)
- 使用 LQIP(低质量图像占位符):加载先使用低分辨率图片,后使用高分辨率图片替换
- 使用 SQIP(基于 svg 的图像占位符)
- 图片服务器自动优化解密
- 用户体验优化,逐步加载图片:
- DOM 优化
- 对 DOM 节点的操作统一处理后再加入到 DOM Tree 中
- 尽量不使用 DOM 操作,可以使用 DocumentFragment (文档片段,相当于一个存放 DOM 的仓库,可将需要更新的 DOM 当如一次性更新)
- 延迟加载即将呈现的内容
- 删除 DOM 前要取消监听该 DOM 的事件
- vue,react 都有虚拟 DOM,通过 diff 算法简化和减少 DOM 操作
- html 优化(页面渲染优化)
- 减少 html 嵌套
- 减少 DOM 节点数
- 减少无意义代码
- 删除 http 或 https
- 删除无意义的代码和注释
- 省略多余的标签和属性
- 使用相对路径
- css 放页面头部,JavaScript 放 html 底部:
- JavaScript 的渲染、加载、解析会阻塞 DOM,而 CSS 的加载不会阻塞 DOM 解析,但会阻塞 DOM 树渲染,也会阻塞 js 执行,css 放在头部可以减少浏览器重排次数,如果放在底部,会出现白屏,影响用户体验
- css 优化
- css 优化:
- 减少 css 嵌套层数:css 的解析顺序是从右到左
- 使用 class 和 id 选择器,不使用元素选择器
- 减少 expensive 属性的使用,如 nth-child,position:fixed 等
- 避免使用占用 cpu 和内存较多的属性,比如 text-indent
- 减少使用耗电量多的属性,比如 css3 3d transform
- 尽量不使用 css 表达式
- 渲染动画时开启硬件加速(GPU 加速)
- 减少回流和重绘
- 减少回流和重绘:
- 使用 absolute 定位,使元素脱离文档流
- 避免使用 table 布局
- 尽量不使用 float 布局
- 图片设置 width 和 height
- 设置屏幕缩放级别用 viewport
- 避免频繁设置样式,最好把样式设置完成后再一次性更改
- 简化浏览器不必要的任务,减少重新布局
- 避免使用 css 表达式
- 避免使用会引起回流/重绘的属性,把相应变量缓存起来
- 合并对多次 DOM 的操作,改为批量操作
- 减少绘制区域范围,减少绘制开销大的属性的使用
- 提升 css 文件加载性能:
- 使用外链 css
- 尽量避免使用@import
- 字体部署在 CDN 上 (iconfont)
- 将字体以 base64 形式保存在 css 中并使用 localStorage 进行缓存(iconfont)
- css 优化:
JavaScript 优化
- js 函数保持简洁,单一职责原则
- 使用事件委托
- 防抖、节流处理
- 减少 js 动画,使用 css 动画和 canvas 动画
- 合理使用 requestAnimationFrame 代替 setTimeout 和 setInterval
合理使用缓存
cookie/sessionStorage/localStorage/indexedDB
长列表使用虚拟列表优化
- 使用可缓存的 ajax 请求
如果 js 文件中没有 DOM 操作,可以将 JavaScript 脚本设置为异步加载,用 async 或 defer 标记代码
<script async type="text/javascript" src="test.js"></script> <script defer type="text/javascript" src="test.js"></script>
音视频优化
- 音视频压缩
- 使用合适的音视频格式
协议 传输层协议 应用领域 优缺点 HTTP-FLV TCP 直播/点播 兼容性好,低延迟,保密性不强 HLS TCP 点播 Apple 支持度高,移动端兼容性好,但延迟较高 RTMP TCP 直播 Adobe 支持度高,低延迟,但有累积延迟 RTMFP UDP 直播 带宽消耗低,数据传输速率高,需 Flash Player 支持 RTSP+RTP TCP+UDP IPTV 支持组播,效率高,存在丢包问题,浏览器里不支持
视频懒加载:设置 preload 为 none,浏览器不会预加载任何视频数据
<video controls preload="none"> <source src="路径.webm" type="video/webm"></source> <source src="路径.mp4" type="video/mp4"></source> </video>
移除多余音轨信息:增加 muted 属性,有助于减少视频体积
<video muted></video>
移除不必要的视频:在不需要使用视频的时候去掉视频,比如小屏幕可以通过媒体查询去掉视频展示
@media screen and(max-width:650px){ #video{ display:none; } }
静态文件优化
- 压缩工具:html-minifier、clean-css、uglify-js、uglify-es
- 静态文件打包:
- 公共组件拆分
- 压缩 html、css、js、图片
- 合并 css/js 文件,雪碧图
- 打包构建优化
- 打包工具:
- Grunt:最早的打包工具,一个项目需要定制多个小任务和引用多个插件
- Gulp:通过流来简化多个任务的配置和输出,配置代码较少
- Webpack:预编译,文件在内存中处理,支持多种模块化(commonjs,amd,umd),配置简单
- Vite:esm 编译
- 升级版本(webpack)
- 缩小文件搜索范围
- 后缀列表要尽可能的短
- 频率越高的文件后缀要写在最前面,保证最快速度找到文件
- 写入导入语句时,最好要带上后缀,可以避免以上的查找过程
- 多进程、多线程的打包
- 区分环境:webpack4 开始,通过 mode 参数区分开发、生产环境
- 压缩代码:包括 HTML,CSS,Javascript,图片字体等资源的压缩
- 使用 tree shaking:ree shaking 可以帮助移除项目中的无用代码,通过 package.json 的 sideEffects 属性实现
- 开启 bundleAnalyzer:使用 webpack-bundle-analyzer
- 分包加载:通过 splitChunks 配置实现
- 开启 HMR:通过 webpack-dev-server 的 hot 属性实现
- 使用 CDN:CDN 又叫内容分发网络,通过把资源部署到不同的城市,用户在访问时优先访问地理位置最近的服务器,从而加速资源获取速度,一般静态资源适合放在 CDN
- 设置 devtool:不同的 devtool 存在性能差异,开发环境最佳为 eval-cheap-module-source-map
- 打包工具:
浏览器优化
- webview 启动过程: 在 app 首次打开时没有启动浏览器内核的,只有在创建 webview 内核的时候,才会启动浏览器内核(70-700ms),并创建 webview 的基础框架
使用全局 webview 优化,在客户端刚启动的时候就创建一个全局 webview 待用,隐藏。当用户访问 webview 时,直接用 webview 加载对应网页并显示:
减少首次打开webview的时间,但会增加内存开销
url 预加载,从所有准备好再请求页面到准备和请求页面同时进行,URL load 和动画并行加载
接口优化
- 接口合并,减少页面请求数
- 接口上 CDN,可以把不需要实时更新的接口同步至 CDN,等此接口内容变更后再同步至 CDN 集群中,如果一段时间内未请求数据,会用源站接口继续请求
- 接口域名上 CDN,增强可用性、稳定性
- 接口降级,核心业务用接口降级,用基础接口进行实现,比如大促的推荐接口,在大促时间点可以直接运营编辑的数据。另外接口如果无法访问,使用预设好的垫底备份数据
- 接口监控,监控接口成功率,比如弱网、超时、网络异常、网络切换等情况,排查出问题要结合后端、测试运维一起解决
- 接口监控
- 接口缓存优化策略
- ajax/fetch 缓存:前端请求时带上 cache,依赖浏览器本身缓存机制
- localstorage、sessionstorage 本地缓存
- 多次请求,在弱网、超时等异常情况需要
同构直出
- 一套代码既可以在服务端运行又可以在客户端运行,这就是同构
- 优点:
- 性能:降低首屏渲染速度
- 服务端渲染在 SEO 层面有天然优势
- 可以有效避免客户端兼容性问题,比如白屏
- 直接上线 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 命令
1.0.1
8 months ago