社区
JavaScript
帖子详情
关于WEB开发和SEO优化的相关联系--------渐进式加强
sougerlife
2011-09-05 11:59:13
不知道谁看过web标准和seo实践一书么
我感到非常的迷茫。
对于渐进式加强和到底在CSS ,JS的选择上,
静态上到底是如何控制
...全文
25
回复
打赏
收藏
关于WEB开发和SEO优化的相关联系--------渐进式加强
不知道谁看过web标准和seo实践一书么 我感到非常的迷茫。 对于渐进式加强和到底在CSS ,JS的选择上, 静态上到底是如何控制
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
单页面和多页面
开发
及应用
# 单页面和多页面
开发
及应用 # 单页面: - 什么是单页面:单页面是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入。 - 跳转仅加载一次,用于PC和公务网站 - 页眉 -> 第一页,第二页, 第三页 -> 脚本 # 单页面技术: -AngularJS是一个全面的客户端侧框架。其模板基于双向UI数据绑定。数据绑定是一种自动方法,在模型改变时更新视图,以及在视图改变时更新模型。其HTML模板在浏览器中编译。编译步骤创建纯HTML,浏览器将其重新渲染到实时视图。该步骤会在随后的页面浏览中重复。在传统的服务器端HTML编程中,控制器和模型等概念在服务器进程中进行交互以产生新的HTML视图。在AngularJS框架中,控制器和模型状态在客户端的浏览器中维护,从而使生成新页面不依赖与服务器的交互。 -Ember.js是基于模型-视图-控制器(MVC)软件架构模型的客户端侧JavaScript
Web
应用程序框架。它允许
开发
人员在一个框架中通过常用的习惯用语和最佳实践来创建可伸缩的单页面应用程序。该框架提供丰富的对象模型、声明性双向数据绑定、计算属性,Handlebars.js提供的自动更新模板,以及一个路由器管理应用程序状态。 -Meteor.js是一个专门为单页应用设计的全栈(客户端-服务器)JavaScript框架。它具有比Angular、Ember或ReactJS更简单的数据绑定特性且使用--Distributed Data Protocol和一个发布/订阅来自动将数据更改传播到客户端,无需
开发
人员编写任何同步代码。全栈反应确保从数据库到模板的所有层都可以在必要时自动更新。诸如服务器端渲染等生态系统包则解决搜索引擎
优化
(
SEO
)等问题。 -Aurelia是一个适用于移动设备、桌面和网页的JavaScript客户端框架。它类似AngularJS,但更新、更符合标准,并采用模块化举措。Aurelia使用下一代ECMAScript编写。 -Vue.js(通常称为Vue)是一个用于构建用户界面的开源
渐进式
JavaScript框架。 -React(通常写为React.js或ReactJS)是一个构建用户界面的JavaScript函式庫。它由Facebook、Instagram和个人
开发
者以及企业社区维护。React最大的优势是易于使用——基本上任何熟悉HTML的
开发
人员都可以创建React应用程序。另一个所称的优势是可能使用相同的技术堆栈来同时创建
Web
与移动应用程序。有多家公司使用React和Redux库来让
开发
人员创建复杂但可扩展的
Web
应用程序。 -Fulcro是一个全栈库,它采用Netflix的Falcor,Facebook的Relay和Om Next对反应性,功能性,数据驱动软件进行改编的数据驱动原则。 -单页面做
seo
(搜索引擎
优化
): -根据部分进行
优化
为每个关键字创建一个
或
或每个关键字并为其分配一个适当的ID,该页面上的内部链接将链接至ID。 -
优化
页面速度对于单页网站
SEO
来说至关重要。 - 做了
seo
以后,单页面还是单页面 # 单页面优点: -减小服务器压力。 如果不用单页面(spa),如果每次切换页面的时候,都向服务器发送一个请求,服务器返回一个html文件;但是如果使用了单页面,在切换时,不需要请求服务器,只要通过本地的js来切换即可。并且服务器端就不需要配置路由,完全做到了前后端分离 -增强用户体验,增加app的使用流畅性。 使用spa之后,页面在切换的时候非常流畅,完全没有那种不断刷新的感觉,而是非常快的就有了响应,因为js运行速度很快,所以js在做本地路由的时候,就会非常快。 -单页应用没有页面之间的切换,就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象。 -单页应用相对服务器压力小,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍。 -良好的前后端分离。后端不再负责模板渲染、输出页面工作,后端API通用化,即同一套后端程序代码,不用修改就可以用于
Web
界面、手机、平板等多种客户端。 -单页面缺点: -首次加载耗时比较多。 解决办法:可以采用基于HTTP Chunk 的首屏数据
渐进式
预加载方案,该方案总体减少了单页应用1.2s的首屏呈现时间。首屏数据
渐进式
预加载的
优化
思路也得到了体现:
优化
首屏数据加载节点的速度。 预先加载首屏数据,使得多个串行节点并行化。 -
SEO
问题,不利于百度,360等搜索引擎收录。 解决办法:可以采用prerender服务,它拿到请求够,直接在服务端的一个js engine里,运行这个HTML(就像浏览器做的那样),直到内容动态填完之后,再广播一个事件告诉phantomjs“内容已经好了,可以返回给爬虫了”,这样爬虫就拿到了一份完整的HTML,就和在浏览器里渲染完的一样。目前流行的框架都有对应的服务器渲染框架 -如有造成Css命名冲突。 解决办法:我们可以使用Sass、LESS和Stylus等CSS预处理器,在一定程度上可以解决该问题。 -前进、后退、地址栏、书签等,都需要程序进行管理,页面的复杂度很高,需要一定的技能水平和
开发
成本高。 # 多页面: -什么是多页面:每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用 - 跳转需要刷新所有资源,用于app 或 客户端 - 页眉 -> 第一页 -> 脚本,页眉 -> 第二页 -> 脚本,页眉 -> 第三页 -> 脚本 -多页面优点:给用户提供一个完美的视觉方向,重点是没有很多的菜单,简洁明了的
SEO
管理。由于可以针对每页一个关键字
优化
应用程序 -多页面缺点:后端和移动客户端不能同时使用,前端和后端
开发
紧密结合。
开发
变得相当复杂。
开发
人员需要为客户端和服务器端使用框架。这导致应用程序
开发
时间更长。 # 区别: -组成:单页面由一个外壳页面和多个页面组成, 多页面由多个完整页面组成 -css(资源公用):单页面为共用,只需要外壳部分加载,多页面则不共用,每个页面单独加载 -刷新方式:单页面页面局部更改或刷新,多页面整页刷新 -url模式:单页面 a.com/#/pageone 多页面 a.com/pageone.html -用户体验:单页面页面切换快,用户体验良好,多页面加载缓慢,流畅度不够,用户体验较差 -转场动画:单页面容易实现,多页面无法实现 -数据传递:单页面容易,多页面需要依赖url传参,或cookie,localSrorage等 -搜索引擎
优化
:单页面需要单独方案,实现较为困难,不利于
SEO
搜索,可利用与SSR
优化
,多页面实现方法容易 -适用范围:单页面高要求的体验度,追求页面的流畅,多页面追求高度支持搜索引擎的应用 -
开发
成本:单页面较高,需要专业的框架,多页面较低,但页面重复代码较多 -维护成本:单页面相对容易,双页面相对复杂
什么是
web
开发
(7)
SEO
优化
:搜索引擎
优化
(
SEO
)是通过合理的网页结构、关键字选择和网站可访问性,提高网站在搜索引擎中的排名。通常使用编程语言(如Python、Java、PHP等)和数据库(如MySQL、MongoDB等)来处理与数据库的交互、业务逻辑和服务器配置等任务。(3)
Web
语义化:使用恰当的HTML元素和属性,使得网页内容更易理解、可访问性更好,并有利于搜索引擎
优化
(
SEO
)。主要使用HTML(超文本标记语言)、CSS(层叠样式表)和JavaScript来实现网页的结构、样式和交互。
SEO
优化
——从入门到实战
这是一个门针对
SEO
从业人员和网站技术
开发
人员的
SEO
基础培训的视频教学课程。该课程不仅包括了微观层面的 技术细节的
优化
,更是涵盖了宏观层面的
SEO
策略。以及大量来自于大型网站的实战案例的经验分享。
Web
前端
开发
-1-考试总结
Web
前端
开发
-1-考试总结
渐进式
web
应用程序_
渐进式
Web
应用程序与加速的移动页面:有什么区别,哪种最适合您?
渐进式
web
应用程序Do you understand what PWAs and AMPs are, and which might be better for you? Let's have a look and find out. 您了解什么是PWA和AMP,哪一种可能更适合您? 让我们看看并找出答案。 So many people own smartphones these days. ...
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章