禁用JavaScript之后,你的网站表现如何?

news/2024/5/20 8:40:27/文章来源:https://blog.csdn.net/cpongo1/article/details/89540718

禁用JavaScript之后,你的网站表现如何?

最近要做一个新官网,需求评审完之后,考虑到官网都是纯静态页面,功能简单,操起vue-cli3几秒内创建好了项目脚手架,开发前,我打开了首页模板文件,看到下面这行字,有了一些思考……

<strong>We're sorry but **** doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>


(ps:四个*是项目名,略去了)

JS最初是用来给界面添加交互的,近几年,前端火的原因则主要是因为JS,新技术绝大部分都是基于JS,随着MVVM框架的兴起,前端越来越依赖JS,就像现代工业依赖电力一样,JS甚至一定程度上替代了HTML,使得前端开发者在开发大型项目上更方便快捷了,目前看起来一切都很好,嗯,事实上真的很好吗?

我想说什么呢,回到本文开始的那行代码,它的作用显而易见,禁用了JS的用户去访问这个网站,就会看到这行提示:当前项目离了JS就跑不起来,请开启JS后继续访问。当浏览器禁用了JS,网站变得一片空白,完全无法访问,这正常吗?显然这是不可接受的,从程序的可访问性、容错性来评分,这个网站的得分肯定是不及格的!

来看几家比较知名的企业官方网站,在禁用JS后表现如何?

小米官网 测试日期2018-11-26
小米官网容错性测试

测试结果:基本功能无法使用,导航显示但无法点击
_

魅族官网 测试日期2018-11-26
魅族官网容错性测试

测试结果:基本功能无法使用,导航不显示
_

锤子官网 测试日期2018-11-26
锤子官网容错性测试

测试结果:基本功能无法使用,页面一片空白
_

测试结果很不理想,会有人说,用户能禁用JS就能启用JS,和开发者没关系,不必为此做特殊处理。至于需不需要处理,我认为需要综合考虑以下两点

1、从商业角度,想不想让禁用了JS的用户正常访问你的网站甚至成为你的客户

2、从开发者角度,考虑开发成本高低,付出和收益是否成正比

上面几个例子结果不太理想,有没有做得比较好的企业?

Apple官网 测试日期2018-11-26
Apple官网容错性测试

测试结果:90%的功能正常使用,导航显示且可以点击切换

Apple:不是我多优秀,全靠同行衬托!

果然没有对比就没有伤害。同类型的网站,功能大体相同,Apple.com在禁用了JS的情况下仍然可以正常访问90%的内容,可访问性优。

其他包括tencent.com、360.com等网站这方面也做的不错,就不放图了。


还会有人问,谁会去禁用JS?

禁用JS的场景包括但不限于以下几个场景

对安全性要求比较高的系统,比如服务器
个人原因禁用了JS(比如为了不看各种弹出广告)
浏览器厂商因网络原因禁用JS(Android端Chrome未来在2G网速下将禁用JS)
不管主动禁用还是被动禁用,禁用的原因各种各样,总结起来无非三点:安全原因、广告骚扰、网络限制。

既然JS被禁用的场景客观存在,在项目开发前,根据项目实际情况考虑以下原则:

根据实际情况选择合适的技术方案
能用CSS实现的,优先使用CSS

现在MVVM大行其道,但不是什么项目都适合用MVVM框架,JS热火朝天,也不能什么交互都上JS,JS在很多情况下不是必须的,假如要做一个官网,就不建议用单页应用,用JS做路由,JS挂了,页面就白屏,另外SEO也是个问题,锤子的官网就是单页应用。

一般图片轮播都用JS实现,不考虑低版本浏览器的话,CSS3一样可以做轮播图,导航下拉效果,完全可以用鼠标hover父级元素display子元素的方式实现(以上三家国产手机厂商都是用的JS),元素定位,大部分情况也不需要用到JS。

今时今日,JS早已经不是用来增加动态效果那么简单的脚本语言,它已经成了前端发展最重要的一环,切勿迷失在新技术的红海里,选择合适的技术做合适的功能,做之前多做一些思考,这就是我想说的。
原文地址https://www.cnblogs.com/wangmeijian/p/10009645.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_736920.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论好用的云主机对于网站运营的重要性

