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

禁用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.mzph.cn/news/252110.shtml

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

相关文章

C# 使用 Windows API 操作控件: SendMessage

在C#中&#xff0c;程序采用了的驱动采用了事件驱动而不是原来的消息驱动&#xff0c;虽然.net框架提供的事件已经十分丰富&#xff0c;但是在以前的系统中定义了丰富的消息对系统的编程提供了方便的实现方法&#xff0c;因此在C#中使用消息有时候还是大大提高编程的效率的。定…

对类的理解:

在public class First 表示如果一个类的声明为public&#xff0c;要求该类的类名必须和文件保持一致。在编译 源文件时&#xff0c;让雨果源文件中定义了多个类&#xff0c;那么每个类会形成*.class 文件&#xff0c;执行是&#xff0c;通过Java类名&#xff0c;运行的的是该类…

概率论

概率论转载于:https://www.cnblogs.com/zengkefu/p/7357249.html

Hive安装中遇到过的坑

实现说明每一个用户的环境都有细微的不一致&#xff0c;所以这里只是个人经过这些坑的处理&#xff0c;但是不意味着所有处理都是这样的操作&#xff0c;仅作为参考。 第一个坑 数据库安装&#xff0c;数据库最好装在Linux上&#xff0c;一直出了很多错&#xff0c;这里有一个博…

Halcon:模版匹配

一&#xff1a;函数介绍 1.创建模板 create_shape_model(Template : : NumLevels, AngleStart, AngleExtent, AngleStep, Optimization, Metric, Contrast, MinContrast : ModelID) Template &#xff1a;模板图像 NumLevels&#xff1a;图像金字塔级数&#xff0c;该值越小…

java基础英语---第二十六天

Terminate [ tə:mineit ] 结束 Instantiation [in,stnʃieiʃən] 实例化 Instance declared [diklεəd] 公然的 Access [ əkses ] 进入,接近,入口,通道 Accessible [əksesəbl] 可进入的 invoke [invəuk] 调用 board [bɔ:d] 木板,甲板 MainBoard card [kɑ:d] …

ASP.NET Core部署到Linux服务器(CentOS7 x64)

前言 本文主要讲解如何一步步将ASP.NET Core网站发布到Linux服务器&#xff0c;文中会讲解具体步骤及需要避免的各种问题。 目录 一、环境介绍 二、创建及发布ASP.NET Core网站项目 三、服务器软件安装&#xff08;.NET Core SDK&#xff09; 四、在服务器上部署ASP.NET Core网…

redux进一步优化

1. 将原来的 mapStateToDispatch 中的函数提取出来&#xff0c;放在组件中&#xff0c; 如原来的&#xff1a; function mapStateToProps(state, ownProps) {return {hasMore:state.getIn([tabs,hasMore]),} } function mapDispatchToProps(dispatch) {return {addTabList:(i…

C# : 调用C++动态库(dll)

在实际软件开发过程中&#xff0c;由于公司使用了多种语言开发&#xff0c;在C#中可能需要实现某个功能&#xff0c;而该功能可能用其他语言已经实现了&#xff0c;那么我们可以调用其他语言写好的模块吗&#xff1f;还有就是&#xff0c;由于C#开发好的项目&#xff0c;我们可…

Python3.5以上版本lxml导入etree报错Unresolved reference

Web抓取Web站点使用HTML描述&#xff0c;这意味着每个web页面是一个结构化的文档。有时从中 获取数据同时保持它的结构是有用的。web站点不总是以容易处理的格式&#xff0c; 如 csv 或者 json 提供它们的数据。 这正是web抓取出场的时机。Web抓取是使用计算机程序将web页面数据…

linux设置history历史记录

#说明export HISTSIZE1000 #设置历史记录显示1000行export HISTTIMEFORMAT%F %T #设置历史记录格式 999 2017-08-15 10:58:32 #修改vim /etc/profilesed -i "s/\(HISTSIZE\).*/\11000/" /etc/profilesed -i "/HISTSIZE/aexport HISTTIMEFORMAT%F %T " /et…

STL-容器库101--array【C11】

1. 原型 C11提供 template < class T, size_t N > class array;T&#xff1a; 元素类型&#xff0c;以 array::value_type 作为别名使用&#xff1b;N&#xff1a; array中元素大小&#xff1b; 固定size的序列容器&#xff1b;初始化时&#xff0c; array对象不保存任何…

C#:向C++封送结构体数组

在使用第三方的非托管API时&#xff0c;我们经常会遇到参数为指针或指针的指针这种情况&#xff0c; 一般我们会用IntPtr指向我们需要传递的参数地址&#xff1b; 但是当遇到这种一个导出函数时,我们如何正确的使用IntPtr呢&#xff0c; extern "C" __declspec(dll…

其它综合-CentOS7 忘记root密码

CentOS7 忘记root密码 长时间不用的 CentOS 机器再次开机的时候忽然忘记了密码&#xff0c;总不能就重装一台吧&#xff0c;还有好多服务在机器上&#xff0c;于是决定重置root的密码。   如果是已经开启的机器&#xff0c;需要进行关闭&#xff0c;重新启动。在启动选择内核…

left join on and 与 left join on where的区别

数据库在通过连接两张或多张表来返回记录时&#xff0c;都会生成一张中间的临时表&#xff0c;然后再将这张临时表返回给用户。 在使用left jion时&#xff0c;on和where条件的区别如下&#xff1a; 1、 on条件是在生成临时表时使用的条件&#xff0c;它不管on中的条件是否为真…

spring boot高性能实现二维码扫码登录(中)——Redis版

前言 本打算用CountDownLatch来实现&#xff0c;但有个问题我没有考虑&#xff0c;就是当用户APP没有扫二维码的时候&#xff0c;线程会阻塞5分钟&#xff0c;这反而造成性能的下降。好吧&#xff0c;现在回归传统方式&#xff1a;前端ajax每隔1秒或2秒发一次请求&#xff0c;去…

C# :socket 通讯基础使用实例

们在讲解Socket编程前&#xff0c;先看几个和Socket编程紧密相关的概念&#xff1a; TCP/IP层次模型当然这里我们只讨论重要的四层 01&#xff0c;应用层(Application)&#xff1a;应用层是个很广泛的概念&#xff0c;有一些基本相同的系统级TCP/IP应用以及应用协议&#xff0…

IBM发表论文:可能已找到处理量子计算退相干的方法

在《自然》杂志最近发表的一篇论文中&#xff0c;IBM和其他机构的研究人员设计了两种量子算法&#xff0c;利用变分量子电路和量子核估计器来训练一种支持向量机分类器。这两种算法背后的关键思想是使用量子状态空间作为特征空间表示&#xff0c;有效地构建映射&#xff0c;从原…

PHP + NGINX 控制视频文件播放,并防止文件下载

最简单的方法是使用NGINX的 internal 功能 server { listen 80; server_name www.xxx.com;  location / { index index.php index.html index.htm; root /xxx; if (!-e $request_filename) { rewrite ^/index.php(.*)$ /index.php?s$…

可视化调试工具

rosrun rqt_console rqt_console # 查看日志消息&#xff0c;可filter、highlight指定级别。 rosrun rqt_logger_level rqt_logger_level # 可设在日志记录器的严重级别 rosrun rqt_topic rqt_topic # 显示topic调试信息 rosrun rqt_publisher rqt_publisher # 在界面中管理ro…