web前端开发面临的挑战主要是都有哪些？

Posted 2023-05-07

马上就要毕业了，想要知道前端面临的主要挑战是什么？

web前端面临的挑战：

1.兼容性：市场上浏览器种类非常多，IE、Firefox、Chrome、Opera、还有众多的IE加壳浏览器，类似搜狗、傲游、360，再加上这些浏览器的移动终端版本。需要有Web标准，前端的知识大部分通用于各个浏览器，但还是会有历史遗留问题，不同版本的浏览器有不同的问题。
2.交互复杂度：和目前UI交互的要求比，浏览器引擎给我们的接口太低级了，稍复杂一点的UI效果，都要前端自己利用CSS和DOM去组合创造，前端的效果是通过CSS、DOM、JS三者配合起来呈现出来的，脱了任何一个技术都寸步难行，时刻要同时考虑多个方向的知识点。
3.代码可维护性：复杂度的提升直接影响代码的维护性。JS/CSS/html代码生命周期越来越长，也就越来越需要从代码质量、架构和工具上保证他们的可维护性。
4.技术更新快：前端技术更新速度十分快，html5，css3，nodejs，commonjs，按需加载等都是近几年出来的，我们必须与时俱进，不断加强技术水平，不断学习，不然就会被淘汰。
5.开发者思路：真正的前端开发挑战，还在于开发者的思路。

想要了解更多有关web前端的相关信息，推荐咨询千锋教育。千锋教育成立教研学科中心，推出贴近企业需求的线下技能培训课程。采用全程面授高品质、高体验培养模式，学科大纲紧跟企业需求，拥有国内一体化教学管理及学员服务，在职业教育发展道路上不断探索前行。 参考技术A

平时工作，多数是开发Web项目，由于一般是开发内部使用的业务系统，所以对于安全性一般不是看的很重，基本上由于是内网系统，一般也很少会受到攻击，但有时候一些系统平台，需要外网也要使用，这种情况下，各方面的安全性就要求比较高了。

1、测试的步骤及内容

这些安全性测试，据了解一般是先收集数据，然后进行相关的渗透测试工作，获取到网站或者系统的一些敏感数据，从而可能达到控制或者破坏系统的目的。

2、SQL注入漏洞的出现和修复

SQL注入定义：

SQL注入攻击是黑客对数据库进行攻击的常用手段之一。随着B/S模式应用开发的发展，使用这种模式编写应用程序的程序员也越来越多。但是由于程序员的水平及经验也参差不齐，相当大一部分程序员在编写代码的时候，没有对用户输入数据的合法性进行判断，使应用程序存在安全隐患。用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。

SQL注入有时候，在地址参数输入，或者控件输入都有可能进行。如在链接后加入’号，页面报错，并暴露出网站的物理路径在很多时候，很常见，当然如果关闭了Web.Config的CustomErrors的时候，可能就不会看到。

3、跨站脚本攻击漏洞出现和修复

跨站脚本攻击，又称XSS代码攻击，也是一种常见的脚本注入攻击。例如在界面上，很多输入框是可以随意输入内容的，特别是一些文本编辑框里面，可以输入例如这样的内容，如果在一些首页出现很多这样内容，而又不经过处理，那么页面就不断的弹框，更有甚者，在里面执行一个无限循环的脚本函数，直到页面耗尽资源为止，类似这样的攻击都是很常见的，所以我们如果是在外网或者很有危险的网络上发布程序，一般都需要对这些问题进行修复。

