web前端需要掌握的知识、web前端需要掌握的知识和技能以及自身适应情况 收藏 0

一个合格的Web前端工程师要掌握的哪些知识点？

Web前端开发人员使用的技术CSS和HTML、JavaScript，根据设计师设计的雏形来编写代码。布局，框架，浏览器涉及到不同的领域知识广度，把网站界面更好地呈现给用户。那么问题来了，初学Web前端需要掌握哪些知识呢?现在小编就来告诉你一个合格的Web前端工程师要掌握的那些知识点!

1、JavaScript

JavaScript在网页设计中是至关重要的，因为它有助于为网站提供功能。事实上，它是最流行的编程语言，因此，即使不为了Web前端开发，它仍然是一个有用的语言学习。JavaScript可以帮助你做一些互动元素并添加到你的网站地图的实时更新，在线游戏，互动电影等。使用JavaScript，可以确保你会有一个容易理解，交互的网站，可以接受任何类型的用户。

2、front end framework

CSS将帮助你更快的开发。目前，Bootstrap是可以使用的最受欢迎的前端框架。知道这些框架是如何工作的，以及如何使用它们才能在HTML5开发节省时间，这十分重要。

3、CSS preprocessors

每个Web前端开发人员都需要CSS预处理器的一些经验，因为他们将有助于加快CSS编码。他们也有额外的功能，将使您的CSS可延展性的来变得容易使用。发布代码之前，预处理器将进行处理，以确保它是可读性和可以跨所有平台使用。

4、cross browser Web development

Web前端开发人员必须知道如何使自己的网站工作模式，不管使用任何Web浏览器来访问都是如此。这样做可以确保您的用户能够访问他们需要的信息，无论他们是以何种方式。

5、CSS and HTML

开始HTML5开发的最基本的构件。一个没有CSS和HTML网页设计是不可能被创建的。例如，当你想添加图片到一个页面，HTML会显得尤为重要。学习HTML和CSS在你作为一个Web前端开发人员开始你的职业生涯就显得十分重要。而它们非常容易学习，在短短几周内便可上手。

6、Java frameworks

有相当多的Java框架，包括Backbone， Ember， AngularJS， ReactJS等等。这些框架帮助你更好的设计你的网页和编码，因为他们有一个现成的结构来让你使用Java代码。

7、responsive designs

了解如何创建响应设计也是至关重要的，尤其是当你考虑到不同的平台网络用户使用访问网络的时候。手机设计经验也是必须的，因为它将帮助你满足的人使用移动设备访问网站。

8、jQuery

一些扩展和插件，可以方便地使用Java Web开发。使用jQuery，当你开始一个新项目你不需要从头开始编码，你可以使用元素已经为您的项目，然后定制它们以适合这个项目，客户或最终用户。jQuery是用于创建网格布局，倒计时计时器，搜索表单等的插件和扩展。

9、testing and debugging

当一个项目完成后首要的就是测试，每个程序员都希望天下无bug，但是每个代码都有可能存在一些错误，学会测试代码就显得十分重要。掌握不同类型的测试，如单元测试和界面测试等。一旦你测试你的网站和发现的错误，重要的是要知道如何调试，学习不同的调试方法，这将使你的工作变得更简单。

Web前端必备基础知识点，百万网友：牛逼

1.SQL注入——常见的安全性问题。

解决方案：前端页面需要校验用户的输入数据（限制用户输入的类型、范围、格式、长度），不能只靠后端去校验用户数据。一来可以提高后端处理的效率，二来可以提高后端数据的安全。

后端不要动态sql语句，使用存储过程查询语句。限制用户访问数据库权限。后端接受前端的数据时要过滤一些特殊字符（如：“–”等字符）

后端如果出现异常的话，要使用自定义错误页，防止用户通过服务器默认的错误页面找到服务器漏洞。

2.XSS攻击——相对复杂的安全性问题

攻击方式：基于DOM的XSS即通过浏览器来直接运行js脚本，无须提交服务器，从客户端的代码引起的。

如：其实就是发送一个合法的地址加自己的脚本，比如：www.xxx.com/search?wd=…受害者点击的是www.xxx.com/search?wd=…链接，然后受害者的浏览网页就加入这个恶意代码。

存储XSS攻击即通过输入框提交js脚本或者上传文件到服务器，从网站的数据库引起的攻击。

反射XSS攻击即通过url提交js脚本到服务器，从受害人的请求发起引起的攻击。

3.CSRF攻击——比xss攻击更危险的安全性问题

攻击方式：受害者打开网站A，登陆网站A，网站A保存一些cookies在本地（没有关闭浏览器），受害者又打开网站B，网站B保存一些恶意cookies，并向网站A发送受害者的请求（网站B利用受害者攻击网站A）。

4.DoS攻击——常见的具有破坏性的安全性问题（如果是分布式攻击的话就是DDos攻击）

攻击方式：Ping Flood攻击即利用ping命令不停的发送的数据包到服务器。

