前端单页指什么_前端都干什么的

Ⅰ 认识单页面应用

coding
teambition
cloud9

注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。（使用js控制渲染来替换html跳转）

单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

因此，对单页面应用来说，模块化的开发和设计显得相当重要。

原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

单页面应用的优缺点：
优点：
1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：
1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好
2、SEO不友好
SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

1、Hash模式：（也就是通过锚点？）
这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 " www..com/#hashhash " ，其中 "#hashhash" 就是我们期望的 hash 值。
hash 值的变化不会导致浏览器像服务器发送请求，而且hash 的改变会触发 hashChange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

2、History模式
在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转。

在 HTML5 的规范中，history 新增了以下几个 API：

hash模式和history模式对比
1、hash 模式相比于 history 模式的优点：

兼容性更好，可以兼容到IE8
无需服务端配合处理非单页的url地址

2、hash 模式相比于 history 模式的缺点：

看起来更丑。
会导致锚点功能失效。
相同 hash 值不会触发动作将记录加入到历史栈中，而 pushState 则可以。

引用：
https://www.cnblogs.com/ppforever/p/5126640.html
https://www.jianshu.com/p/0c32c85c668b
https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1

Ⅱ 单网页应用的前端框架都有哪些

Ⅲ 单页应用和多页应用的区别

单页应用

简单来说就是一个HTML的应用。浏览器一开始就会加载应用必须的HTML、CSS、JS资源。其后的操作都是由js控制来实现的。路由是有前端来控制

优点：操作体验流畅

前端组件化开发

前后端分离，实现API多用共享

缺点：首屏渲染加载资源多。

不利于搜索引擎，因为内容是动态生成的。

多页应用

是包含多个独立的HTML页面的应用，每次页面跳转，后端都会返回一个HTML页面。路由由后端控制。

优点：有利于搜索引擎

相对来说首屏加载速度快

缺点：页面切换效率低

Ⅳ 构建单页面应用前端人员需要哪些方法

所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。

开发框架
ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。
jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统，整个解决方案会相对比较轻量、灵活。
但由于jQuery主要面向上层操作，它对代码的组织是缺乏约束的。如何在代码急剧膨胀的情况下控制每个模块的内聚性，并且适当在模块之间产生数据传递与共享，就成为了一种有挑战的事情。

为了解决单页应用规模增大时候的代码逻辑问题，出现了不少MV*框架，他们的基本思路都是在JS层创建模块分层和通信机制。有的是MVC，有的是MVP，有的是MVVM，而且，它们几乎都在这些模式上产生了变异，以适应前端开发的特点。

这类框架包括Backbone，Knockout，AngularJS，Avalon等。

组件化
这些在前端做分层的框架推动了代码的组件化，所谓组件化，在传统的Web产品中，更多的指UI组件，但其实组件是一个广泛概念，传统Web产品中UI组件占比高的原因是它的厚度不足，随着客户端代码比例的增加，相当一部分的业务逻辑也前端化，由此催生了很多非界面型组件的出现。
分层带来的一个优势是，每层的职责更专一了，由此，可以对其作单元测试的覆盖，以保证其质量。传统UI层测试最头疼的问题是UI层和逻辑混杂在一起，比如往往会在远程请求的回调中更改DOM，当引入分层之后，这些东西都可以分别被测试，然后再通过场景测试来保证整体流程。

代码隔离
与开发传统页面型网站相比，实现单页应用的过程中，有一些比较值得特别关注的点。

从单页应用的特点来看，它比页面型网站更加依赖于JavaScript，而由于页面的单页化，各种子功能的JavaScript代码聚集到了同一个作用域，所以代码的隔离、模块化变得很重要。

在单页应用中，页面模板的使用是很普遍的。很多框架内置了特定的模板，也有的框架需要引入第三方的模板。这种模板是界面片段，我们可以把它们类比成JavaScript模块，它们是另一种类型的组件。

模板也一样有隔离的需要。不隔离模板，会造成什么问题呢？模板间的冲突主要存在于id属性上，如果一个模板中包含固定的id，当它被批量渲染的时候，会造成同一个页面的作用域中出现多个相同id的元素，产生不可预测的后果。因此，我们需要在模板中避免使用id，如果有对DOM的访问需求，应当通过其他选择器来完成。如果一个单页应用的组件化程度非常高，很可能整个应用中都没有元素id的使用。

代码合并与加载策略

人们对于单页系统的加载时间容忍度与Web页面不同，如果说他们愿意为购物页面的加载等待3秒，有可能会愿意为单页应用的首次加载等待5-10秒，但在此之后，各种功能的使用应当都比较流畅，所有子功能页面尽量要在1-2秒时间内切换成功，否则他们就会感觉这个系统很慢。

从这些特点来看，我们可以把更多的公共功能放到首次加载，以减小每次加载的载入量，有一些站点甚至把所有的界面和逻辑全部放到首页加载，每次业务界面切换的时候，只产生数据请求，因此它的响应是非常迅速的，比如青云的控制台就是这么做的。

