weixin_33898876
weixin_33898876

前端开发清单

  • 原文地址：Front-End-Checklist
  • 原文作者：David Dias
  • 译者：JohnsenZhou
  • 文章地址：https://github.com/JohnsenZhou/Front-End-Checklist

前端清单





前端清单是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。

它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。

在Product Hunt上投票或推荐来帮助前端清单的推广?。

前端开发清单_第1张图片

目录

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Images
  6. JavaScript
  7. Security
  8. Performance
  9. Accessibility
  10. SEO

How to use?

前端清单中的所有项目都是大部分项目所必需的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下，你可能并不需要RSS订阅源)。我们选择使用一下3级区分:

  • Low 意味着该项目被推荐，但在某些特定情况下可以省略。
  • Medium 意味着该项目是强烈推荐的，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或SEO方面产生不良影响。
  • High 意味着项目不能被任何理由省略。你的页面可能会导致功能障碍或有可访问性或SEO问题。测试优先级需要首先考虑这些元素。

某些资源拥有特定的标识符，帮助你去理解清单上不同类型的内容或帮助。

  • ?: 文档或文章
  • ?: 在线工具/测试工具
  • ?: 媒体或视频内容

Head

注意: 你能在HTML文档的中找到所有的清单列表。

Meta 标签

  • [ ] Doctype: High Doctype是HTML5的属性，需要声明在HTML文件的顶部。

? Determining the character encoding - HTML5 W3C

接下来三个 meta 标签 (Charset, X-UA Compatible, Viewport) 需要首先在head中声明

  • [ ] Charset: High 正确声明Charset标签(UTF-8)。
  • [ ] X-UA-Compatible: MediumX-UA-Compatible 元标签。

? 指定旧文档模式(Internet Explorer).aspx)

  • [ ] Viewport: High 正确声明viewport标签。
  • [ ] Title: High 所有页面都使用title(SEO:包括网站标题不超过65个字符)。

Page Title less than 65 characters

? Title - HTML - MDN

  • [ ] Description: High 提供description标签， 它是唯一的同时内容不能超过150个字符。
  • [ ] Favicons: Medium 每个favicon都被创建并正确显示，如果你只有一个favicon.ico，把它放在你网站的根目录下。 通常来说你不需要做任何操作他就能正常显示。 然而, 使用一下示例中的方法是比较好的做法。不过现在我们推荐使用PNG格式，相比.ico格式有较好的优势(推荐尺寸: 32x32px)。
  • ? Favicon 生成器
  • ? RealFaviconGenerator
  • ? Favicon Cheat Sheet
  • ? Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS 技巧
  • ? PNG favicons - caniuse
  • [ ] Apple Touch Icon: Low 苹果设备favicon适配。 (创建至少200x200像素尺寸的Apple图标文件以支持你可能需要的用到的所有尺寸)

? 配置Web应用程序

  • [ ] Windows Tiles:Low Windows tiles are present and linked.

browserconfig.xml文件的最小所需xml标记如下所示:

? 浏览器配置模式参考.aspx)

  • [ ] Canonical: Medium 使用rel="canonical"以避免重复的内容。
  • ? Use canonical URLs - Search Console Help - Google Support
  • ? 5 common mistakes with rel=canonical - Google Webmaster Blog

HTML 标签

  • [ ] Language tag: High 指定你网站的语言标签并与当前页面语言相关联。
  • [ ] Direction tag: Mediumdirection属性规定元素内容的文本方向。(可以在另一个HTML标签上使用)。

? dir - HTML - MDN

  • [ ] Alternate language: Low 指定网站的语言标签并与当前页面的语言相关联。
  • [ ] 条件注释: Low 如有需要，可针对IE添加条件注释。

? 关于条件注释(Internet Explorer) - MSDN - Microsoft.aspx)

  • [ ] RSS feed: Low 如果你的项目是一个博客或者有大量的文章，可以添加一个RSS链接。
  • [ ] CSS Critical: MediumCSS critical收集并呈现当前页面可见部分的所有CSS。在主要的CSS调用之前以单行(最小化)在中嵌入。

? Critical by Addy Osmani on Github

  • [ ] CSS 顺序: High 所有CSS文件都需要在JavaScript文件加载之前加载完成(除了有时JS文件异步加载到页面之外的情况)。

Social meta

强烈推荐Facebook OG and Twitter Cards。如果你针对某些特定的存在并希望确保显示，也可以考虑其他社交媒体标签。

  • [ ] Facebook Open Graph: Low 所有Facebook Open Graph（OG）都经过测试并且没有任何错误。图片至少需要600 x 315像素，建议使用1200 x 630像素。
  • ? A Guide to Sharing for Webmasters
  • ? 使用Facebook OG testing测试你的页面。
  • [ ] Twitter Card: Low
  • ? Getting started with cards — Twitter Developers
  • ? 使用Twitter card validator测试你的页面。

⬆ 返回顶部

HTML

最佳实践

  • [ ] HTML5 Semantic Elements: High 正确的使用HTML5语义化标签(header, section, footer, main...).

? HTML 参考

  • [ ] Error pages: High 404页面和5xx错误的存在。5xx错误页面需要集成其CSS(在当前服务器上无外部调用)。
  • [ ] Noopener: Medium 如果你使用外部链接target="_blank", 你的链接必须有个rel="noopener"属性，防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器，请使用rel="noopener noreferrer"。

? 关于 rel=noopener

  • [ ] 清除注释: Low 在将页面发布到生产环境之前，应该删除不必要的代码。

HTML 测试

  • [ ] W3C 兼容: High 所有页面需要使用W3C验证器进行测试，以检测HTML代码中的可能存在的问题。

? W3C validator

  • [ ] HTML Lint: High 使用工具来帮助我们分析HTML代码中可能存在的问题。

? Dirty markup

  • [ ] Desktop Browsers: High 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。
  • [ ] Mobile Browsers: High 所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari...).
  • [ ] 链接检查器: High 页面中链接没有断开，请确认你没有404错误。