5.DNS缓存污染——常见的网站不可访问的问题

攻击方式：第三方可信赖的域名服务器缓存了一些DNS解析，但被别人制造一些假域名服务器封包污

染了，指向错误网址。

6.ARP欺骗——常见的窃取资料的安全性问题

攻击方式：利用ARP欺骗，伪造成网关，让受害者的数据经过攻击者的电脑，从而抓取别人的用户信息。7.中间人攻击（会话劫持）—–常见的窃取资料的安全性问题

攻击方式：劫持会话cookies，把受害者（A）与受害者（B）之间通信经过攻击者的电脑。（常见于在线聊天系统）

8.后门 —–常见的软件漏洞问题

后门是指一种绕过安全性控制而获取对程序或系统访问权的方法。在软件的开发阶段，程序员常会在软件内创建后门以便可以修改程序中的缺陷。如果后门被其他人知道，

或是在发布软件之前没有删除，那么它就成了安全隐患。常见于一些热补丁更新软件。

攻击方式：使用webshell提交恶意的动态网页到网站服务器，然后执行恶意的动态页面（如：www.XXX.xom/恶意页面.jsp）。

兼容问题主要包括css兼容,js兼容

不同浏览器默认样式不同:

对于部分样式需要通过加入前缀解决

事件兼容的问题，我们通常需要会封装一个适配器的方法，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理

阻止默认行为:

w3c 的方法是 e.preventDefault()，IE 则是使用 e.returnValue = false;

阻止事件冒泡:

w3c 的方法是 e.stopPropagation()，IE 则是使用 e.cancelBubble = true

1. 基础知识

1.1浏览器输入url到显示页面，发生了什么？

1.2 优化思路

2. 网络层面优化

2.1 HTTP请求优化

2.2 Web缓存（HTTP缓存）

2.3 Web 缓存（浏览器缓存）

3. CDN

3.1 概念

3.2 CDN 与前端性能优化

4. 渲染层面优化

4.1 浏览器渲染

4.2 DOM 优化

作为产品经理的你，这些前端知识你都知道吗？

加入人人都是产品经理【起点学院】产品经理实练营，BAT产品总监手把手带你学产品

如果评选近几年互联网行业最火的职位，产品经理一定可以排到前三。到如今，很多人毕业之后直接担任了产品经理/助理的岗位，这也得益于产品岗俨然已成为了很多企业校招时的重头戏。

与直接以产品经理岗位为职业起点的应届生不同，业内也存在很多优秀的产品经理是由如开发、视觉设计等其它岗位转化过来。对于转岗做产品的人来说，先前的工作经验无疑在一定程度上也增加了自身的优势。

对于产品经理来说，思维逻辑能力、沟通表达能力等等都是很重要的人才衡量标准。同时若在某些岗位有比较多的了解，也会增加其竞争力。比如程序猿出身的产品经理，往往对技术实现的可行性、开发工作量等方面有一定的先天优势；视觉设计出身的产品经理，往往在页面设计、用户体验等方面更胜一筹。

换个角度来理解，产品经理需要了解产品整个研发周期相关的各种知识，才能具备成为优秀产品经理的基本素质（注意：只是具备了基本素质而已）。所以我个人坚持的一个观点就是产品经理要有孜孜不倦的学习态度，对相关的领域充满好奇心，换句说好奇心改变产品经理的视野格局（怎么这么像某个手机品牌的slogan…）。

说回来我们的主题，产品人为什么要学习前端知识？我感觉最重要的原因是两个：技术门槛低、更接近用户和UI设计，另外还会带来一个便利性。

首先，前端开发技术门槛相对较低。相比APP、后台服务器等项目，前端开发要简单的很多，对于技术门外汉来说，完全可以放下对“编程”两个字的恐惧心理，并且由于技术门槛低，做的东西更容易所见即所得，在学习过程中更能带来成就感，而这种成绩感正向的激发出更多学习热情。所以说，如果你是一名不懂技术的产品经理，强烈推荐通过前端开发这门技术来走进程序猿们的世界。

其次，前端更接近用户和UI设计。跟后端不同，用户直接面对使用的就是前端页面，所以在开发过程中需要不断地站在用户的角度去考虑问题，这在用户体验方面会和产品经理的职责产生一定的化合作用。同时，前端也需要更多的关注页面布局、视觉展现等等，这在UI设计层面也能和产品经理的职责相辅相成。所以说，站在产品经理的角度来看，前端开发相比其他技术更适合进行深层次的探索。

另外，当测试web项目前端页面时还有个好处，因为有前端知识，所以自己可以随时查看页面中各元素的属性，并能进行细节的调整且能实时看到效果。这样在和前端开发、UI设计师等沟通时更加便捷准确，经过你的试验后，可以直接跟他们说按钮的高度改为24px会不会更好一点，而不是很模糊的说按钮的高度调小一点吧。这在一定程度上也会提升整个团队的协作效率。