本回答被提问者和网友采纳 参考技术B 第一：浏览器兼容性。这一点是最重要的，其实不论什么加载、多绚丽的效果，都不如有一整版排布好的界面呈现在用户面前，然而市场上浏览器的种类非常多，ie、firefox、chrome、opera、还有众多的ie加壳浏览器，搜狗傲游360什么的，再加上这些浏览器的移动终端版本。
第二：交互的复杂度。和目前UI/交互的要求相比浏览器引擎给我们接囗的确太低级了。于是今年前端技术的热门话题是各种javascript, css的预处理器、各种mvc框架、和微框架的讨论。
第三：代码可维护性。复杂度的提升直接影响代码的维护性。JS/CSS/HTML代码生命周期越来越长，也就越来越需要从代码质量、架构和工具上保证它们的可维护性。代码的历史问题是永远的痛点。
第四：沟通。前端开发工程师在项目中处于设计师与后端开发程序猿的中间位置，对下要和后端工程师商定接口，对上要和产品、设计有良好的沟通。无论哪一个环节中出现的问题，都会在前端最先表现出来，良好的沟通可以保证尽早发现并解决这些问题。 参考技术C

随着互联网+提出以及移动互联网技术的快速发展，web前端开发越来越重要，在这两年迅速走红，越来越多的开发者加入前端开发队伍。不过目前大学中还没有对前端系统的课程体系，再加上web前端技术的更新迭代，大家对它的认识也各不相同。下面给大家介绍web前端开发易出现的六个问题。

问题一：网页不全面考虑

大部分前端呈现使用DOM,但DOM用得多了会有性能问题。现在很流行列表页页底上拉加载更多，但很少有前端关注加载的极端问题，如果一个页面我下拉了很多次，加载了几千个DOM，会发生什么问题?答案是轻则页面响应缓慢，重则浏览器闪退。

另外举个例子：LocalStorage使用起来确实方便，很多企业的前端重度依赖它，甚至知名的前端开发框架也依赖它。但它有个缺点——有容量限制(2.6M-10M)，我们得考虑极端情况，当LocalStorage空间快满时，怎么处理。或在架构上避免这种极端情况的发生。

问题二：前端只是JS

有些人会认为，前端开发只有js，其实非也，不是所有的效果只有js能够解决问题，还需要掌握很多知识，比如：浏览器原理，html5,css3等。比如说做一个触摸屏上的转盘，看似一个简单的效果，但是代表了前端知识的综合应用。你没有触摸屏开发经验，不知道CSS3或canvas，不了解网页优化，是做不出来的。前端是综合技术的应用，只会JS是解决不了问题的。

问题三：前端不需要了解后端知识

随着行业在发展着，前端的功能越来越强大。离线数据库能提供数据存储和管理的功能，但不会写SQL语句显然已经行不通。WebSocket能提供即时通信，但不了解socket和WebSocket的区别，能和后端开发(很多后端开发只会socket技术)一起搭建吗? 加快页面展示速度不只是要从前端分析，后端也要考虑到，使用keep alive、 缓存等后端技术能使页面更快地打开。

对于想要深造或者是从事web前端开发工作的人，如果自学能力强，可以依靠自身来学，不过也可以到培训学校学习，源码时代是一家专业培养web前端、java、php、UI设计高级人才的IT教育培训机构。欢迎大家的加入与咨询了解。

问题四：利用现有的，不学新东西

有60%的人没有h5和CSS3的实际工作经验，甚至只听过一些名词，没有研究过。这种状况的原因可能和工作内容有关，目前国内的一些移动端网页还是比较中规中矩的，产品经理对前端实现很少有非常规的要求。一些前端开发者的任务是把后端的数据给呈现出来即可，这些确实CSS2也能实现。但这些也不是不学不用新技术的理由，啃老本总有一天被淘汰。

问题五：不使用/不推动 新技术

我们已经有新的技术了，不要把它们浪费了，是时候对以前的网页和以前的操作方式进行变革了。试问一下自己，网页用了CSS3动画吗?网页支持多点触摸操作吗?距离感应器，动作感应器，你用了没有?并不是说为了用而用这些新技术，而是更应该将技术不断提升，将新技术运用到工作中。

问题六：页面给用户看，用户能用就好

Web App一直在觊觎Native App的位置，有的Web App和Native App 根本看不出差别。Web App大红大紫，各种前端MVC框架也风声水起，但它们都有个问题，几乎没法做SEO，因为搜索引擎无视JS。流量是企业的立命之本，SEO做得好能引来大量的流量，所以前端还是得考虑SEO问题。