通常在单页应用中，无需像网站型产品一样，为了防止文件加载阻塞渲染，把js放到html后面加载，因为它的界面基本都是动态生成的。

当切换功能的时候，除了产生数据请求，还需要渲染界面，这个新渲染的界面部件一般是界面模板，它从哪里来呢？来源无非是两种，一种是即时请求，像请求数据那样通过AJAX获取过来，另一种是内置于主界面的某些位置，比如script标签或者不可见的textarea中，后者在切换功能的时候速度有优势，但是加重了主页面的负担。

在传统的页面型网站中，页面之间是互相隔离的，因此，如果在页面间存在可复用的代码，一般是提取成单独的文件，并且可能会需要按照每个页面的需求去进行合并。单页应用中，如果总的代码量不大，可以整体打包一次在首页载入，如果大到一定规模，再作运行时加载，加载的粒度可以搞得比较大，不同的块之间没有重复部分。

路由与状态的管理

管理路由的目的是什么呢？是为了能减少用户的导航成本。比如说我们有一个功能，经历过多次导航菜单的点击，才呈现出来。如果用户想要把这个功能地址分享给别人，他怎么才能做到呢？

传统的页面型产品是不存在这个问题的，因为它就是以页面为单位的，也有的时候，服务端路由处理了这一切。但是在单页应用中，这成为了问题，因为我们只有一个页面，界面上的各种功能区块是动态生成的。所以我们要通过对路由的管理，来实现这样的功能。

具体的做法就是把产品功能划分为若干状态，每个状态映射到相应的路由，然后通过pushState这样的机制，动态解析路由，使之与功能界面匹配。

有了路由之后，我们的单页面产品就可以前进后退，就像是在不同页面之间一样。

其实在Web产品之外，早就有了管理路由的技术方案，Adobe Flex中，就会把比如TabNavigator，甚至下拉框的选中状态对应到url上，因为它也是单“页面”的产品模式，需要面对同样的问题。

缓存与本地存储
在单页应用的运作机制中，缓存是一个很重要的环节。
由于这类系统的前端部分几乎全是静态文件，所以它能够有机会利用浏览器的缓存机制，而比如动态加载的界面模板，也完全可以做一些自定义的缓存机制，在非首次的请求中直接取缓存的版本，以加快加载速度。
甚至，也出现了一些方案，在动态加载JavaScript代码的同时，把它们也缓存起来。比如Addy Osmani的这个basket.js，就利用了HTML5 localStorage作了js和css文件的缓存。

在单页产品中，业务代码也常常会需要跟本地存储打交道，存储一些临时数据，可以使用localStorage或者localStorageDB来简化自己的业务代码。

服务端通信
传统的Web产品通常使用JSONP或者AJAX这样的方式与服务端通信，但在单页Web应用中，有很大一部分采用WebSocket这样的实时通讯方式。
WebSocket与传统基于HTTP的通信机制相比，有很大的优势。它可以让服务端很便利地使用反向推送，前端只响应确实产生业务数据的事件，减少一遍又一遍无意义的AJAX轮询。

由于WebSocket只在比较先进的浏览器上被支持，有一些库提供了在不同浏览器中的兼容方案，比如http://socket.io，它在不支持WebSocket的浏览器上会降级成使用AJAX或JSONP等方式，对业务代码完全透明、兼容。

内存管理
传统的Web页面一般是不需要考虑内存的管理的，因为用户的停留时间相对少，即使出现内存泄漏，可能很快就被刷新页面之类的操作冲掉了，但单页应用是不同的，它的用户很可能会把它开一整天，因此，我们需要对其中的DOM操作、网络连接等部分格外小心。

样式的规划
样式规划主要是几个方面：
基准样式的分离

这里面主要包括浏览器样式的重设、全局字体的设置、布局的基本约定和响应式支持。

组件样式的划分
这里面是两个层面的规划，首先是各种界面组件及其子元素的样式，其次是一些修饰样式。组件样式应当尽量减少互相依赖，各组件的样式允许冗余。

堆叠次序的管理
传统Web页面的特点是元素多，但是层次少，单页应用会有些不同。

Ⅳ 网站设计是单页还是多页好

单页网站优势：

单页网站最直接的好处是以简单，容易和可操作的方式展示给用户。
单页站点可以让用户沉浸在简单的线性体验。整个页面有简单的头部，中部，尾部。事实上，单页网站的滚动特性使得它们非常适合于习惯了该手势的移动用户。有些专家认为，与较大的多页网站相比，单页网站的转化率更高。

劣势：

