前端开发 - 元视角

前端开发

聊一聊前端图片懒加载背后的故事博主通过采取一系列优化措施，成功将博客的首屏渲染时间从2.0 秒缩短到了 1.7秒。这些措施包括使用 CDN 加速、压缩图片、生成缩略图和采用懒加载技术。文章主要介绍了前端图片懒加载技术，解释了其概念、目的和实现方式。懒加载是一种通过延迟加载来优化网页性能的方法，尤其适用于图片较多的网页。文中介绍了三种实现懒加载的策略：监听滚动事件、使用 IntersectionObserver API 和利用浏览器原生的 `loading='lazy'` 属性。通过比较这三种方法的优缺点，作者推荐结合使用前两种方法以更精确地控制懒加载的细节。文章最后强调了懒加载在前端性能优化中的重要性，并提供了示例代码供读者参考。

懒加载 LazyLoad JavaScript 前端

2022-08-02

前端开发

支持外部链接跳转的 Vue Router 扩展实现 Vue Router 是 Vue 中重要的插件，特别在单页面应用中起着关键作用。随着页面概念逐渐消失，路由根据URL确定显示内容。文章介绍了处理内部和外部链接的问题，提出了在 Vue Router 基础上实现外部链接跳转的扩展思路。通过自定义组件 MyRouterLink，区分内部和外部链接并支持传递URL参数，解决了 Vue Router 不支持外部链接的问题。讨论了如何给出站链接携带令牌信息，通过指令或组件内部处理统一附加参数。最终强调了在项目中统一使用规范化组件的重要性。

前端 Vue 路由思考

2022-07-12

前端开发

Vue.js 前端项目容器化部署实践极简教程本文介绍了在「微雨燕双飞」的一天中，作者接到朋友询问前端容器化部署问题的电话。作者分享了使用 Docker 容器化部署前端项目的实践教程，以 Vue.js 为例。通过编写 Dockerfile 实现多阶段构建，包括使用 node.js 构建前端项目和部署到 Nginx 静态文件服务器等步骤。另外，还提及了 Nginx 的配置以及使用 OpenSSL 创建证书的过程。最后，作者鼓励读者根据教程进一步完善部署，并展望了未来将撰写关于 ASP.NET Core 测试的文章。

容器 Vue Nginx Envoy

2022-05-17

前端开发

在 Vue.js 中使用 Mock.js 实现接口模拟最近参与前端项目的作者反思了程序员少有机会写自己喜欢的代码，更多时候是为别人写代码。在谈到 Vue.js 结合 Mock.js 实现接口模拟这一话题时，指出它触及前后端分离的核心，并引出协同开发中的问题。讨论了前后端团队接口文档制定和假数据管理的挑战，以及 Mock.js 在解决这些问题上的作用。提到 Swagger 作为接口文档管理工具，推荐使用 Mock.js 来模拟前端调用后端接口，强调了在 Vue 中如何使用 Mock.js 实现接口模拟，以及如何通过 YAPI 或 Apifox 等工具管理 API 接口和 Mock。最后，勉励读者在项目中努力前行，引用古语“山不厌高，海不厌深”表达对追求更完美世界的理想。

Vue Mock 前端研发

2022-04-15

前端开发

百度地图加载海量标注性能优化策略本文讨论了物流行业城市配载功能的智能化和专业化，旨在为客户提供最优、最短时效和最高装载率路线的数学问题。文章以西安市为例，介绍了通过百度地图 API 在地图上加载大量标注进行性能优化的三种方案：标注物聚合、Canvas API和视野内可见。标注物聚合方案局限性明显，Canvas API方案虽然高效但交互复杂，最终视野内可见方案通过简化 DOM 结构和隐藏视野外覆盖物，有效解决了性能问题。文章最后提出了一些优化原则，如尽量使用 Marker 类、简化 DOM 结构、考虑使用聚合以及隐藏视野外覆盖物，以应对未来可能的挑战。

地图标注配载

2019-09-10

前端开发

zTree 删除/拖拽子节点保留父节点分组样式最近项目需要实现报表的自定义设置功能，选择了zTree插件来创建一个功能强大且美观的树形菜单。使用zTree的API简单，通过提供一个DOM节点和JSON数据就能渲染出树形菜单。作者介绍了如何结合节点的编辑、拖拽功能。发现了两个Bug并提供了解决方法。最后讨论了如何存储和获取树形结构的数据，通过递归遍历节点获取关键信息。作者强调前端开发集成到系统中的挑战。

JavaScript zTree 前端

2019-04-12

前端开发

分享两种实现前端拖拽排序的方案在这篇文章中，作者分享了在前端中实现拖拽排序的三种方案：Nestable、Sortable和HTML5原生方案。Nestable是基于jQuery的插件，虽支持分层列表但已不再维护，不建议在正式项目中使用；Sortable支持多框架，文档完善且易用，是更优的选择；HTML5原生方案利用拖放API实现，虽存在兼容性问题但在现今浏览器环境下可行。总结建议根据实际需求选择合适的方案。

前端 HTML5 拖拽

2019-03-31

分类：前端开发