参考技术D

第一大挑战还是兼容性。

虽然微软已经决定将ie6安乐死，ie9/10看起来相当标准。向后兼容似乎轻松了，但向前兼容又开始越来越让人头疼了。打算搞一个web app，你会发现android上的webkit是多么混乱。在桌面浏览器上总是有css hack可以摆平，但在mobile上只能考虑退化方案。从兼容浏览器（外加套壳的浏览器）到兼容设备，实际上兼容性变得更复杂了。

第二大挑战是交互的复杂度。

和目前UI/交互的要求相比浏览器引擎给我们接囗的确太低级了。于是今年前端技术的热门话题是各种javascript, css的预处理器、各种mvc框架、和微框架的讨论。

第三大挑战是代码可维护性。

复杂度的提升直接影响代码的维护性。JS/CSS/HTML代码生命周期越来越长，也就越来越需要从代码质量、架构和工具上保证它们的可维护性。代码的历史问题是永远的痛点。

第四大挑战是性能。

第五大挑战是个人成长。

前端框架都有哪些？

1、Bootstrap是最流行的前端开发框架，可以让不是前端工程师也能开发出优美的页面，更加快捷、方便的开发web页面和移动端应用。也能开发响应式web页面，上手也非常快。

中文官网：http://www.bootcss.com/

2、React 是Facebook 开发的框架，用于构建页面、javascript库。主要功能是对DOM操作，声明式设计，更快的开发出web应用系统

官网地址：http://react-china.org/

3、Semantic UI是一个完全语义化的前端CSS界面开发框架，跟 Bootstrap 比起来更加丰富些，不那么单一，在用户体验、样式都很丰富

官网地址：http://www.semantic-ui.cn/

4、Foundation by ZURB是开发适应各种设备上的前端框架，主要开发响应式web应用框架，提供很丰富的DEMO实例，学起来也非常方便上手，也提供丰富的图标库。

官网地址：http://www.foundcss.com/

5、Amaze UI是轻量级的前端应用框架，是国内比较流行的框架，比较适用于移动端响应式开发框架，可以按照项目要求生成专属的UI框架库进行使用，组件非常丰富，可以构建出漂亮的web页面。

官网地址：http://amazeui.org/

6、Pure是雅虎公司开发的轻量级、响应式CSS框架，整个框架包也是非常的小，官网也提供许多实例进行学习，对于开发小型系统界面样式可以考虑使用Pure,因为小巧方便。

官网地址：https://www.purecss.cn/

参考技术A 1.AngularJS

Angular JS 是一个有Google维护的开源前端web应用程序框架。它最初由Brat Tech LLC的Misko Hevery于2009年开发出来。Angular JS是一个模型-视图-控制器（MVC）模式的框架，目的在于使HTML动态化。与其他框架相比，它可以快速生成代码，并且能非常轻松的测试程序独立的模块。最大的优势是在你修改代码后，它会立即刷新前端UI，能马上体现出来。

2. ReactJS

React JS 不像一个框架反而更像一个库，但绝对是值得一提。AngularJS是一个MVC模式的框架，但ReactJS是一个由Facebook开发的非MVC模式的框架。它允许你创建一个可复用的UI组件，Facebook和Instagram的用户界面就是用ReactJS开发的。

3.Bootstrap框架

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
4.Foundation框架

Foundation 是一个免费的前端框架，用于快速开发。Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。

5.VueJS框架

Vue.js简介：Vue.js是一套构建数据驱动的 web 界面的渐进式框架 参考技术B 目前流行的前端框架主百要有
①AngularJS，一个度由Google维护的开源前知端道框架。
②ReactJS，一内个由Facebook研发的非MVC框架。
③Bootstrap，github热门前端框架。
如果你想要学好web前端最好加入一个好的学习环境，可以来这个Q群，首先是132，中间是667，最后是127，这样大家学习的话就比较方便，还能够共同交流和分享资料

④Fundation，一个用于快速开发的前端框架。
⑤VueJS，一个数据容驱动的前端开发框架。