? W3C Link Checker

  • [ ] 广告拦截器测试: Medium 你的的网站会在启用广告拦截器的情况下正确显示页面内容(你可以提供一条消息，引导人们停用其广告拦截器)。
  • [ ] Pixel perfect: High 页面的像素级实现。根据设计稿的质量，你的页面可能做不到100%的还原，但你的网页需要尽可能的靠近设计稿。

Pixel Perfect - Chrome 扩展

⬆ 返回顶部

Webfonts

  • [ ] Webfont格式: High 现代浏览器都支持WOFF、WOFF2、TTF格式
  • ? WOFF - Web Open Font Format - Caniuse.
  • ? WOFF 2.0 - Web Open Font Format - Caniuse.
  • ? TTF/OTF - TrueType and OpenType font support
  • ? Using @font-face - CSS-Tricks
  • [ ] Webfont 大小: High Webfont大小不超过 2 MB (包括所有版本在内)。

⬆ 返回顶部

CSS

注意: 大部分前端开发人员都会看看CSS指南和Sass指南。如果你对CSS属性有疑问，可以访问CSS参考文档.

  • [ ] 响应式网站设计: High 网站使用响应式设计。
  • [ ] CSS打印属性: Medium 提供打印样式表，并确保使用正确。
  • [ ] 预处理器: Medium 你的网站使用css预处理器(推荐Sass).
  • [ ] 唯一ID: High 如果使用了ID，确保ID的唯一性。
  • [ ] Reset CSS: High 使用CSS reset(如reset.css, normalize.css, reboot) (如果你使用的是CSS框架，例如Bootstrap或Foundation，则reset css已被包含在其中)
  • ? Reset.css
  • ? Normalize.css
  • ? Reboot
  • [ ] JS 前缀: Low 所有以js-开头的class(或者JavaScript文件中使用的id)不写入css文件。
  • [ ] CSS embed or line: High 避免使用CSS嵌入或内联，仅用于必要的情况(例如: background-image for slider, CSS critical).
  • [ ] 浏览器内核前缀: High 对部分属性加上浏览器内核前缀，生成你浏览器兼容的属性。

? Autoprefixer CSS online

性能

  • [ ] 连接: High 将CSS文件连接到一个文件中。 (不适用HTTP/2)
  • [ ] 压缩: High 压缩所有CSS文件。
  • [ ] 非阻塞: Medium CSS文件需要非阻塞，以防在DOM加载时花费大量时间。
  • ? loadCSS by filament group
  • ? 使用loadCSS预加载CSS的示例
  • [ ] 未使用的CSS: Low 删除未使用的CSS。
  • ? UnCSS Online
  • ? PurifyCSS
  • ? Chrome DevTools Coverage

CSS 测试

  • [ ] 格式检查: High 所有的CSS或SCSS文件没有任何格式错误。
  • ? stylelint, a CSS linter
  • ? Sass指南
  • [ ] 响应式网页设计: High 所有页面都需要经过以下几种情况的测试: 320px, 768px, 1024px (根据自己的项目情况，可以设置更多)。
  • [ ] CSS验证器: Medium CSS经过测试，同时所有错误都被修复。

? CSS验证器

  • [ ] Reading direction: High 如果需要的话，所有页面都需要对LTR和RTL语言进行测试。
  • ? 构建RTL-Aware Web Apps & Websites: Part 1 | Mozilla Hacks
  • ? 构建RTL-Aware Web Apps & Websites: Part 2 | Mozilla Hacks

⬆ 返回顶部

Images

注意: 想要完整的了解图像优化，可以在Addy Osmani查看免费电子书图像优化基础。

最佳实践

  • [ ] 优化: High 所有图像都经过优化并且可在浏览器中正常显示。WebP格式可用于关键页面（如首页）。 All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage).
  • ? Imagemin
  • ? 使用ImageOptim免费优化您的图像。
  • [ ] 视网膜屏: Low 提供x2 或 3x的图像来支持视网膜屏显示。
  • [ ] 雪碧图: Medium 小图片放到一个雪碧图中。
  • [ ] 宽高: High 所有都需要设置高度和宽度(不要指定px 和 %)。

注意: 许多开发人员认为设置了宽度和高度就不能实现响应式设计，实际上并不是这样的。

  • [ ] Alternative text: High 所有 必须有alt属性来直观的描述图片。
  • [ ] 懒加载: Medium 图片懒加载 (A noscript fallback is always provided).

⬆ 返回顶部

JavaScript

最佳实践

  • [ ] JavaScript 内联: High 确保没有任何js代码内联(与HTML代码混合)。
  • [ ] 连接: High 将js文件连接起来。
  • [ ] 压缩: High 压缩所有js文件(可以添加 .min 后缀)。

压缩资源 (HTML, CSS, and JavaScript)

  • [ ] JavaScript安全性:

用JavaScript开发安全应用程序指南*

  • [ ] 非阻塞: Medium JavaScript文件使用async或延迟使用defer属性异步加载。

? Remove Render-Blocking JavaScript

  • [ ] Modernizr: Low 如果您需要定位某些特定功能，则可以使用自定义Modernizr在标签中添加class。

? Customize your Modernizr

JavaScript 测试

  • [ ] ESLint: High 用ESLint检测并没有错误(基于你的配置规则)。
  • ? ESLint - The pluggable linting utility for JavaScript and JSX

⬆ 返回顶部

Security

扫描并检查你的网站

  • securityheaders.io
  • Observatory by Mozilla
  • ASafaWeb - Automated Security Analyser for ASP.NET Websites

