前端

目录-入口-由此开始-大纲-总览-概括-枢纽-指导-指引-总领 教程-指南-路线

梗概

• 这里指前端Web应用程序
  • 保存在用户电脑上的浏览器中
    • 消耗的使用用户的电脑性能，而不是服务器的
• 通常由后端部署到客户端的浏览器中

适用范围：

作用

• 前端Web应用主要负责展示和交互，包括：
  • 设计和实现用户界面
  • 处理用户的输入和事件，即交互
  • 与后端Web应用进行数据交互
  • 负责浅显简单的业务程序

技术栈

基本概念

• child::HTML
• child::JavaScript
• child::CSS
• child::WebAssembly

交互

child::实现动画的主流方式 child::路由

模块化

• child::多文件_模块编程
• child::Web component

上层技术

• child::前端框架
• child::JavaScript框架
• child::eleventy

部署

child::部署web APP

测试

child::Test Runner child::运行时测试

性能优化

child::

前端优化

前端 base:: 优化程序

执行优化

减少请求次数

懒

• child::图片懒加载

缓存

• child::http缓存
• use::函数缓存

不用

• use::图标字体

合并

• use::精灵图

提高请求速度

质量

• child::CDN

压缩——从形式上缩小

• child::压缩静态资源
• child::压缩网页源文件

按需——从内容上缩小

• child::代码分割
  • child::路由懒加载
• child::按需加载第三方库

减少客户端性能开销

转移计算位置

• child::SSR 服务端渲染

优化

• child::减少回流和重绘
• child::事件委托

减少运算

• child::防抖节流

VUE优化

child::

vue减少性能开销

前端

减少组件更新

• child::保持props稳定性
• 尽量多使用Vue v-once命令
• child::保持computed复杂数据稳定性

优化更新

• 使用Vue html遍历命令时添加 Vue key属性

缓存

• child::Vue keep-alive缓存标签
• 合理选用Vue html标签选择命令 v-if v-show

可视区域优化

• child::大型虚拟列表

减少响应式开销

• 使用浅层响应式对象

指向原始笔记的链接

React优化

child::

性能优化

• React
• father::react
• child::避免组件重复渲染
• child::组件懒加载
• child::代码分割
• use::防抖节流
• child::虚拟列表
• child::react原生内置优化

指向原始笔记的链接

提高客户端效率

异步

• 使用web worker
• child::资源预加载

释放性能

• child::前端GPU加速渲染

优化用户等待体验

• child::加载动画
• child::CSS比js先加载

性能评测

child::

前端性能评测

生产环境下

child::生产环境性能监控

开发环境下

性能功能参考  |  DevTools  |  Chrome for Developers Chrome DevTools Performance 功能详解 - 掘金

指向原始笔记的链接

指向原始笔记的链接

常用类库

child::

第三方类库 插件

界面

1. 轮播图：

1. child::Swiper

指向原始笔记的链接

实际应用

• child::查看网站在浏览器中保存的内容

常见的业务需求

child::常见的前端业务需求 child::图标

调试

child::开发者工具

相关信息获取渠道

child::前端大佬高质量文章