首页 web前端 js教程 JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)_javascript技巧

JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)_javascript技巧

May 16, 2016 pm 05:21 PM
javascript 最佳实践

1、防止滥用JavaScript“不管你想通过JavaScript改变哪个网页的行为,都必须三思而后行。首先要确认:为这个网页增加这种额外的行为是否确有必要?”

个人认为,作者的这句话放在当前几乎无处不用JavaScript来增强Web页面交互体验的时代,可以理解为应该适当的使用JavaScript,而不要因为使用了实现酷炫效果的脚本导致网页加载缓慢或者兼容性极差而舍本求末,导致用户无法浏览和使用网站。

2、平稳退化平稳退化是指当用户禁用浏览器JavaScript或浏览器不支持JavaScript(还有吗)时,应该让用户仍然可以正常的浏览网站。

刚看到这个问题的时候,感觉这种情况几乎可以忽略不计,因此看了一些关于这个问题的讨论(知乎)以及博文《javascript不可用的问题探究》,并拿博客园首页做了实验,即在禁用JavaScript的情况下浏览网页,发现虽然无法评论博客、无法正常显示分类效果、当然广告也没了,但是主要的功能(查看博文、分页跳转等)是可以正常使用的。

那么基本可以得出结论:在考虑平稳退化的时候,根据需要至少应该保证网站主要功能可以正常使用。对博客园来说,就是查看博客。

3、禁用"javascript:"伪协议和内嵌事件处理函数虽然在HTML中使用这两种写法,不会带来什么严重问题,但是它会阻止平稳退化(网页行为不一致),并且使脚本的编写方式混乱,增加了代码维护的难度。

4、性能考虑关于性能考虑的最佳实践,还是非常容易理解的。

“尽量少访问DOM和尽量减少标记”。少访问DOM是因为查询DOM的操作会非常耗费性能。多处函数的重复DOM查询应该进行重构,提取为全局变量或者直接作为参数进行传递。减少标记可以减小DOM的规模,从而减少查找DOM树中特定元素的时间。

“合并脚本”。合并外部脚本文件,可以减少加载页面时发送的请求次数。通过观察Chrome开发者工具Network标签,可以非常清楚的看到加载网页的请求次数和时间,下图为请求我的博客的情况,第三方的百度分享插件是最慢被加载的,当然整体加载时间还是可以接受的。不过当引用的文件过多过大,或者依赖的第三方插件请求缓慢时,整个页面就会一直处于加载状态,给人的感觉就是网页加载缓慢,体验就会变差。

JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)_javascript技巧

另外,“脚本在标记中的位置对页面的初次加载时间也有很大的影响”。就像bootstrap的实例中,引用的JS插件统统放在了页面的尾部,并加了说明。

JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)_javascript技巧
因为根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件,而在脚本下载期间,浏览器不会下载其它任何文件,即使是来自不同域名的文件也不会下载,所有其它的资源都要等脚本加载完毕后才会下载;而通常我们会把脚本文件放在块中,此时该块中的脚本会导致浏览器无法并行加载其它文件(如图片或其它脚本)。

把所有 <script> 标签放在文档的末尾,</script>

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PHP中处理字符串转浮点数的最佳实践 PHP中处理字符串转浮点数的最佳实践 Mar 28, 2024 am 08:18 AM

在PHP中处理字符串转浮点数是开发过程中常见的需求,例如从数据库中读取到的金额字段是字符串类型,需要转换为浮点数进行数值计算。在这篇文章中,我们将介绍PHP中处理字符串转浮点数的最佳实践,并给出具体的代码示例。首先,我们需要明确一点,PHP中的字符串转浮点数有两种主要的方式:使用(float)类型转换或者使用(floatval)函数。下面我们将分别来介绍这两

Golang中字符串拼接的最佳实践是什么? Golang中字符串拼接的最佳实践是什么? Mar 14, 2024 am 08:39 AM

Golang中字符串拼接的最佳实践是什么?在Golang中,字符串拼接是一种常见的操作,但是要考虑到效率和性能。在处理大量字符串拼接时,选择合适的方法可以显着提升程序的性能。下面将介绍几种Golang中字符串拼接的最佳实践,并附上具体的代码示例。使用strings包的Join函数在Golang中,使用strings包的Join函数是一种高效的字符串拼接方法。

探讨在Go语言中缩进的最佳实践 探讨在Go语言中缩进的最佳实践 Mar 21, 2024 pm 06:48 PM

在Go语言中,良好的缩进是代码可读性的关键。在编写代码时,统一的缩进风格能够使代码更加清晰、易于理解。本文将探讨在Go语言中缩进的最佳实践,并提供具体的代码示例。使用空格而不是制表符在Go语言中,推荐使用空格而不是制表符进行缩进。这样可以避免不同编辑器中制表符宽度不一致导致的排版问题。缩进的空格数Go语言官方推荐使用4个空格作为缩进的空格数。这样可以使代码在

PHP最佳实践:避免goto语句的替代方案探讨 PHP最佳实践:避免goto语句的替代方案探讨 Mar 28, 2024 pm 04:57 PM

PHP最佳实践:避免goto语句的替代方案探讨在PHP编程中,goto语句是一种控制结构,它允许直接跳转到程序中的另一个位置。虽然goto语句可以简化代码结构和流程控制,但由于其使用容易导致代码混乱、可读性降低以及调试困难等问题,因此被广泛认为是一种不良实践。在实际开发中,为避免使用goto语句,我们需要寻找替代方法来实现相同的功能。本文将探讨一些替代方案,

golang框架有哪些最佳实践 golang框架有哪些最佳实践 Jun 01, 2024 am 10:30 AM

在使用Go框架时,最佳实践包括:选择轻量级框架,如Gin或Echo。遵循RESTful原则,使用标准HTTP动词和格式。利用中间件简化任务,如身份验证和日志记录。正确处理错误,使用错误类型和有意义的消息。编写单元测试和集成测试,确保应用程序正常运行。

深入对比:Java框架与其他语言框架的最佳实践 深入对比:Java框架与其他语言框架的最佳实践 Jun 04, 2024 pm 07:51 PM

Java框架适用于跨平台、稳定性和可扩展性至关重要的项目。对于Java项目,SpringFramework用于依赖注入和面向方面编程,最佳实践包括使用SpringBean和SpringBeanFactory。Hibernate用于对象关系映射,最佳实践是使用HQL进行复杂查询。JakartaEE用于企业应用开发,最佳实践是使用EJB进行分布式业务逻辑。

Laravel开发中.env文件的作用及最佳实践 Laravel开发中.env文件的作用及最佳实践 Mar 10, 2024 pm 03:03 PM

Laravel开发中.env文件的作用及最佳实践在Laravel应用程序开发中,.env文件被认为是非常重要的文件之一。它承载着一些关键的配置信息,例如数据库连接信息、应用程序环境、应用程序密钥等。在本文中,我们将深入探讨.env文件的作用以及最佳实践,并附上具体的代码示例。1..env文件的作用首先,我们需要了解.env文件的作用。在一个Laravel应

PHP开始新的或恢复现有的会话 PHP开始新的或恢复现有的会话 Mar 21, 2024 am 10:26 AM

这篇文章将为大家详细讲解有关PHP开始新的或恢复现有的会话,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。PHP会话管理:启动新会话或恢复现有会话简介会话管理在php中至关重要,它允许您在用户会话期间存储和访问用户数据。本文将详细介绍如何在PHP中启动新会话或恢复现有会话。启动新会话该函数session_start()会检查是否存在会话,如果没有,则它会创建一个新的会话。它还可以读取会话数据并将其

See all articles