网站的运营对于企业来说&#xff0c;其重要性是不必多言的&#xff0c;不管是企业还是个人&#xff0c;网搭建好后&#xff0c;只有很好地运营起来才能带来收益。既然后期的网站运营对于企业或个人网站来说如此重要&#xff0c;那影响网站后期运营的重要因素又有哪些呢&#xf…

网站被黑该怎么修复漏洞

近日wordpress被爆出高危的网站漏洞&#xff0c;该漏洞可以伪造代码进行远程代码执行&#xff0c;获取管理员的session以及获取cookies值&#xff0c;漏洞的产生是在于wordpress默认开启的文章评论功能&#xff0c;该功能在对评论的参数并没有进行详细的安全过滤与拦截&#xf…

找网站建设工作前的练习,织梦分页列表样式错误问题,没有可点击分页标签只有记录并且样式错误...

因为要去找工作&#xff0c;就想把自己先做个网站到时面试能加分。 于是&#xff0c;织梦登场&#xff0c;当然工作了可能也是必备的。 第一天&#xff0c;文档模板总是提示不存在&#xff0c;但是我已经改了啊&#xff0c;结果搜索了一天答案都没找到问题&#xff0c;第二天醒…

网站验证码的生成原理、难度控制,及python实现...

图片验证码已经广泛的使用在各种反爬虫的场景中&#xff0c;验证码的的生成验证过程对于开发者来说是零成本的&#xff0c;对于用户体验来说可能稍差、但是对于爬虫来说是致命的和高成本的。 下面将介绍使用python实现网站验证码的产生及验证的全过程&#xff0c;然我们对验证码…

C#实现一直疯狂get访问一个网站

好无聊&#xff0c;哈哈&#xff0c;就写了个这玩意&#xff0c;也没什么技术含量using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.IO;using System.Net;using System.Threading;namespace aotoHttpGet{class Program{static…

JAVA游戏停产_烽火18台系列之十四:应急处置“网站一键关停”

前不久&#xff0c;“永恒之蓝“病毒肆虐整个互联网&#xff0c;各网络安全管理员们纷纷忙于打补丁、拔网线、做封堵&#xff0c;那种”想哭“的感觉还记忆犹新&#xff0c;那幅手忙脚乱的画面还历历在目。网络安全工作的重点已经从“防御”一切可能的攻击逐渐转向提升应对攻击…

网站程序有漏洞怎么修复和查找漏洞

ecshop目前最新版本为4.0&#xff0c;是国内开源的一套商城系统&#xff0c;很多外贸公司&#xff0c;以及电商平台都在使用&#xff0c;正因为使用的人数较多&#xff0c;很多攻击者都在挖掘该网站的漏洞&#xff0c;就在最近ecshop被爆出高危漏洞&#xff0c;该漏洞利用跨站伪…

java和seo学那个_seo和java哪个更好

一个seo行业站点&#xff0c;科学的内容制作应该与seo相关&#xff0c;且内容本身是有人搜索的。seo和java哪个更好是有人搜索的语句&#xff0c;且与seo是强相关的&#xff0c;对于seo教程自学网来讲&#xff0c;这样的内容再适合不过了。任何一门技术&#xff0c;如果精通&am…

网站被黑导致被西部数码关闭 提示有害信息未处理的解决方案...

前段时间有一客户的网站打不开了&#xff0c;打开网站被提示什么:抱歉&#xff0c;主机因存在有害信息逾期未处理被关闭 Sorry, the site now can not be accessed. 客户第一时间找到我们SINE安全寻求解决方案&#xff0c;我们根据客户的反馈&#xff0c;进行详细的记录&#x…

百度站长平台的正确使用方式,seoer必备技能!

seo技术指标&#xff1a;如何查看网站的变化利用百度站长平台最为准确&#xff0c;都知道百度自己的产品&#xff0c;当然统计出来的数据也是最为准确的。第一&#xff1a;把网站添加到百度站长平台中去&#xff1a; 搜索资源平台--站点管理 点开站点管理&#xff0c;添加自己的…

