10个开发人员常犯的错误以及如何像专业人士一样修复它们

更新日期: 2024-10-10阅读: 1k标签: 错误

作为前端开发人员,我们必须考虑以下 10 个可能让项目和客户蒙受损失的错误。


1. 未优化图像

如果您使用高分辨率图像而未针对网络进行优化,则会导致页面加载缓慢。相反,请压缩图像并使用适当的格式,例如照片使用 JPEG 格式,图形使用 PNG 格式。TinyPNG 和 ImageOptim 等工具可以帮助减小文件大小而不会牺牲质量。


2. 忽略移动媒体查询

许多开发人员没有考虑网站在不同设备上的外观,这会损害移动设备上的用户体验。响应式设计至关重要。使用媒体查询根据屏幕尺寸调整布局和样式。

例如:

@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}


3. 使用内联样式

直接在 html 中(内联)编写样式似乎很快,但它会使代码变得混乱且难以维护。最好将 css 保存在单独的文件中,以便可以重复使用样式。

例如,不要这样:

<div style="color: red;">Hello</div>

在你的 CSS 文件中使用它:

.red-text {  color: red;}

<div class="red-text">Hello</div>


4. 标题标签使用不当

标题(如 <h1>、<h2>)应正确使用,以确保良好的结构和 seo。误用它们会让搜索引擎和用户感到困惑。例如,使用 <h1> 作为主标题,后续标题应符合逻辑:

<h1>Main Title</h1>
<h2>Subsection</h2>


5. 使用样式类来挂接 JavaScript 钩子

对样式和 JavaScript 函数使用同一个类是一种不好的做法。如果更改样式类,可能会破坏 JavaScript 功能。相反,请使用数据属性来挂接 JavaScript:

<button >"modal">Click Me</button>

在 JavaScript 中:

document.querySelector('[]').addEventListener('click', function() {
// Your logic here
});


6. 留下多余的样式

随着时间的推移,当您修改网站时,未使用或重复的 CSS 可能会累积起来。这种“CSS 膨胀”会减慢加载时间。请始终清理 CSS 并删除未使用的样式。PurifyCSS 或 UnCSS 等工具可以提供帮助。


7. 嵌入字体不当

如果处理不当,字体会影响加载性能。不要导入太多字体样式或粗细;只加载您需要的字体。例如:

@font-face {
font-family: 'Roboto';
src: url('roboto-regular.woff2') format('woff2');
font-weight: 400;
}


8. 未抽象元素以实现可重用性

不要为网站的每个部分硬编码元素或样式,而是创建可重用的组件和类。例如,如果您经常使用按钮,请创建一个基本按钮类:

.btn {
padding: 10px 20px;
border-radius: 5px;
}

然后,在需要按钮的任何地方应用此类,而不必每次都编写新样式。


9. 未充分利用 Flexbox 或 CSS Grid

许多开发人员仍然依赖过时的布局技术(如浮动或手动边距)进行布局,而不是使用 Flexbox 或 CSS Grid 等现代工具。这些工具使响应式设计和布局变得容易得多:

.container {
display: flex;
justify-content: space-between;
}


10. 在 HTML 中使用大写字母,而不是 CSS

不要在 HTML 中直接使用大写字母(因为以后无法轻易修改),而是使用 CSS 控制文本转换:

.uppercase-text {
text-transform: uppercase;
}

这使得您的内容能够灵活地适应未来的变化。

通过避免这些常见错误,您可以确保您的网站更高效、更易于维护并提供更好的用户体验。

来源:web前端开发

链接: https://fly63.com/article/detial/12716

解决Cannot read property range of null 错误

vue工程npm run serve/start/dev启动时,node_modules文件报:Cannot read property range of null 错误,该问题是babel-eslint版本更新问题导致的;

HTTP 400 错误 - 请求无效 (Bad request)

在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里;原因:前端提交数据的字段名称或者是字段类型和后台的实体类不一致

js异步错误捕获

我们都知道 try catch 无法捕获 setTimeout 异步任务中的错误,那其中的原因是什么。以及异步代码在 js 中是特别常见的,我们该怎么做才比较?

不能执行已释放Script的代码

父页面初始化声明变量a为数组(数组对象是引用类型,赋值传递的是地址),创建iframe子页面后给父页面变量a赋值,赋值后销毁iframe子页面,再次调用变量a的时候就会抛出异常‘SCRIPT5011:不能执行已释放Script的代码’。

JS错误处理:前端JS/Vue/React/Iframe/跨域/Node

js错误的实质,也是发出一个事件,处理他,error实例对象message:错误提示信息,name:错误名称(非标准属性)宿主环境赋予

nodejs提示 cross-device link not permitted, rename 错误解决方法

文件上传的功能时候,调用fs.renameSync方法错误,这个提示是跨区重命名文件出现的权限问题。先从源文件拷贝到另外分区的目标文件,然后再unlink,就可以了。

Js中使用innerHTML的缺点是什么?

如果在JavaScript中使用innerHTML,缺点是:内容随处可见;不能像“追加到innerHTML”一样使用;innerHTML不提供验证,因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断

Web前端开发,必须规避的8个错误点!

现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性。我们收集了一些在Web开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助Web开发者更好的完善网站。

web前端错误监控

为什么要做前端错误监控?1. 为了保证产品的质量2. 有些问题只存在于线上特定的环境3. 后端错误有监控,前端错误没有监控,前端错误分为两类: 即时运行错误和资源加载错误

自定义错误及扩展错误

当我们在进行开发的时候,通常需要属于我们自己的错误类来反映任务中可能出现的特殊情况。对于网络操作错误,我们需要 HttpError,对于数据库操作错误,我们需要 DbError,对于搜索操作错误,我们需要 NotFoundError,等等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!