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

简介: 禁用JavaScript之后,你的网站表现如何?一最近要做一个新官网,需求评审完之后,考虑到官网都是纯静态页面,功能简单,操起vue-cli3几秒内创建好了项目脚手架,开发前,我打开了首页模板文件,看到下面这行字,有了一些思考……<strong>We're sorry but **** doesn't work properly without JavaScript enabled.

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

相关文章
|
1月前
|
数据采集 存储 JavaScript
赋能数据收集:从机票网站提取特价优惠的JavaScript技巧
使用JavaScript和爬虫代理IP,旅游行业可高效抓取机票特价信息。通过模拟不同地区用户,提升数据收集成功率,全面了解市场动态。数据存储到数据库后进行统计分析,助力企业把握用户需求和市场趋势优化决策。
赋能数据收集:从机票网站提取特价优惠的JavaScript技巧
|
3月前
|
存储 JavaScript 前端开发
只使用简单的 JavaScript 创建文件共享型网站
只使用简单的 JavaScript 创建文件共享型网站
39 0
只使用简单的 JavaScript 创建文件共享型网站
|
6月前
|
前端开发 JavaScript
Javascript知识【案例:网站换肤&案例:图片放大】
Javascript知识【案例:网站换肤&案例:图片放大】
|
4月前
|
JavaScript 测试技术
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发
|
3月前
|
数据采集 JavaScript 前端开发
如何使用JS逆向爬取网站数据
如何使用JS逆向爬取网站数据
|
9月前
|
数据采集 JavaScript 前端开发
使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能
使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能
|
11月前
|
XML Web App开发 JavaScript
不用 JavaScript,纯静态网站如何统计 PV?
不用 JavaScript,纯静态网站如何统计 PV?
82 0
|
11月前
|
移动开发 前端开发 IDE
零基础html5+div+css+js网页开发教程第005期 hbuilder网站开发环境搭建
零基础html5+div+css+js网页开发教程第005期 hbuilder网站开发环境搭建
120 0
|
前端开发 JavaScript
网站介绍web前端 html+css+javascript网页设计
网站介绍web前端 html+css+javascript网页设计
166 0
|
前端开发 JavaScript
前端知识学习案例2-开发企业网站2-准备js库 图片等
前端知识学习案例2-开发企业网站2-准备js库 图片等
53 0
前端知识学习案例2-开发企业网站2-准备js库 图片等