禁用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.pswp.cn/news/252110.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/252110.shtml
英文地址,請注明出處:http://en.pswp.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…