1、平稳退化(优雅降级)

  目的:当浏览器不支持js或者js被用户禁用时,做到即使不运行js,网页的可读性亦不会受到太大的影响。

  理念:使用最新的技术面向高级浏览器构建最强的功能及用户体验,然后针对低级的浏览器进行限制,逐步衰减那些无法被支持的功能及体验。使用平稳退化技术时,必须先完整的实现网站,其中包括所有的功能和特效。 然后再为那些无法支持所有功能的浏览器增加候选方案,使之在旧式的浏览器上以某种形式降级体验却不至于完全失效。

  做法:通过条件判断语句

例子:先针对Firefox或者Chrome等支持W3C标准的浏览器编写页面代码,然后修复IE中的异常或针对IE去除那些无法被实现的功能特色。

2、渐进增强:

  目的:当浏览器支持js时,不同浏览器不同版本对js的支持度都不一样,此时做到在保证站点页面在低级浏览器中的可用性和可访问性的基础上,逐步增强功能及提高用户体验。

  理念:让网站能够正常工作于尽可能旧的浏览器上,然后不断为它在新型浏览器上实现更多的增强和改进。随着时间的推移,当越来越多的人开始升级浏览器而浏览器本身的支持度也不断提升时,就会有越来越多的人体验到这些增强和改进,它持续有效的使网站越来越好,只要一次实现,它就让网站的体验与时俱进。

3、JavaScript分离

  将js和html文档分离,通过在</body>前引入的方式载入,这样做可以让代码看上去更加简洁规范,思路清晰,并且在载入页面的时候速度变快。

4、优化性能

  1)尽量减少访问dom的次数,因为每一次访问dom都会对整个dom进行扫描,从而占用系统资源,可以通过申明变量的方式来减少dom访问次数。

  2)js脚本尽量合并,减少引用载入次数。

  3)对脚本进行压缩,减少文档体积,加快页面加载速度,注意要保村好完整的副本,编写时用完整版,上传时先压缩再上传。

关于dom脚本编程的一些优秀理念总结的更多相关文章

  1. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  2. javascript进阶——分离式DOM脚本编程

    编写分离式(unobstrusive)代码意味着对HTML内容的完全分离:数据来自服务器端,javascript代码用来动态化和交互.这种分离的好处是在不同浏览器之间使用是可以完全降级或升级运行,对于 ...

  3. Shell脚本编程学习入门 02

    Shell脚本编程学习入门是本文要介绍的内容,我们可以使用任意一种文字编辑器,比如gedit.kedit.emacs.vi等来编写shell脚本,它必须以如下行开始(必须放在文件的第一行):   #! ...

  4. 【Shell脚本编程系列】Shell脚本开发的习惯和规范

    1.开头指定脚本解释器 #!/bin/sh或#!/bin/bash 2.开头加版本版权信息 #Date #Author #Mail #Function #Version 提示:可配置vim编辑文件时自 ...

  5. centos shell脚本编程2 if 判断 case判断 shell脚本中的循环 for while shell中的函数 break continue test 命令 第三十六节课

    centos  shell脚本编程2 if 判断  case判断   shell脚本中的循环  for   while   shell中的函数  break  continue  test 命令   ...

  6. SVG脚本编程简介

    本文主要介绍SVG的脚本编程,并分别给出放大.缩小,查询,鼠标事件等实例. 一. SVG简介 SVG,全称为Scalable Vector Graphics(可伸缩矢量图形).它是W3C制定的.用矢量 ...

  7. 浅谈自底向上的Shell脚本编程及效率优化

    作者:沐星晨 出处:http://blog.csdn.net/sosodream/article/details/6276758 浅谈自底向上的Shell脚本编程及效率优化 小论文,大家多批评指导:) ...

  8. SHELL脚本编程基础知识

    SHELL脚本编程基础知识 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Linux之父Linus有一句话很经典:"Talk is cheap, show me the ...

  9. Linux命令行与Shell脚本编程大全

    快来参加<Linux命令行与Shell脚本编程大全>学习吧,提升技能,展示自我. 点击链接即可进入学习:https://s.imooc.com/WTmCO6H 课程亮点适合零基础读者,从零 ...

随机推荐

  1. spring boot gradle build:bootRepackage failed

    When running 'gradle clean build' on my spring boot project (version 1.3.6.RELEASE) on windows 10 (a ...

  2. SQL SERVER 报:由于数据移动,未能继续以 NOLOCK 方式扫描错误的解决办法。

    比如在某个表中使用 select xxx from xxx with(nolock) where xxxx 查询. 提示出错:由于数据移动,未能继续以 NOLOCK 方式扫描. 它有可能某些条件出错, ...

  3. Centos7忘记密码

    CentOS 7 root密码的重置方式和CentOS 6完全不一样,CentOS 7与之前的版本6变化还是比较大的,以进入单用户模式修改root密码为例. 1.重启开机按esc 2.按e 3.编辑修 ...

  4. Moving to Express 4

    http://expressjs.com/guide/migrating-4.html Moving to Express 4 Overview Express 4 is a breaking cha ...

  5. SERVLET中的doGet与doPost两个方法之间的区别

    get和post是http协议的两种方法,另外还有head, delete等 这两种方法有本质的区别,get只有一个流,参数附加在url后,大小个数有严格限制且只能是字符串.post的参数是通过另外的 ...

  6. 老李分享:导出xml报告到手机

    老李分享:导出xml报告到手机   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821 ...

  7. 手机自动化测试:appium源码分析之bootstrap四

    手机自动化测试:appium源码分析之bootstrap四   Orientation是调整屏幕方向的操作 package io.appium.android.bootstrap.handler; i ...

  8. 老李推荐: 第3章1节《MonkeyRunner源码剖析》脚本编写示例: MonkeyRunner API使用示例

    老李推荐: 第3章1节<MonkeyRunner源码剖析>脚本编写示例: MonkeyRunner API使用示例   MonkeyRunner这个类可以说是编写monkeyrunner脚 ...

  9. 老李推荐:第1章3节《MonkeyRunner源码剖析》概述:架构

    老李推荐:第1章3节<MonkeyRunner源码剖析>概述:架构   原理架构 MonkeyRunner使用起来非常的简单,只需要导入以下几个类基本上就能满足测试脚本编写的需求,比如: ...

  10. 性能调优案例分享:jvm crash的原因 1

    性能调优案例分享:jvm crash的原因   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq: ...