最佳实践

  • [ ] HTTPS: Medium 每个页面和所有外部内容(插件、图像...)都使用HTTPS。
  • ? Let's Encrypt - 免费 SSL/TLS 证书
  • ? 免费 SSL 服务测试
  • ? Strict Transport Security
  • [ ] HTTP严格传输安全性(HSTS): Medium HTTP头设置 'Strict-Transport-Security'.
  • ? Check HSTS preload status and eligibility
  • ? HTTP Strict Transport Security Cheat Sheet - OWASP
  • ? Transport Layer Protection Cheat Sheet - OWASP
  • [ ] 跨站点请求伪造攻击(CSRF): High 确保向服务器端发出的请求是合法的，并来自您的网站/应用程序，以防止发生CSRF攻击。

? 跨站点请求伪造（CSRF）防范清单 - OWASP_Prevention_Cheat_Sheet)

  • [ ] 跨站脚本攻击(XSS): High 页面或网站没有XSS攻击的可能性。
  • ? XSS (跨站脚本攻击) 防范清单 - OWASP_Prevention_Cheat_Sheet)
  • ? 基于DOM的XSS防范清单 - OWASP
  • [ ] Content Type Options Medium 防止Google Chrome和Internet Explorer尝试将响应的内容类型从服务器声明的内容类型中嗅探出来。
  • ? X-Content-Type-Options - Scott Helme
  • [ ] X-Frame-Options (XFO) Medium 保护网站的访问者免受劫持攻击。
  • ? X-Frame-Options - Scott Helme
  • ? RFC7034 - HTTP Header Field X-Frame-Options

⬆ 返回顶部

Performance

最佳实践

  • [ ] 页面大小: High 每张网页的大小在0到500KB之间。
  • ? Website Page Analysis
  • ? Size Limit: Make the Web lighter
  • [ ] 文件压缩: Medium 压缩你的HTML文件。

? W3C Validator

  • [ ] 懒加载: Medium 图片、js脚本和CSS需要懒加载，以提高当前页面的响应时间（请参见各自部分的详细信息）。
  • [ ] Cookie大小: 如果使用Cookie，确保每个Cookie不超过4096个字节，并且域名下不超过20个Cookie。
  • ? Cookie规范: RFC 6265
  • ? Cookies
  • ? 浏览器Cookie限制

为将到来的请求做准备

? 以下几种技术的详细说明

  • [ ] DNS解析: Low 使用dns-prefetch让第三方DNS服务商主动去执行域名解析的功能。
  • [ ] 预连接: Low 使用preconnect在空闲期间提前做好DNS查询, TCP三次握手和TLS 协商。
  • [ ] 预获取: Low 使用prefetch在空闲期间提前请求即将需要的资源(例如：图像的懒加载)。
  • [ ] 预加载: Low 使用preload提前加载当前页面所需要的资源(例如：js脚本放在的最后)。

? 预加载和预获取之间的差异

性能测试

  • [ ] Google PageSpeed: High 所有的网页都经过测试（不仅仅是首页），而且得分至少为90/100。
  • ? Google PageSpeed
  • ? 用Google测试移动端速度
  • ? WebPagetest - 网站性能和优化测试

⬆ 返回顶部

Accessibility

注意: 查看播放列表A11ycasts with Rob Dodson ?

最佳实践

  • [ ] 渐进式增强: Medium 主要功能如主导航和搜索等功能应该在没有启用JavaScript的情况下工作。

? 在Chrome开发者具中启用/禁用JavaScript

  • [ ] 颜色对比度: Medium 颜色对比度至少通过WCAG AA标准(移动端需要通过AAA)。

? Contrast ratio

标题

  • [ ] H1: High 所有页面都有H1，它不是网站的标题。
  • [ ] Headings: High 标题应以正确的顺序合理使用(H1至H6)。

? Why headings and landmarks are so important -- A11ycasts #18

Landmarks

  • [ ] banner角色: High
    标签中加入 role="banner"属性。
  • [ ] navigation角色: High
  • [ ] main角色: High
    标签中加入 role="main"属性。

? Using ARIA landmarks to identify regions of a page

语义化

  • [ ] 使用特定的HTML5输入类型: Medium 这对于显示不同类型的自定义键盘和小部件的移动设备尤其重要。

? Mobile Input Types

表单

  • [ ] Label: Highlabel与每个输入表单元素相关联，如果label无法显示，请使用aria-label代替。

? 使用aria-label属性 - MDN

Accessibility 测试

  • [ ] Accessibility标准测试: High 使用WAVE工具测试你的页面是否符合accessibility标准。

? Wave testing

  • [ ] Keyboard navigation: High 在你的键盘上以可能出现的操作顺序去测试，确保所有交互式元素都可访问和可用。
  • [ ] Screen-reader: Medium 所有页面都在屏幕阅读器(VoiceOver, ChromeVox, NVDA or Lynx)中进行了测试。
  • [ ] Focus style: High 如果焦点被禁用，它将被CSS中的可见状态所替代。

? Managing Focus - A11ycasts #22

⬆ 返回顶部

SEO

  • [ ] Google Analytics: High Google Analytics 正确安装和配置。
  • [ ] Headings logic: Medium 标题文字有助于了解当前页面的主要内容。
  • [ ] sitemap.xml: Highsitemap.xml存在并提交到Google Search Console(以前的Google管理员工具)。
  • [ ] robots.txt: Highrobots.txt正确配置，不阻止网页被爬取。
  • ? 使用Google Robots Testing Tool测试你的robots.txt。
  • [ ] 结构化数据: High 使用结构化数据的页面通过测试并且没有错误。结构化数据帮助爬虫理解当前页面的内容。
  • ? 结构化数据简介 | 搜索 | Google Developers
  • ? 使用Structured Data Testing Tool测试你的页面。
  • [ ] Sitemap HTML: Medium 提供HTML网站地图，可通过网站页脚中的链接进行访问。
  • ? Sitemap 指南 | Google 支持
  • ? Sitemap 生成器

⬆ 返回顶部

Translation