单页网站最大的劣势就是陷入把过多的内容放置在一个页面里。因为一个页面不可能容纳所有的一切。而是需要有视觉层次和大量的规范制约。随着内容类别的增加（例如博客，新闻，服务，产品），单页网站的可用性越高。从技术的角度来看，单页网站的搜索优化比多页网站少。当一个页面上的内容和图像很多时，他们会加载很慢。对搜索的内容查询。虽然单页网站可能会提高您的主要关键字的相关性，但更有可能会稀释其在自己的网页上排名更高或次之的子主题和字词的相关性。

多页网站：多页网站通常由拥有广泛产品或服务的大公司所有。他们的用户也可能是相当多样化，这些网站的要点是：需要尽可能大容量；由于内容的数量，他们需要层次分明；很多时候，它们由许多微型网站和子部分组成，以分解信息和内容，并提供多个入口点；它们提供对多个页面和改变内容的SEO的更好控制。

优势：

多页网站对于需要传统导航的用户来说很有意义。他们需要给用户提供更多的信息。例如，对于电子商务网站，用户不想花费一个页面了解您公司的故事或员工。而是想要找到想要的产品，付费然后使用。在这种情况下，到不同页面的导航栏就会非常有效。

劣势：如果设计的网站越复杂，传统导航就越难展示和查找。

总结：采取内容优先的方法。找出用户关心的内容，然后相应地设计您的界面。

确保你的网站适合纯粹的单页体验。如果你不能把所有内容简洁的放入一个页面，请考虑混合网站。如果需要用户知道多个类别，请使用多页网站。

不要忽视SEO，可以用单页网站建立搜索引擎优化。

用户不总是喜欢阅读，这就是为什么信息图表和视频是新用户体验的一部分。任何大小的网站都需要使用户可以快速浏览。

把事情简单化，设计的一致性实际上对用户来说操作更简单。

网站的清晰度很重要。

Ⅵ 前端都干什么的

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。

前端技术一般分为前端设计和前端开发。

1、前端设计一般可以理解为网站的视觉设计。

2、前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

(6)前端单页指什么扩展阅读：

HTML、CSS、JavaScript这三个是前端开发中最基本也是最必须的三个技能。

1、HTML

HTML指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。

2、CSS

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。

3、JavaScript

JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

Ⅶ 什么是单页网站

单页网站是指只有一个页面的网站。
制作网站的工具和语言分很多种，其中用于做网页的包括HTML、JSP、asp、PHP等，但是要能单独显示的只有HTML。
网上也有很多制作单页网站的模板，如果想要制作单页网站，可以参考网络经验：http://jingyan..com/article/7908e85c7cb247af481ad296.html，按照步骤制作即可。

Ⅷ 印刷类单页·拆页指的是什么

单页是指它的页码只有1-2
拆页是指它的页码最少有1-4

Ⅸ web前端开发，主要工作内容有哪些特点呢

随着互联网全面进入移动时代，前端已逐渐成为互联网行业的重要角色。前端是做什么的？工作内容是什么？简单来说，前端所做的就是在用户终端上实现产品的UI设计，可以说，用户看到的所有视觉和交互都是前端的范畴。根据这个定义，我们可以把前端的工作内容概括为配合开发和UI设计部门完成前端页面的开发，并根据产品需求负责前端应用的维护和优化。

因此，要想真正掌握Web前端开发技术，灵活运用到企业项目中，还需要你能真正接触到一些企业项目，了解前后台的交互，然而这需要的时间是不可估量的。视觉设计师在设计图纸的基础上，利用HTML和CSS合作创建页面。同时，在此基础上，完成页面维护和网站前端性能优化。此外，一个合格的前端开发工程师，应该具备一定的审美能力和基本的美术操作能力，能够很好地与交互和视觉合作。

小编针对问题做得详细解读，希望对大家有所帮助，如果还有什么问题可以在评论区给我留言，大家可以多多和我评论，如果哪里有不对的地方，大家也可以多多和我互动交流，如果大家喜欢作者，大家也可以关注我哦，您的点赞是对我最大的帮助，谢谢大家了。

Ⅹ 1.单页面应用程序

下面构建一个简单的 todo list 来展现多页
后台
后台只需要设计好以下数据接口，让前端可以访问
Get： http://127.0.0.1:3000/todos
Post： http://127.0.0.1:3000/todos

前端
前端直接使用 ajax 异步请求后台的接口请求数据后渲染页面

index.html （渲染 todo list）

add.html （输入 todo 点击保存后跳转 index.html）

上述例子可以看出来前端后台职责明确，但多页需要整个页面重新渲染

单页开发可以通过增加 hash 进行页面标识（类似锚点），通过 window.onhashchange 事件判断 hash 值改变，进而通过 window.location.hash 获取 hash 值渲染对应的局部页面。（本案例服务端接口同前）
index.html

myTodoList.html

add.html

通过上述方式可以实现单页，但是这种方式有缺陷，在操作 DOM 元素进行渲染的过程中，不同页面的 DOM 元素很可能冲突，一旦页面多了同样难以维护，因此诞生了三大前端框架：

前端单页指什么

与前端单页指什么相关的内容