家乡网站的设计与实现_博客网站的设计与实现(工具篇)

一、系统的设计目标目标&#xff1a;能够注册用户&#xff0c;用户可以创建自己的博客&#xff0c;而且用户间可以互动。二、开发工具及安装配置MyEclipse,Navicat for MySQL1.1 MyEclipse1、简介&#xff1a;MyEclipse是在eclipse 基础上加上自己的插件开发而成的功能强大的企…

小白在阿里云云服务器上如何发布自己的网站(建站|详细)...

昨天发的小白在阿里云云服务器上如何发布自己的网站&#xff08;建站|详细&#xff09;&#xff0c;今更新一下 一、选购云服务器 到阿里云官网进行选购1.1 使用学生优惠购买使用学生优惠后为118元/年1.2 市场价购买如果是没有学生优惠的话&#xff0c;请用市场价购买 阿里云还…

网站高可用架构--一

网站的可用性&#xff08;Availability&#xff09;描述网站可有效访问的特征。 网站可用性的度量与考核网站可用性度量2.网站可用性考核 可用性指标是网站架构设计的重要指标。从管理层面&#xff0c;可用性指标是网站或者产品的整体考核指标&#xff0c;具体到每个工程师的考…

PageAdmin CMS网站建设教程:自动任务执行时间设置...

PageAdmin Cms发布文章时候有一个上线时间设置和下线时间设置&#xff0c;网站编辑人员可以利用这个功能来实现定时发布&#xff0c;在信息发布界面&#xff0c;如下图&#xff1a; 设置后就会自动加入定时任务中&#xff0c;注意这个功能需要再系统设置>>自动任务执行间…

物流公司网站模板_物流企业网站模板下载

网站模板下载地址&#xff1a;http://www.pageadmin.net/moban/1144.cshtml介绍&#xff1a;物流公司网站模板&#xff0c;DivCss结构&#xff0c;代码干净&#xff0c;搜索引擎更易收录&#xff0c;网站模板精心设计制作&#xff0c;用于物流公司&#xff0c;品牌官方网站的网…

外贸网站最好用的5大WordPress插件【必须安装】

网站装修好了&#xff0c;但是很多细节&#xff0c;很多功能都不能满足&#xff0c;例如我自己是做SEO出来的&#xff0c;所以有些SEO标签没有做好&#xff0c;我自己会觉得很膈应。 因为世界上存在的网站60%都是用wordpress来做的&#xff0c;这就给wordpress插件很好的生存环…

寻找海量数据集用于大数据开发实战(维基百科网站统计数据)

在学习spark的过程中&#xff0c;除了经典的WrodCount例子&#xff08;用于统计文本文件中的单词出现次数&#xff09;&#xff0c;我们也在寻找其他海量数据来做更多实战以提高自己&#xff0c;今天介绍的是一个海量数据集的下载方法&#xff0c;以及数据内容的简介&#xff1…

spark实战之:分析维基百科网站统计数据(java版)

在《寻找海量数据集用于大数据开发实战(维基百科网站统计数据)》一文中&#xff0c;我们获取到维基百科网站的网页点击统计数据&#xff0c;也介绍了数据的格式和内容&#xff0c;今天就用这些数据来练习基本的spark开发&#xff0c;开发语言是Java&#xff1b; 实战环境信息 …

网站建设中标签的使用:Tag优化标准文档

Tag 中文译作标签、书签。在很多网站中&#xff0c;由于导航无法承载更多的信息分类&#xff0c;而内容量又过大的时候&#xff0c;使用TAG来更加有效地组织网站结构和内容。 一、Tag来源 是代表某些内容&#xff08;文字、图片、音频、视频&#xff09;的关键词或词组&#xf…

bluePen – 使用在线 CSS 编辑器美化你的网站

BluePen 是一款非常强大的样式编辑工具&#xff0c;甚至可以轻松地安装在一个动态的网站中。一旦你已经安装了它&#xff0c;你就可以在任何时间&#xff0c;任何地方修改样式表&#xff0c;一切修改将实时更新到您的浏览器&#xff08;但不是线上网站&#xff09;&#xff0c;…