前端发展及选择

静水深流's blog

前端发展及选择 | 静水深流

2021-01-09 · via 静水深流's blog

现代框架(vue)对比JQuery的区别

数据和视图分离(解耦)
数据驱动视图，只关心数据变化

Vue与React两个框架的区别和优势对比

相似点

Virtual DOM
都鼓励组件化
都有Props思想
都有完善的构建工具
都有Chrome 开发工具来帮助调试区别：
vue鼓励用vue文件模版，react鼓励用JSX开发
vue是通过data属性来管理更新状态的，react则要是用setState来更新状态
学习曲线不同

你为什么使用前端框架

这篇文章open in new window讲的很好
其主要说的是前端框架存在的意义就是解决UI 与状态同步的问题；使用原生JS操作存在以下缺点：

频繁的操作DOM性能低效的
手动做容易产出错误；且大量的DOM操作；容易产生错误且不宜维护
原生 js 难以写出复杂、高效、又容易维护的 UI 代码那么在VUE中是如何保证 UI 与状态同步的呢？Vue 通过一个响应式系统保证了View与Modal的同步

js框架的发展

每一种框架的出现并且火热必然和当下的一些痛点息息相关，从一开始的Jquery的出现，就是为了方便的解决兼容性问题和操作DOM；但是随着浏览器和js的发展；兼容性已经越来越不需要在开发中考虑进去同时也出现了原生的方便操作DOM的方法；到现在的MVC/MVVM模式的出现，因为随着前端项目越来越复杂，前端如何解决UI与状态间的同步成为当代的痛点，而MVC/MVVM通过监听更改和虚拟DOM来帮助实现UI与数据的对应；下一代前端框架可能就是多端统一

简述模块化发展

模块化指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解后处理，模块化是使复杂系统的代码结构更合理，可维护性更高的可管理的模块的方式，是为了解耦软件系统的复杂性；

前期的发展：
- 直接定义依赖；缺点：产生大量的全局变量，一不小心就会导致冲突
- 命名空间模式；解决了遍地全局变量的问题；缺点：这种方式同样没有安全性，变量可以随意更改
- 闭包(IIFE)模块化模式;缺点：没有解决如何管理模块的问题，或者在使用时无法清晰描述出模块的以来关系
真正的模块化的出现(2009)
- CommonJS是服务器端模块的规范，是同步方案(打包工具webpack等可以实现浏览器端的支持)
- AMD(requireJS)&CMD(SeaJs)是浏览器端的模块化，异步方案，按需加载；AMD&CMD区别
- Umd是AMD和CommonJS的集合
```
(function (window, factory) {
  if (typeof exports === 'object') {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  } else {
    window.eventUtil = factory();
  }
  })(this, function () {
      //module ...
  }
);
```
- ES2015 Modules是现代的模块化方案；在编译时就能确定模块的依赖关系
模块化展望;参考open in new window

未来的模块化肯定是在原生支持模块化的同时，分别增加对css和html的模块化，需要browser端的支持，而不是webpack/rollup 等构建工具的支持

简述微前端

针对复杂且大型的web前端分解成一些更小、跟简单、松耦合的能够独立开发部署的小应用，最常见的解决方案就是在运行是集成（ iframe、JS、Web Components ）：

代码库小，更内敛，易于维护于开发
松耦合且不受技术栈约束
可独立开发、部署

参考open in new window、框架:乾坤open in new window

图片方案选型

#	压缩方式	动画	透明度	兼容性	适应场景
JPEG/JPG	有损	不支持	不支持	所有	呈现色彩丰富的图片
PNG	无损	不支持	支持	所有	呈现小的 Logo、颜色简单且对比强烈的图片或背景等
GIF	无损	支持	支持	所有	呈现动画
SVG	无损	支持	支持	>IE8	图片由标准的几何图形组成，或需要使用程序动态控制其显示特效
webP	有损	支持	支持	chrome、opera	不考虑兼容

前端性能优化

构建优化
- webpack打包优化
- 代码按需加载
- 通过es6的module方法实现tree shaking
- 将hash替换为chunkhash实现缓存优化
请求优化
- 减少资源体积和数量
  - 服务器开启gzip
  - 小图标进行雪碧图、base64、字体图标等方式加载
  - 代码压缩
  - 域名分片(多域名)
- 减少重定向，如果无法避免可使用301来做永久重定向
- 静态文件使用CDN
  - 通过<link rel="dns-prefecth" href="https://www.**.com">进行DNS预解析
  - 域名拆分,主要是为了增加浏览器下载的并行度
- 开启KeepAlive减少与服务器建立链接的次数或启用http2.0
- 启用缓存功能
资源优化
- 可以添加骨架屏
- 较少资源请求次数
  - 雪碧图或者字体图标
  - css&js合并
- 资源加载位置优化
  - css放在head中
  - js放在尾部
- 资源加载时机优化
  - 异步script标签（defer、async）
  - 资源预加载参考open in new window、参考2
    - preload当前页资源预加载
    - prefetch下页资源预加载
  - 资源懒加载
- 图片优化
  - 雪碧图
  - 用字体图标的方式替代小图片
  - 图片压缩
  - 通过srcset设置响应式的图片,实现加载更合适的图片
  - 图片懒加载
- css优化
  - 减少重回和回流
  - 避免使用层级较深的选择器
  - 避免使用 css表达式
  - 给图片设置宽度和高度
  - 尽量不用table布局
  - 能用css实现的效果就不要用js
  - 通过content-visibility：auto优化长列表
- js优化
  - 缓存DOM选择
  - 批量操作DOM是考虑做优化
    - 使用DocumentFragment对象，让变化先发生在内存中
    - 先用字符串拼接然后统一innerHTML到页面
  - 事件代理
  - 对于频繁的出发操作增加防抖和节流
  - 即使清理不用的变量，避免内存泄漏
  - 选用更高效的API;比如requestAnimationFrame
- 接口缓存，例：对于一天内不会变更的数据可以缓存在localStorage;有效期一天
- 白屏时间
  - 骨架屏
  - 服务器渲染

工程化理解

模块化
组件话
自动化
代码和提交的规范化

小红包免费领

小礼物走一走

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

静水深流's blog