禁用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. python实验过程心得体会_Python中django学习心得
  2. win10 计算机休眠后无法唤醒,win10休眠后无法唤醒怎么办 win10系统怎么设置休眠时间...
  3. MyEclipse 编写 ExtJS 卡死问题解决方法
  4. 服务器手工修改虚拟内存,服务器修改虚拟内存
  5. Javascript中的AES加密和Java中的解密
  6. 【算法】剑指 Offer 52. 两个链表的第一个公共节点
  7. Android FlashLight教程
  8. 对外提供dubbo服务的最佳实践
  9. 花式Finetune方法大汇总
  10. RNN、LSTM、GRU
  11. Axure8.0如何汉化?
  12. PDPS教程之工艺仿真必备软件
  13. 3_kicad 5 0_PCB计算器(稳压器,布线宽度,电气间距,传输线路,RF衰减器,颜色代码,电路板类别)...
  14. Linux有道词典依赖问题
  15. 阿铭Linux_网站维护学习笔记20190409
  16. html表格的冻结列
  17. 【ACWing】1402. 星空之夜
  18. [BZOJ]1059: [ZJOI2007]矩阵游戏
  19. 【车载】【ADC】通俗易懂ADC
  20. 模拟QQ登陆,并按QQ号查询QQ基本资料

热门文章

  1. jwt重放攻击_【干货分享】基于JWT的Token认证机制及安全问题
  2. mysql8 优化_MySQL 8.0 优化
  3. 文本多标签分类python_Scikitlearn多标签分类
  4. hadoop学习2 记录配置hadoop环境的那些坑
  5. 【TensorFlow-windows】MobileNet理论概览与实现
  6. C#调用存储过程的通用类
  7. i春秋DMZ大型靶场实验(四)Hash基础
  8. Podfile grammar
  9. 新手上路之Hibernate:第一个Hibernate例子
  10. 安装scapy遇到的问题