最近在做公司微前端,整理了一份微前端搭建清单,如果你正在考虑是否要做微前端,不妨做个参考。...为什么选择微前端 解决一个技术需求,有很多种方法,为什么选微前端? 我们看过微前端的发展史就会明白,它并不是凭空出现的,而是项目在不断发展过程中形成的,解决项目臃肿的技术方案。...微前端特点 微前端的核心是解决巨石应用,它都有这些特点: 简单、松耦合的代码库 微前端架构倾向于编写和维护更小、更简单、更容易开发的项目。 技术栈无关,各项目可以使用不同的技术栈。...有了技术方案之后,微前端这条路就可以走通了,除此之外,还需考虑过渡方案。 过渡方案 过渡方案指的是如何让微前端平滑上线。试想一下,如果在微前端改造时,项目来了新需求,这时应该怎么办?...思考与总结 本文从需求分析开始,一步一步理清了微前端需要注意的各种问题,以及一些解决方案,希望能对微前端感兴趣的你有所收获。
考虑添加 preconnect 或 dns-prefetch 资源提示以建立与重要第三方来源的早期连接。
前端代码审查清单是一个保证前端代码质量的审查清单。当我们在开发写代码的时候,总会各种各样的问题,自测的时候由于太熟悉自己的代码逻辑往往测试不够充分,无法发现问题。...前端代码审查清单就是为了解决这个问题!清单存放了一些常见的问题,当我们开发完成之后,对照清单思考一下这些问题在代码中是否遇到或者妥善处理,从而提高代码质量。...前端 前端安全 所有的用户可以在页面中输入信息的地方,是否做了防 XSS 以及特殊字符的过滤处理? 与后端接口交互,获取信息使用 GET 方式,传送信息使用 POST 方式。...前端也要判断接口是否返回合法、正确。 开发与 DOM 操作有关的代码时,是否对 DOM 不存在或者被人为修改的情况做处理? 获取数据和信息时,是否对类型做过处理和转换并设置为空时的默认值?...前端性能 JS 代码是否尽量放在底部?CSS 代码是否尽量放在了顶部? 是否部署 CDN 或者开启了缓存功能? 上线或者发布前,是否对静态资源进行打包、压缩处理?
前端代码审查清单是一个保证前端代码质量的审查清单。当我们在开发写代码的时候,总会各种各样的问题,自测的时候由于太熟悉自己的代码逻辑往往测试不够充分,无法发现问题。...前端代码审查清单就是为了解决这个问题!清单存放了一些常见的问题,当我们开发完成之后,对照清单思考一下这些问题在代码中是否遇到或者妥善处理,从而提高代码质量。...前端 前端安全 所有的用户可以在页面中输入信息的地方,是否做了防 XSS 以及特殊字符的过滤处理? 与后端接口交互,获取信息使用 GET 方式,传送信息使用 POST 方式。...前端性能 JS 代码是否尽量放在底部?CSS 代码是否尽量放在了顶部? 是否部署 CDN 或者开启了缓存功能? 上线或者发布前,是否对静态资源进行打包、压缩处理?...贡献 由于本人才疏学浅,部分场景没有覆盖,欢迎大家补充更多审查点,提高前端代码质量!
盘点出所有资源的清单( JavaScript 、图片、字体、第三方脚本和页面上开销较大的模块,例如轮播、复杂的信息图和多媒体内容),然后将它们按组细分。 可以根据以下方式设置分组。
下载清单(PDF,Apple Pages) 牢记此清单,您应该为任何类型的前端性能项目做好准备。...可以免费下载清单的打印 PDF 以及**可编辑的 Apple Pages 文档,**以根据您的需要定制检查表: 下载清单 PDF[78](PDF,166 KB) 在 Apple Pages 中下载清单[...79](.pages,275 KB) 下载 MS Word 中的清单[80](.docx,151 KB) 如果您需要替代方案,您还可以查看 Dan Rublic 编写[81]的前端[82]清单[83],...将此清单用作一般(希望是全面的)指南,并创建适用于您的情况的问题清单。但最重要的是,在优化之前测试和测量您自己的项目以确定问题。祝大家 2019 年有好成绩!...dl=0 [81] Dan Rublic 编写: https://github.com/drublic/checklist [82] 前端: https://github.com/thedaviddias
www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages[1] 翻译:龙朝忠 本翻译仅做学习交流使用,转载请注明原处 本文是性能优化清单系列第三篇...,可以先看看前边的文章: 2020前端性能优化清单(一) 2020前端性能优化清单(二) 构建优化 22 设置优先事项。...盘点出所有资源的清单( JavaScript 、图片、字体、第三方脚本和页面上开销较大的模块,例如轮播、复杂的信息图和多媒体内容),然后将它们按组细分。 可以根据以下方式设置分组。
www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages[1] 翻译:陈隆德 本翻译仅做学习交流使用,转载请注明原处 本文是性能优化清单系列第二篇...,可以先看看前面的文章: 2020前端性能优化清单(一) 资源优化 17 使用 Brotli 进行纯文本压缩 2015 年,Google推出了[2]Brotli[3],这是一种全新的开源无损数据格式,
这是一份年度前端性能优化清单,包含了当下创建web快速体验所需的一切。这份清单自2016年开始已经持续更新了5年。...这份清单得到了LogRocket的大力支持,LogRocket是一个前端性能监视解决方案,可帮助重现错误并更快地解决问题。 web性能是一头狡猾的野兽让人难以琢磨和处理,不是吗?...因此,如果我们要建立了一个包含性能优化所有要点的清单(从研发开始到网站最终上线),该清单会是什么样的呢?...您会在下面找到一份(希望它是没有偏见的和客观的)** 2020年前端性能优化清单** — 它包含您可能需要考虑性能的场景和优化手段的简介,以达到快速的响应时间,流畅的用户互动,以及网站不会浪费用户的带宽...01 建立性能优化的文化 在许多团队中,前端开发工程师都明确地知道那些常见的性能问题,以及使用何种加载方式能够解决这些问题。
当用户请求一个页面时,浏览器获取 HTML 构造 DOM,获取 CSS 构造 CSSOM,然后通过匹配 DOM 和 CSSOM 生成一个渲染树。只要需要解析 J...
研究哪些 JavaScript 引擎在你的用户群中占主导地位,然后探索对其进行优化的方法。例如,当针对 Blink 浏览器、Node.js 运行时和 Elect...
之前翻译过一篇文章,讲的是怎么使用好 Google 的,这一点我觉得非常重要,感兴趣的可以读下——【工具】像大佬一样使用 Google[3] Chrome 插件 这里给大家一个清单列表,都是我经常使用的...: FeHelper(前端助手)[4]。...这个我个人觉得前端必备。JSON自动格式化、手动格式化,支持排序、解码、下载等,更多功能可在配置页按需安装 Octotree - GitHub code tree[5]。...作为一名前端,我们需要经常跟协议中的应用层打交道,Mock 数据、跨域问题、cookie 的修改、移动端调试等等,都是我们必备的技能,而 whistle 就能解决其中 90% 的问题。...详情可以看我的另外一篇文章——前端应该知道的web调试工具——whistle[22] 终端 Mac 的终端界面是非常丑的,而且功能也不完善。
当前领导 or HR: 同学申请离职需要提前一个月申请,交接结束后才可以同意离职 本文这边准备如下前端项目离职交接清单,如果我们找到了新的工作需要准备哪些东西可以完美交接并快速离职~ 为什么要准备交接清单...假设你离职已然成为事实,领导和HR很少会特别去卡时间,其实更多的是希望新的人员可以完美接受你现有的工作,所以我们要准备好交接清单,让接手人员熟悉项目,快速成为曾经的你尤为重要。...交接清单(描述版) 辅助文档方面 项目代码地址; 用途:代码地址这个肯定是必需的,巧妇难为无米之炊; 项目接口文档地址; 用途:代码请求的后端接口地址,用于后续改参数,更换接口之类的需求;...如何发布到test、uat、pro等环境; 交接清单(清新版) 辅助文档方面 项目代码地址; 项目接口文档地址; 项目UI设计稿/原型地址/项目历史需求列表文档; 项目历史需求列表文档
这是 PaperDaily 的第29篇文章 [ 自然语言处理 ] Sockeye: A Toolkit for Neural Machine Translati...
开篇 本文参考文章《一名【合格】前端工程师的自检清单》, 并对其中的部分题目进行了解答,若有遗漏或错误之处望大家指出纠正,共同进步。(点击题目展开答案!) ?...此文章 Markdown 源文件地址:github.com/zxpsuper/bl… 一、JavaScript基础 前端工程师吃饭的家伙,深度、广度一样都不能差。 变量和类型 1....直至渲染完成,使用 window.requestAnimationFrame 和 document.createDocumentFragment() 实现, 可参考文章【如何解决页面加载海量数据而不冻结前端...可参考文章【大数据如何在前端流畅展示】,不过他的 Demo有点问题. 语法和API 1.
这是 PaperDaily 的第31篇文章 [ 自然语言处理 ] Knowledge Graph Embedding: A Survey of Approach...
对于 JavaScript,掌握其语法和特性是最基本的,但是这些只是应用能力,最终仍旧考量仍然是计算机体系的理论知识,所以数据结构,算法,软件工程,设计模式等基础知识对前端工程师同样重要,这些知识的理解程度...你对于前端架构的理解? 7. 你会用 VUE,你会用 React,你读得懂这两个架构的源码吗?你懂他俩的基本设计模式吗?让你去构建一个类似的框架你如何下手? 8....你是如何理解前端架构的?你了解持续集成吗? 17. 你了解基本的设计模式吗?举例单例模式、策略模式、代理模式、迭代模式、发布订阅模式。。。? 18. 写一个事件监听函数呗?...你真的理解前端吗? 作者:SuperX 原文链接:https://segmentfault.com/a/1190000018873042 推荐阅读 为什么现在面试总是面试造火箭?...群里提问的艺术 JavaScript 编程规范(一) 「一个有温度的前端号」
2019前端工程师自检清单 对于JavaScript,掌握其语法和特性是最基本的,但是这些只是应用能力,最终仍旧考量仍然是计算机体系的理论知识,所以数据结构,算法,软件工程,设计模式等基础知识对前端工程师同样重要...,这些知识的理解程度,可以决定你在前端工程师这条路上能走多远,是时候进行一波自检了,查漏补缺,只有全面发展,才会使你更强,以下会进行自问的形式按照图片里面的知识点进行自我check 知识点在面试过不下50...你对于前端架构的理解? 7.你会用VUE,你会用React,你读得懂这两个架构的源码吗?你懂他俩的基本设计模式吗?让你去构建一个类似的框架你如何下手?...16.你是如何理解前端架构的?你了解持续集成吗? 17.你了解基本的设计模式吗?举例单例模式、策略模式、代理模式、迭代模式、发布订阅模式。。。? 18.写一个事件监听函数呗?...26.你真的理解前端吗? ---- 有落下的方面,请在评论区写下您宝贵的看法,我会第一时间加入进来!!! 虽然有些方面还未补足,但是可以作为参考~
本文首发在我的博客:前端阿瓜每周速记(2020 第 34 周) 本瓜准备开始写这样的一个系列:《前端阿瓜每周速记》 用于记录每周或亲身经历、或道听途说、或意外所感的有关前端技术二三。 坚持一周一更!...撰文不易 点赞鼓励 本系列不会影响长篇输出,如“前端书签整理”、“TS 学习”、“Vue3 源码”等等,关注不迷路!...类型 回顾三种 XSS 类型: DOM 型(DOM XSS),即用户输入没有提交到服务器,只是被前端js接收并显示所引起的XSS。
《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集,主要分为以下几个板块: Highlights 优秀的工具、库 好的教程、深度解读已有技术的文章 业界最新的技术、热点文章...业界对(新)技术的深度地、优秀地实践 Tutorial Tools And Codes 《前端技术观察》的目的是让大家: 更及时的了解到业界最新的技术 受益于高质量的教程、文章 了解业界更优秀的代码、...venturebeat.com/2019/03/04/w3c-approves-webauthn-as-the-web-standard-for-password-free-logins/ 2019 年前端性能检查清单...现在通过在使用Jest进行测试的任何项目中运行npx majestic来立即尝试吧 https://github.com/Raathigesh/majestic/ Svelte: 一个新的前端框架(英)
领取专属 10元无门槛券
手把手带您无忧上云