The Front-End Checklist is also available in other languages. Thanks for all translators and their awesome work!

  • ?? Japanese: miya0001/Front-End-Checklist
  • ?? Spanish: eoasakura/Front-End-Checklist-ES
  • ?? Chinese: JohnsenZhou/Front-End-Checklist
  • ?? Korean: kesuskim/Front-End-Checklist
  • ?? Portuguese: jcezarms/Front-End-Checklist

前端清单徽章

如果想显示出你的项目遵循了前端清单的各项规定，请将此徽章放在项目的README文件上！

➔ 

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ 返回顶部

Contributing

提issue或提交合并请求以建议更改或添加。

Guide

前端清单 项目有两个分支:

1. master

该分支包含README.md,内容会自动反映到前端清单。
网站上。

2. develop

这个分支将用于对结构和内容进行一些重大更改。不过最好还是使用主分支来修复小错误或添加新项目。

贡献

查看所有贡献人员 contributors.

Support

如果您有任何问题或建议，可以通过Gitter或Twitter联系我们：

  • Chat on Gitter
  • Twitter

作者

David Dias

License

CC0

⬆ 回到顶部

你可能感兴趣的:(前端开发清单)

  • github如何为开源项目作出贡献 PXM的算法星球 github开源
    就在昨天，笔者取得了第一次开源项目贡献，虽然更新的内容很小，但是也算是迈出了第一步1.选择合适的开源项目（1）兴趣优先选择自己感兴趣的项目会更有动力参与，比如你喜欢前端开发，可以关注React、Vue相关的开源项目；如果喜欢后端，可以尝试贡献Django、SpringBoot等项目。（2）关注活跃度一个活跃的开源项目通常意味着更快的反馈和更友好的开发者社区。你可以通过以下方式判断：Issue更新频
  • 全网最细！CentOS 7极速部署MySQL 8.0.23实战手册（附最佳参数模版） 从不删库的DBA Mysqlcentosmysqllinux
    一、部署前准备1.1环境检查清单在进行MySQL部署前，请确认以下基础条件已满足：检查项标准要求操作系统版本CentOS6/7（推荐7.6+）内存建议≥4GB（生产环境≥16GB）磁盘空间/分区≥30GB，数据盘按需求规划网络连通性确保yum源可访问二、操作系统基础配置2.1关闭网络管理服务根据系统版本选择相应操作：▶CentOS6#serviceNetworkManagerstop停止Netwo
  • Sass：深度解析与实战应用 QQ828929QQ sass前端css
    在前端开发的浪潮中，CSS预处理器因其强大的功能和灵活性而备受推崇。其中，Sass（SyntacticallyAwesomeStylesheets）无疑是这些预处理器中的佼佼者。本文将深入解析Sass的核心概念、语法特性以及实战应用，并通过代码样例展示其强大的功能。Sass是什么？Sass（SyntacticallyAwesomeStylesheets）是一种CSS预处理器，它允许我们使用变量、嵌
  • HTML 图像与多媒体元素：拓展学习边界的进度记录（一） 计算机毕设定制辅导-无忧学长 #HTMLhtml学习php
    开篇：学习启程在前端开发的广袤领域中，HTML作为构建网页的基石，其重要性不言而喻。而HTML图像与多媒体元素，就像是为这座基石添上了绚丽的色彩与灵动的音符，赋予网页更加丰富的表现力和交互性。作为一名热衷于探索前端技术的博主，我深知掌握这些元素对于提升网页开发能力的关键作用。于是，我踏上了深入学习HTML图像与多媒体元素的征程，并决定将学习过程中的点滴记录下来，与大家一同分享。希望通过这篇学习进度
  • 一个后端工程师对前端云 Vercel 的体验和探索 程序员
    今天小猿姐特邀咱们资深的程序猿为大家带来产品的体验报告。Vercel概述Vercel是一个为前端开发者设计的一体化平台（前端云），可以帮助开发者快速地将网站和应用程序部署到各种环境中，并且提供了一个灵活、可扩展和安全的平台，非常适合开发者在不同平台和环境中进行开发和部署。Vercel的主要特点包括：通过自动配置构建设置和提供详细的构建日志，简化了部署管理过程。借助集成的CI/CD功能，开发者可以预
  • 《今日AI-人工智能-编程日报》-源自2025年3月19日 小亦编辑部 每日AI-人工智能-编程日报人工智能
    1.豆包AI编程功能迎来三项重磅升级豆包平台今日宣布其AI编程功能迎来三项重要升级，包括：HTML实时预览：支持用户在编写HTML代码时实时查看网页效果，显著提升前端开发效率，尤其适用于小游戏和网页制作。Python代码直接运行与一键修复：用户可直接运行Python代码，并在出错时一键修复，极大降低了编程门槛，提升了开发效率。生成完整项目：新增生成完整项目的功能，帮助用户快速创建应用程序，缩短开发
  • Vue.js 中的 Memoization：提升性能的缓存技术 vvilkim vuevue.js前端javascript
    在现代前端开发中，性能优化是一个永恒的话题。随着应用规模的增大，复杂的计算和频繁的函数调用可能会导致性能瓶颈。Vue.js作为一个流行的前端框架，提供了多种优化手段，其中memoization（记忆化）就是一种非常有效的技术。本文将详细介绍Vue.js中的memoization，以及如何利用它来提升应用性能。什么是Memoization？Memoization是一种优化技术，通过缓存函数的结果来避
  • Vue.js 性能优化：虚拟 DOM 与虚拟滚动 vvilkim vuevue.js前端javascript
    在现代前端开发中，性能优化是一个永恒的话题。Vue.js作为一款流行的前端框架，提供了许多强大的工具和技术来提升应用的性能。其中，虚拟DOM和虚拟滚动是两个非常重要的概念。本文将深入探讨它们的原理、优势以及如何在Vue.js中使用它们来优化性能。什么是虚拟DOM？虚拟DOM（VirtualDOM）是Vue.js用于提升性能的核心技术之一。它是一个轻量级的JavaScript对象树，用于表示真实DO
  • 一个比Fiddler/Charles更好用的免费抓包神器 金丝猴也是猿 httpudphttpswebsocket网络安全网络协议tcp/ip
    Proxyman与Sniffmaster：抓包工具的双剑合璧在当今的网络开发与调试中，抓包工具是不可或缺的利器。无论是前端开发者、后端工程师，还是安全研究人员，都需要通过抓包工具来分析网络请求、调试接口、排查问题。今天，我们将介绍两款强大的抓包工具：Proxyman和Sniffmaster，它们各自拥有独特的功能，能够帮助你在不同的场景下高效完成工作。Proxyman简介Slogan：只是简单地点
  • 办公提效高阶 DeepSeek 提示词，适用于多种 AI 工具 东锋17 人工智能人工智能
    1、高效会议管理请根据[会议主题]和[参会人角色]生成会议议程框架，包含会前准备清单（背景材料/数据需求）、会中讨论要点（需决策事项+时间分配）、会后跟进任务表（责任人/DDL），最后用思维导图形式输出。2、周报自动生成基于我本周完成的[任务清单]和[工作数据]，请先总结3项核心成果与2个待改进点，再结合OKR目标制定下周工作计划，要求用对比柱状图呈现进度数据，以PPT分页形式输出。3、周报自动生
  • JavaScript 中的性能优化：从基础到高级技巧 lina_mua 深入javascript性能优化开发语言
    1.引言1.1性能优化的重要性在现代前端开发中，性能优化是提升用户体验的关键。无论是页面加载速度、交互响应时间，还是内存占用，性能优化都能显著提升应用的流畅度和用户满意度。1.2本文的目标本文旨在深入探讨JavaScript中的性能优化，从基础到高级技巧，帮助开发者理解性能优化的核心概念，并掌握其在实际开发中的应用。2.性能优化的基础2.1什么是性能优化？性能优化是指通过改进代码、减少资源消耗、优
  • 浏览器工作原理深度解析（阶段一）：从 URL 到页面渲染的完整流程 码农的时光故事 javascript前端
    一、浏览器工作流程概述作为前端开发者，我们每天都在与浏览器打交道，但多数人对其内部工作机制却知之甚少。实际上，浏览器的核心功能就是将用户输入的URL转换为可视化的网页。这一过程大致分为六个关键步骤：网络请求：通过HTTP/HTTPS协议获取页面资源构建DOM树：解析HTML代码生成文档对象模型样式计算：解析CSS规则并应用到对应元素布局渲染：计算元素位置和尺寸生成渲染树合成优化：将渲染层合并为位图
  • Web Component 教程（六）：基于 Stencil 脚手架开发 Web Component 乐闻x WebComponent学习记录前端webcomponentstencli
    前言在现代前端开发中，WebComponent是一种逐渐受到关注的技术，它允许我们创建可以在任何框架或库（如React,Angular,Vue等）中使用的可重用组件。而Stencil是一个强大的开发工具，它帮助我们轻松构建这些WebComponent，使开发过程更高效、更简洁。那么，究竟如何使用Stencil来开发WebComponent呢？今天，我们就来探索这一主题，从安装和设置，到创建和使用组
  • Angular Material表格的动态列宽设置 t0_54program 编程问题解决手册angular.js前端javascript个人开发
    在前端开发中，AngularMaterial表格（mat-table）是非常流行的组件之一。它提供了丰富的功能，如排序、分页和过滤等。然而，有时我们需要动态调整表格列的宽度，以适应不同的数据和用户需求。本文将介绍如何在TypeScript中获取mat-table的列宽，并据此设置相应的过滤器宽度。问题描述在使用AngularMaterial表格时，如何获取每个列的宽度？例如，我们希望为每一列设置一
  • HTML 教程：从零开始掌握常用语法 LoveYa! 前端html前端笔记学习
    免费无广纯净版微信小程序测mbti很有趣，不需要任何授权，也不需要登录，直接就是测，几分钟了解自己的人格mbti，快来试试吧。可以微信直接搜索小程序名“一秒MBTI”HTML教程：从零开始掌握常用语法欢迎来到HTML的世界！HTML（HyperTextMarkupLanguage，超文本标记语言）是网页开发的基石，它负责定义网页的结构和内容。无论你是想成为一名前端开发者，还是仅仅想了解网页背后的魔
  • 【Vue3笔记01】如何使用Vue3和Vite搭建前端项目的基础开发环境 Mr.小朱同学 Web前端笔记前端笔记vue.jsVue3Vite搭建项目环境
    这篇文章，主要介绍如何使用Vue3和Vite搭建前端项目的基础开发环境【知识星球】。目录一、搭建项目环境1.1、前提条件1.2、开始搭建1.3、下载依赖1.4、启动工程一、搭建项目环境目前前端开发中，使用最多的就是Vue.js框架，目前Vue.js框架常用的有Vue2、Vue3两个版本，Vue3和Vue2在语法上还是存在很大的差异的，这里我将介绍如何搭建Vue3开发环境。1.1、前提条件在创建Vu
  • Postman 从入门到精通的详细图文教程指南 清尘沐歌 postman测试工具
    API已经成为连接不同系统和服务的重要桥梁，无论你是前端开发者、后端工程师还是测试人员，掌握API的开发和测试技能都是非常重要的。Postman是一个广受欢迎的API开发工具，它不仅能够帮助你轻松发送HTTP请求，还提供了强大的测试、调试和协作功能。本系列教程旨在帮助你从零开始，逐步掌握Postman的各项功能，从基础的请求发送到高级的自动化测试和团队协作。无论你是初学者还是有一定经验的开发者，都
  • TypeScript模块 vs JavaScript模块：现代化开发的模块化之道 念九_ysl typescript前端typescript
    一、模块化开发的重要性在当今前端开发领域，模块化已成为构建可维护、可扩展应用程序的基石。无论是小型项目还是企业级应用，良好的模块化设计都能显著提升代码的可读性和复用性。让我们通过一个简单对比示例开始：JavaScript实现：//math.jsexportfunctionadd(a,b){returna+b}//app.jsimport{add}from'./math.js';console.lo
  • 智慧物流数字管理系统设计案例分析 UI设计开发服务商 数据分析数据挖掘
    你好，宝子们！艾斯视觉团队在此，我们专注于UI设计和前端开发领域10年有余。非常高兴能与您分享我们的经验和见解。如果您觉得有所帮助，请给予我们支持和关注，并随时私信我们，共同探讨进步！谢谢您的鼓励！随着科技的飞速发展，数字化已经成为现代物流业的重要发展趋势。智慧物流数字管理系统旨在通过先进的技术手段，实现物流信息的实时共享、智能分析和优化决策，从而提高物流效率、降低成本并提升客户满意度。本文将以一
  • 《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅 JJCTO袁龙 前端react.js前端框架
    文章标题《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅在前端开发的浪潮中，React.js已经成为开发者们不可或缺的利器。它以其高效、灵活的特性，成为构建现代Web应用的首选框架之一。然而，随着项目复杂度的增加，如何更好地管理状态、优化性能、提升代码可维护性，成为每个开发者必须面对的挑战。幸运的是，我最近出版的《React开发实践：掌握Redux与Hooks应用》这
  • 最完整的webpack Dll打包与采坑总结 仰望星空的代码 Vue.js踩坑记vue.jswebpackdll打包打包优化
    webpack已经成为前端主流的项目打包工具，对于前端开发必不可少。在前端项目依赖第三方库过多，项目比较大文件比较多时，webpack打包的速度也会被拖成蜗牛，是时候优化一下webapck的打包速度了。在优化打包速度方面有不少方法方式，其中一个比较重要的方式是DllPlugin。DllPlugin把第三方库打包成动态链接库（动态链接库：windows系统中库文件概念，这里是借用了这一概念。），Dl
  • 前端开发：Webpack的使用总结 三掌柜666 web前端知识汇总webpack前端javascript
    前言在前端开发过程中，尤其是现在前端框架的频繁使用的当下，作为前端开发者想必对于Webpack并不陌生，尤其是在使用Vue框架做前端开发的时候，打包时候必用Webpack。还有就是在前端求职面试的时候，Webpack相关的知识点也是面试官必定考察的，那么本篇博文就来分享一下关于Webpack使用相关的知识点，记录下来，方便后期查阅使用。Webpack概念Webpack其实是一个前端资源加载/打包工
  • HarmonyOS开发5.0【应用程序包】 爱桥代码的程序媛 鸿蒙开发学习笔录harmonyos分布式鸿蒙开发鸿蒙鸿蒙系统openharmony程序包
    对比HarmonyOS与Android的应用程序包HarmonyOS的应用程序包与Android的应用程序包在多个方面存在一些不同之处，主要体现的方面：包格式（从包的后缀名可以看出来）HarmonyOS:使用.hap格式作为应用程序包。这个格式是HarmonyOS的专有格式，包含了应用的所有资源和代码。Android:使用.apk格式作为应用程序包。APK文件包含了应用的代码、资源、清单文件等。架
  • Python前端开发 PITSU 正则表达式htmlcss3mysql
    Python前端开发1.前端三剑客（HTML，CSS和JavaScript）1.1HTML1.1.1HTML简介HyperTextMark-upLanguage,指的是超文本标记语言；html是开发网页的语言；html中的标签大多数都是成对出现的,格式:1.1.2HTML结构第一行是文档声明部分HTML：分为页头，页身和页脚。标签大部分是成对出现1.1.3第一行文档声明部分HTML在vscode中
  • 【Vue+TypeScript实战指南：提高代码质量和开发效率】 小怪兽9699 typescriptvue.js前端
    前言在现代前端开发中，Vue.js是一个非常流行且强大的框架，而TypeScript则是增强代码类型安全性和可维护性的利器。本文将详细介绍如何结合Vue和TypeScript来构建高质量的应用程序。无论你是有一定基础的开发者还是希望进一步提升技能的高手，本文都将为你提供详细的步骤和代码示例。1.环境搭建首先，确保你已经安装了Node.js和npm。然后，全局安装VueCLI：npminstall-
  • Vue.js的watch监听 阿珊和她的猫 vue.js前端javascript
    前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录引言`watch`选项的基本概念`watch`选项的基本语法`watch
  • 现代前端开发框架对比：React、Vue 和 Svelte 的选择指南 zhyoobo vue.jsreact.js前端
    引言在当今快速发展的Web开发领域，前端框架的选择往往直接影响项目的开发效率、维护成本和用户体验。React、Vue和Svelte作为当前最受关注的三大框架，各自拥有独特的设计哲学与技术实现。本文将通过5000字的深度解析，从架构设计、开发体验、性能特征到生态系统四个维度进行全方位对比，并针对不同场景提供选型决策框架。无论您是初创团队的技术负责人，还是正在构建企业级应用的架构师，都能在此找到面向2
  • LORA的魔法棒：在Stable Diffusion中挥洒注意力机制的优化咒语 ?? DTcode7 AI生产力AIAIGCstablediffusionAI生产力前沿
    LORA的魔法棒：在StableDiffusion中挥洒注意力机制的优化咒语??欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐：DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞
  • 深入解析：React中的信号组件与细粒度更新
    引言在主流的前端开发框架中，无论是React、Vue还是Svelte，核心都是围绕着更高效地进行UI渲染展开的。为了实现高性能，基于DOM总是比较慢这个假设前提，其最核心的要解决的问题有两个：响应式更新细粒度更新为了将响应式更新、细粒度更新优化到极致，各种框架是八仙过海，各显神通。以最流行的React和Vue为例，首先两者均引入了VirtualDOM的概念。Vue的静态模板编译，通过编译时的静态分
  • Kafka系列之—向Kafka 写入数据（四） 葛旭朋 Kafkakafka分布式java
    一，创建Kafka生产者1.1必选的三个属性1.1.1bootstrap.servers指定broker的地址清单，不需要包含所有的broker地址，生产者会从给定的broker里找到其它broker的信息，建议最少提供两个broker的信息。1.1.2key.serializerbroker希望接收到的消息的键和值都是字节数组。1.1.3value.serializer指定的类会将值序列化。1.
  • 矩阵求逆（JAVA）利用伴随矩阵 qiuwanchi 利用伴随矩阵求逆矩阵
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(利用伴随矩阵) * @author 邱万迟
  • 单例（Singleton）模式 aoyouzi 单例模式Singleton
    3.1           概述 如果要保证系统里一个类最多只能存在一个实例时，我们就需要单例模式。这种情况在我们应用中经常碰到，例如缓存池，数据库连接池，线程池，一些应用服务实例等。在多线程环境中，为了保证实例的唯一性其实并不简单，这章将和读者一起探讨如何实现单例模式。 3.2
  • [开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发 comsci 开源
          现在国内有大量的信息技术产品，都是通过盗版，免费下载，开源，附送等方式从国外的开发者那里获得的。。。。。。        虽然这种情况带来了国内信息产业的短暂繁荣，也促进了电子商务和互联网产业的快速发展，但是实际上，我们应该清醒的看到，这些产业的核心力量是被国外的
  • 页面有两个frame,怎样点击一个的链接改变另一个的内容 Array_06 UIXHTML
    <a src="地址"  targets="这里写你要操作的Frame的名字" />搜索 然后你点击连接以后你的新页面就会显示在你设置的Frame名字的框那里 targerts="",就是你要填写目标的显示页面位置 ===================== 例如： <frame src=&
  • Struts2实现单个/多个文件上传和下载 oloz 文件上传struts
    struts2单文件上传：     步骤01:jsp页面 <!--在进行文件上传时，表单提交方式一定要是post的方式，因为文件上传时二进制文件可能会很大，还有就是enctype属性，这个属性一定要写成multipart/form-data，不然就会以二进制文本上传到服务器端--> 　　<form action="fileUplo
  • 推荐10个在线logo设计网站 362217990 logo
    在线设计Logo网站。 1、http://flickr.nosv.org（这个太简单） 2、http://www.logomaker.com/?source=1.5770.1 3、http://www.simwebsol.com/ImageTool 4、http://www.logogenerator.com/logo.php?nal=1&tpl_catlist[]=2 5、ht
  • jsp上传文件 香水浓 jspfileupload
    1. jsp上传 Notice： 1. form表单 method 属性必须设置为 POST 方法 ，不能使用 GET 方法 2. form表单 enctype 属性需要设置为 multipart/form-data 3. form表单 action 属性需要设置为提交到后台处理文件上传的jsp文件地址或者servlet地址。例如 uploadFile.jsp 程序文件用来处理上传的文
  • 我的架构经验系列文章 - 前端架构 agevs JavaScriptWeb框架UIjQuer
    框架层面：近几年前端发展很快，前端之所以叫前端因为前端是已经可以独立成为一种职业了，js也不再是十年前的玩具了，以前富客户端RIA的应用可能会用flash/flex或是silverlight，现在可以使用js来完成大部分的功能，因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码，越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源，而前端做所有UI的事情。MVCMV
  • android ksoap2 中把XML(DataSet) 当做参数传递 aijuans android
    我的android app中需要发送webservice ，于是我使用了 ksop2 进行发送，在测试过程中不是很顺利,不能正常工作.我的web service 请求格式如下     [html]  view plain copy   <Envelope xmlns="http://schemas.
  • 使用Spring进行统一日志管理 + 统一异常管理 baalwolf spring
    统一日志和异常管理配置好后，SSH项目中，代码以往散落的log.info() 和 try..catch..finally 再也不见踪影！ 统一日志异常实现类： [java]  view plain copy   package com.pilelot.web.util;      impor
  • Android SDK 国内镜像 BigBird2012 android sdk
    一、镜像地址： 1、东软信息学院的 Android SDK 镜像，比配置代理下载快多了。 配置地址， http://mirrors.neusoft.edu.cn/configurations.we#android 2、北京化工大学的： IPV4:ubuntu.buct.edu.cn  IPV4:ubuntu.buct.cn IPV6:ubuntu.buct6.edu.cn
  • HTML无害化和Sanitize模块 bijian1013 JavaScriptAngularJSLinkySanitize
    一.ng-bind-html、ng-bind-html-unsafe         AngularJS非常注重安全方面的问题，它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML，然后利用它触发跨站攻击或者注入攻击。         考虑这样一个例子，假设我们有一个变量存
  • [Maven学习笔记二]Maven命令 bit1129 maven
    mvn compile compile编译命令将src/main/java和src/main/resources中的代码和配置文件编译到target/classes中，不会对src/test/java中的测试类进行编译 MVN编译使用 maven-resources-plugin:2.6:resources maven-compiler-plugin:2.5.1:compile &nbs
  • 【Java命令二】jhat bit1129 Java命令
    jhat用于分析使用jmap dump的文件，，可以将堆中的对象以html的形式显示出来，包括对象的数量，大小等等，并支持对象查询语言。 jhat默认开启监听端口7000的HTTP服务，jhat是Java Heap Analysis Tool的缩写 1. 用法： [hadoop@hadoop bin]$ jhat -help Usage: jhat [-stack <bool&g
  • JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc ronin47
    进到类似目录 server/default/conf/bootstrap，打开文件 profile.xml找到： Xml代码<bean    name="AttachmentStore"  class="org.jboss.system.server.profileservice.repository.AbstractAtta
  • 写给初学者的6条网页设计安全配色指南 brotherlamp UIui自学ui视频ui教程ui资料
    网页设计中最基本的原则之一是，不管你花多长时间创造一个华丽的设计，其最终的角色都是这场秀中真正的明星——内容的衬托     我仍然清楚地记得我最早的一次美术课，那时我还是一个小小的、对凡事都充满渴望的孩子，我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋，并且我想，既然两种颜色能创造出一种全新的美丽色彩，那所有颜色
  • 有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。写一个函数实现。复杂度是什么。 bylijinnan java算法面试
    import java.util.Random; import java.util.Set; import java.util.TreeSet; /** * http://weibo.com/1915548291/z7HtOF4sx * #面试题#有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。 * 写一个函数实现。复杂度是什么
  • struts2获得request、session、application方式 chiangfai application
    1、与Servlet API解耦的访问方式。 a.Struts2对HttpServletRequest、HttpSession、ServletContext进行了封装，构造了三个Map对象来替代这三种对象要获取这三个Map对象，使用ActionContext类。 ----->   package pro.action; import java.util.Map; imp
  • 改变python的默认语言设置 chenchao051 python
    import sys sys.getdefaultencoding()  可以测试出默认语言，要改变的话，需要在python lib的site-packages文件夹下新建： sitecustomize.py， 这个文件比较特殊，会在python启动时来加载，所以就可以在里面写上： import sys sys.setdefaultencoding('utf-8') &n
  • mysql导入数据load data infile用法 daizj mysql导入数据
    我们常常导入数据！mysql有一个高效导入方法，那就是load data infile 下面来看案例说明 基本语法： load data  [low_priority] [local] infile 'file_name txt' [replace | ignore] into table tbl_name [fields [terminated by't'] [OPTI
  • phpexcel导入excel表到数据库简单入门示例 dcj3sjt126com PHPExcel
    跟导出相对应的，同一个数据表，也是将phpexcel类放在class目录下，将Excel表格中的内容读取出来放到数据库中 <?php error_reporting(E_ALL); set_time_limit(0); ?> <html> <head> <meta http-equiv="Content-Type"
  • 22岁到72岁的男人对女人的要求 dcj3sjt126com
    22岁男人对女人的要求是：一，美丽，二，性感，三，有份具品味的职业，四，极有耐性，善解人意，五，该聪明的时候聪明，六，作小鸟依人状时尽量自然，七，怎样穿都好看，八，懂得适当地撒娇，九，虽作惊喜反应，但看起来自然，十，上了床就是个无条件荡妇。 32岁的男人对女人的要求，略作修定，是：一，入得厨房，进得睡房，二，不必服侍皇太后，三，不介意浪漫蜡烛配盒饭，四，听多过说，五，不再傻笑，六，懂得独
  • Spring和HIbernate对DDM设计的支持 e200702084 DAO设计模式springHibernate领域模型
    A：数据访问对象     DAO和资源库在领域驱动设计中都很重要。DAO是关系型数据库和应用之间的契约。它封装了Web应用中的数据库CRUD操作细节。另一方面，资源库是一个独立的抽象，它与DAO进行交互，并提供到领域模型的“业务接口”。    资源库使用领域的通用语言，处理所有必要的DAO，并使用领域理解的语言提供对领域模型的数据访问服务。
  • NoSql 数据库的特性比较 geeksun NoSQL
    Redis 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。目前由VMware主持开发工作。   1. 数据模型 作为Key-value型数据库，Redis也提供了键（Key）和值（Value）的映射关系。除了常规的数值或字符串，Redis的键值还可以是以下形式之一： Lists （列表） Sets
  • 使用 Nginx Upload Module 实现上传文件功能 hongtoushizi nginx
    转载自： http://www.tuicool.com/wx/aUrAzm   普通网站在实现文件上传功能的时候，一般是使用Python，Java等后端程序实现，比较麻烦。Nginx有一个Upload模块，可以非常简单的实现文件上传功能。此模块的原理是先把用户上传的文件保存到临时文件，然后在交由后台页面处理，并且把文件的原名，上传后的名称，文件类型，文件大小set到页面。下
  • spring-boot-web-ui及thymeleaf基本使用 jishiweili springthymeleaf
    视图控制层代码demo如下：   @Controller @RequestMapping("/") public class MessageController { private final MessageRepository messageRepository; @Autowired public MessageController(Mes
  • 数据源架构模式之活动记录 home198979 PHP架构活动记录数据映射
    hello!架构 一、概念 活动记录（Active Record）：一个对象，它包装数据库表或视图中某一行，封装数据库访问，并在这些数据上增加了领域逻辑。 对象既有数据又有行为。活动记录使用直截了当的方法，把数据访问逻辑置于领域对象中。   二、实现简单活动记录 活动记录在php许多框架中都有应用，如cakephp。 <?php /** * 行数据入口类 *
  • Linux Shell脚本之自动修改IP pda158 linuxcentosDebian脚本
    作为一名 Linux SA，日常运维中很多地方都会用到脚本，而服务器的ip一般采用静态ip或者MAC绑定，当然后者比较操作起来相对繁琐，而前者我们可以设置主机名、ip信息、网关等配置。修改成特定的主机名在维护和管理方面也比较方便。如下脚本用途为：修改ip和主机名等相关信息，可以根据实际需求修改，举一反三！ #!/bin/sh #auto Change ip netmask ga
  • 开发环境搭建 独浮云 eclipsejdktomcat
           最近在开发过程中，经常出现MyEclipse内存溢出等错误，需要重启的情况，好麻烦。对于一般的JAVA+TOMCAT项目开发，其实没有必要使用重量级的MyEclipse，使用eclipse就足够了。尤其是开发机器硬件配置一般的人。         &n
  • 操作日期和时间的工具类 vipbooks 工具类
       大家好啊，好久没有来这里发文章了，今天来逛逛，分享一篇刚写不久的操作日期和时间的工具类，希望对大家有所帮助。 /* * @(#)DataFormatUtils.java 2010-10-10 * * Copyright 2010 BianJing,All rights reserved. */ package test; impor
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他