学习前端知识前，首先要先从宏观层面对整个前端体系有个大致的了解。由于我也不是技术出身，更专业的分析解读可以通过查询相关的知乎问题等资料去了解，以下只是我站在产品经理角度的一些不成熟的理解，若有误欢迎请高手指正。

对于用户而言，最直观的东西无非就是可以肉眼看到的东西，而html/css就是用来干这个的。html 指的是超文本标签语言，说白了就是一堆标签，标签中定义了网页中展现的各种元素，比如网页的标题、正文中的文字、图片、视频等等；CSS 指层叠样式表（Cascading Style Sheets），说白了就是定义html中元素的表现形式，比如字号、颜色、对齐方式等等。

在学习阶段，要了解很多东西，包括但不局限于：

1. 常用html标签的含义，比如<a>**</a>定义一个链接等
2. CSS的框模型，即margin、border、padding等具体的含义代表什么；
3. CSS选择器的种类，如元素选择器、类选择器以及通常的用法
4. CSS定位模式都有哪些？
5. ……

我之所以举几个例子说明，是想表明在我们学习的过程中，不要钻知识点的牛角尖，更要学会分模块的总结思考，这样才能融会贯通，学起来更加高效。在这个阶段推荐w3school 在线教程，这个网站虽然看起来非常接地气，但非常适合入门学习。

通过入门篇的学习，基本上可以写一些静态的界面了。而JavaScript则是用来实现交互效果，让html、css展示的静态页面动起来。比如当鼠标悬浮到分享按钮上方，则会弹出分享渠道的一个小窗口，这个就是用JavaScript实现出来的。

在了解一些基础的JavaScript概念之后，则可以继续学习jQuery，其实就是一个JavaScript代码库，通过jQuery能够显著降低我们编写交互效果的难度。

这个阶段同样推荐w3school 在线教程这个网站进行学习，同时也可以通过专业的渠道去了解一些前端UI框架的社区网站，提供大量 CSS 样式与 jQuery 插件，从而能够帮助我们快速的制作一些酷炫的交互网站。

以上两个篇章基本就是前端的内容，在知乎上曾看到这样一句描述，根据非常贴切：html是名词，css是形容词，javascript是动词，三个互相配合才是一个句子。对于产品经理而言，学习了解这些知识已经足够了，完成达到了学习前端的初衷，如果对此十分感兴趣，想学的更深入，则可以更进一步。

前端完成了浏览器页面展示的运算，页面的展现离不开服务器和数据库的支持，这就是后端的开发。后端的架构不像前端已经有很明确的标准形式，目前存在各种方案，而且技术门槛相比前端也比较高。我对这块的了解也非常少，有兴趣的同学可以移步更专业的地方去学习了解。

学习前端小心得

虽然我大一学过C++语言，但并没有走开发的路线，所学到的知识也仅限于书本，所以严格意义上我也是一个技术门外汉。因为最近的一个web项目和自身的好奇心驱动，所以才在最近不到一个月内的零散时间学习了解一些相关的知识（目前水平有限，仍需继续研究），学习过程中的一些小心得也希望能跟大家分享。

1. 先通过文中分享的网站教程，认真过一遍html+css的知识点，尽量全面细致，有些知识点看不懂不要紧，但至少要在脑海中留下印象（下一点会说明为什么）
2. 教程中会有一些小练习，尝试理解并能够自己写一些拓展的页面展示，过程中发现不理解的点要回过头再去细看对应的知识点（只有先留下印象才能定位到问题在哪里，然后知识点和实践结合起来更能方便理解掌握）
3. 仿照一些简单的静态网页，比如电商登录页面，利用学到的html、css知识临摹出来，期间可以通过查看网页源码帮助自己思考（不会看源码的同学请自行百度），主要锻炼自己html标签的使用、css属性使用、以及div定位布局等方面的知识
4. 可以先学习html+css入门的知识，写一些静态页面有了一定基础之后，再开始学习JavaScript知识，然后给制作的静态页面添加交互效果，循序渐进的学习，尽量不要想着一步到位，不然容易打消积极性
5. 可以尝试写一下小的项目，比如个人的网站。同样在过程中会遇到很多问题，要学会不断回到第1、2点进行复盘学习帮助对知识点的加深，也要学会通过参考其它网页源码获取思路，最重要的要不断总结思考

个人练习作品分享

在学习过程中，我也尝试写了一个个人网站，目前还非常简陋（大神勿喷），分享出来供大家一起学习交流。

对了，如果想把自己的网站挂到网上，还需要学习建站技术，购买域名、主机服务器等。目前对具体的步骤我也不太清楚，今后有时间可以研究一下把网站放上去，想想还算是比较有成就感的一件事情。

如果大家感兴趣，目前只能把网页文件下载到本地，然后本地打开查看（这样也有个好处，用到的图标和背景图片可以更方便的拿到），欢迎大家交流指正。

本文由 @刘鹏 原创发布于人人都是产品经理 ，未经许可，禁止转载。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com