禁用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

禁用JavaScript之后,你的网站表现如何?相关推荐

  1. 网课作业禁止粘贴?禁用JavaScript了解一下!

    一转眼,放假快半年了 早上起来睁开眼,诶呀,考试周又到了.各个科目的期中作业都在各自的平台陆续发布了.各种乱七八糟的科目,让人烦不胜烦.首先在这里 郑重声明:本人黑眼圈纯粹是熬夜学习,与多人运动无关, ...

  2. 浏览器 禁用 javascript 脚本 解决 网页文本内容无法复制 的问题

    文章目录 Intro chrome Firefox 其他浏览器 Intro 有些网站在源码中利用 javascript ,对 copy 事件添加了自定义的事件监听器,阻止了默认事件的发生. 用人话说: ...

  3. ie禁用java怎么办,您如何解决IE中禁用javascript的问题?

    使用Internet Explorer浏览网页时,它提示已禁用javascript,这会导致网页显示异常. 那么如何解决这种问题呢? 1. 首先打开IE浏览器,然后单击上方菜单栏中的工具,然后单击In ...

  4. 禁用Javascript不显示页面【防御浏览器关闭JS】

    问题描述 作为前端技术人员,通常情况,我们会通过禁用Javascript去复制文本,现在我们攻防互换一下,我们如果要预防这种情况呢? 解决办法 因为现在我们的项目是Vue框架,这里就用Vue直接做示例 ...

  5. HTML期末大作业~基于HTML+CSS+JavaScript 牛排美食餐饮网站设计与实现(6个页面)

    HTML期末大作业~基于HTML+CSS+JavaScript 牛排美食餐饮网站设计与实现 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总 ...

  6. 如何在前端调试模式下禁用JavaScript

    如何使得界面上的元素不消失 禁用JavaScript即可,方法,F12打开调试模型,点击右上角设置图标,选择preference,选择debugger下的disable JavaScript即可禁用.

  7. 基于Html+Css+javascript的动漫网站

    1.前端三门技术 学习Web前端技术需要掌握三门基本技术:HTML,CSS,JavaScript: HTML:HTML是网页内容的载体.内容就是网页制作者放在页面上想要用户浏览的信息,可以包含文件.图 ...

  8. 谷歌浏览器禁用 javascript 以及 控制台使用

    前言: 有的时候调试,需要禁用js 那我们可以 在浏览器里禁用. 方法: 方法一:设置页面 设置 1. 浏览器输入 chrome://settings/ 或者 点击 浏览器右上角 三个点 点击设置 2 ...

  9. 狐火浏览器禁用JavaScript方法

    1.在火狐浏览器url界面输入about:config 2.在搜索框中输入JavaScript,找到javascript.enabled将其转换为false 3.现在使用火狐浏览器进行访问任何界面Ja ...

最新文章

  1. mysql数据库 中文乱码_在CMD中操作mysql数据库出现中文乱码解决方案
  2. 2.03-handler_openner
  3. 北京交通大学2018计算机硕士录取公示,2017年北京交通大学研究生录取名单!!!...
  4. 软件工程第二次作业——模仿主流网站:搜狗输入法
  5. java csrf_java使用jsp servlet来防止csrf 攻击的实现方法
  6. 【Python教程】python函数后面有多个括号的作用
  7. Nand分区及nand erase简解
  8. phoenix客户端操作hbase已经存在的表
  9. oracle强制切换redolog组
  10. ORACLE 分区表 PARTITION table
  11. 考研失败了,该何去何从?
  12. SQL Server实现读写分离提高系统并发
  13. react使用antd实现日期与时间的不可选定
  14. 鼎信诺取数oracle,鼎信诺审计前端取数讲解(最新).ppt
  15. 嵌入式软件工程师工作经验分享
  16. mysql rds 是什么_mysql.rds.aliyuncs.com
  17. pr cpu100%_PR插件NewBlueFX Titler Pro6.0安装教程
  18. Java实现图片合成
  19. 骑马与砍杀2从原神抓取武器模型到导入进游戏使用
  20. Lync 2010升级到Lync 2013之设定Lync Mobile!

热门文章

  1. 自动取款机如何使用无卡取款_云南铝管自动抛光机如何使用_利琦抛光机械
  2. 小括号教学设计导入_【教资面试】语文政治历史地理教学设计答题技巧!
  3. maven下载源码linux,Maven 下载 源码和javadoc 命令
  4. 【Ogre-windows】实例配置
  5. 牛人主页(主页有很多论文代码)【真的好强大】
  6. SharePoint 2013 - System Features
  7. jsonp原生js跨域拿新浪数据插件封装【可扩展】
  8. 用Itextsharp 组件导出PDF 的文档的方法
  9. 数据库四大特性与隔离级别
  10. BZOJ3795 : 魏总刷DP