前端学习笔记01

169 阅读6分钟

1. 推荐一个高效、小巧的模板引擎

模板引擎 doT.js 快速,小巧且毫无依赖,源js文件只有140行

2. 前端是如何评估网页性能的 有什么指标

chrome 开发团队提出了一系列用于检测网页性能的指标(核心 web 指标 谷歌制定的指标学习)

3. 通俗的讲解内存溢出和内存泄漏

内存溢出

一般是指执行程序时,程序会向系统申请一定大小的内存,当系统现在的实际内存少于需要的内存时,就会造成内存溢出。内存溢出造成的结果是先前保存的数据会被覆盖或者后来的数据会没地方存

内存泄漏

内存泄漏是指程序执行时,一些变量没有及时释放,一直占用着内存 而这种占用内存的行为就叫做内存泄漏。 作为一般的用户,根本感觉不到内存泄漏的存在。真正有危害的是内存泄漏的堆积,这会最终消耗尽系统所有的内存。从这个角度来说,一次性内存泄漏并没有什么危害,因为它不会堆积。

内存泄漏如果一直堆积,最终会导致内存溢出问题

4. 关于前端基建工作,一般都考虑哪些方面的建设

脚手架工具

开发和维护一个通用的脚手架工具,可以帮助团队快速初始化项目结构、配置构建工具、集成常用的开发依赖等

组件库

开发和维护一个内部的组件库,包含常用的UI组件、业务组件等,提供给团队成员复用,减少重复开发的工作量。

技术选型和评估

定期评估和研究前端技术的发展趋势,选择适用的技术栈和框架,以保持项目的竞争力和可持续发展

构建工具和打包工具

搭建和维护一套完善的构建和打包工具链,包括使用Webpack、vite rollup parcel等工具进行代码的压缩、合并、打包等工具,优化前端资源加载和性能

代码质量工具

引入代码质量工具,如ESLint、TSLint、Prettier等,对代码进行静态分析和格式化,提高代码的一致性和可读性

自动化测试工具

引入自动化测试工具,如Jest、Mocha等,编写和维护测试用例,进行单元测试、集成测试、UI测试等,提高代码质量和可靠性

文档工具

使用工具如JSDoc、Swagger等,生成项目的API文档、接口文档等,方便团队成员查阅和维护

使用工具如Docusaurus、VuePress等,为项目生成漂亮的文档网站,方便团队成员查阅和维护项目文档

Git工作流

制定和规范团队的Git工作流程,使用版本控制工具管理代码,方便团队协作和代码回退。

持续集成和部署

搭建持续集成和部署系统,如Jenkins、Travis CI等,实现代码的自动构建、测试和部署,提高开发效率和代码质量

性能监控和优化

引入性能监控工具,如Lighthouse、Web Vitals等,对项目进行性能分析,优化网页加载速度、响应时间等

使用工具如WebPageTest、Chrome DevTools等,对项目进行性能分析和优化,提高页面加载速度、响应时间等

针对移动端应用,可以使用工具如React Native Performance、Weex等,进行客户端性能优化,提高应用的响应速度和流畅度

缓存管理

考虑合理利用浏览器缓存和服务端缓存,减少网络请求,提升用户访问速度和体验。

前端缓存方案 建议使用 (localForage 中文文档 (docschina.org))

移动端适配

针对移动端设备,采用响应式设计或使用CSS媒体查询等技术,实现移动端适配,保证页面在不同尺寸的设备上有良好的显示效果---rem、viewreport、transform

移动端调试工具

使用工具如Eruda、VConsole等,帮助在移动端设备上进行调试和错误排查,提高开发效率。

错误监控和日志收集

  1. 引入错误监控工具,如Sentry、Bugsnag等,实时监控前端错误,并收集错误日志,方便进行问题排查和修复
  2. 使用日志分析工具,如ELK(Elasticsearch、Logstash、Kibana)等,对前端日志进行收集和分析,了解用户行为和页面异常情况
  3. 引入前端日志记录工具,如log4javascript、logrocket等,记录前端应用的运行日志,方便排查和解决问题
  4. 引入前端监控工具,如Google Analytics、百度统计等,收集用户访问数据和行为信息,用于分析和优化用户体验
  5. 制定容灾方案和故障处理流程,对前端应用进行监控和预警,及时处理和恢复故障,提高系统的可靠性和稳定性

Mock数据和接口管理

搭建一个Mock服务器,用于模拟后端接口数据,方便前端开发和测试,同时可以考虑使用接口管理工具,如Swagger、YApi等,方便接口的定义和调试。

工程化规范

制定并推广团队的代码规范、目录结构规范等,提高代码的可读性、可维护性和可扩展性。

前端培训和知识分享

建立一个内部的项目文档和知识库,记录项目的技术细节、开发经验、常见问题等,方便团队成员查阅和学习

组织定期的前端培训和技术分享会,让团队成员相互学习和交流,推动技术的共享和提升。

自动化部署

配置自动化部署流程,将项目的代码自动部署到服务器或云平台,减少人工操作,提高发布效率和稳定性

安全防护

对项目进行安全审计,使用安全防护工具,如CSP(Content Security Policy)、XSS过滤等,保护网站免受常见的安全攻击

对前端应用进行安全加固,如防止XSS攻击、CSRF攻击、数据加密等,保护用户数据的安全性和隐私

前端代码扫描

使用静态代码扫描工具,如SonarQube、CodeClimate等,对前端代码进行扫描和分析,发现潜在的问题和漏洞