`

Web 前端优化最佳实践之 JavaScript 篇

阅读更多

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了)。所以,把它扔到最后面去处理。对于一些功能性的脚本,可能实现起来有些两难。不过对于 国内网站来说,有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说,绝对可行的建议,放到页面最底下。

2. Make JavaScript and CSS External

参见 CSS 篇 的描述

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS )

参见 CSS 篇 的描述

4. 移除重复脚本 (Remove Duplicate Scripts)

对于一些历史遗留站点或是论坛类的网站来说,这倒是比较常见的。接手维护人前后变化过多,每个人都有自己的一套。这就会带来一些潜在的麻烦。

5. 减少 DOM 访问 (Minimize DOM Access)

有三条指导建议:

  • 缓存已经访问过的元素 (Cache references to accessed elements)
  • “离线”更新节点, 再将它们添加到树中 (Update nodes “offline” and then add them to the tree)
  • 避免使用 JavaScript 输出页面布局–应该是 CSS 的事儿 (Avoid fixing layout with JavaScript)

6. Develop Smart Event Handlers

除了英文解释外,这里也提醒一下注意关于 Java Script 内存泄漏 的问题。

分享到:
评论

相关推荐

    Web前端优化最佳实践及工具集锦

    ### Web前端优化最佳实践及工具集锦 #### 一、引言 随着互联网技术的不断发展,用户对Web应用的响应速度和性能提出了更高要求。Web前端优化成为了提高用户体验的重要手段之一。本文旨在介绍一系列Web前端优化的...

    Web前端开发最佳实践.pdf

    标题《Web前端开发最佳实践.pdf》所指的知识点涵盖了前端开发领域中的高效开发方法和一些指导原则。虽然提供的【部分内容】并没有实际内容,但根据标题,我们可以展开关于Web前端开发最佳实践的详细讨论。 Web前端...

    Web 前端优化最佳实践.rar

    "Web前端优化最佳实践"这一主题涵盖了多种技术策略和方法,旨在使网页加载更快,交互更流畅,从而提高用户满意度和搜索引擎排名。以下是一些核心的前端优化知识点: 1. **减少HTTP请求**:每个文件(如CSS、...

    web前端开发最佳实践

    ### Web前端开发最佳实践 #### 一、高效Web前端开发概览 - **Web前端开发概述**:在这一章节中,作者首先介绍了Web前端开发的基本概念和发展历程,强调了前端开发的重要性和它在现代互联网应用中的核心地位。通过...

    Web前端优化最佳实践及工具集锦[定义].pdf

    Web前端优化是提升Web应用程序性能的关键,它直接影响到用户体验。前端优化主要关注减少页面加载时间、提高响应速度和降低资源消耗。以下是一些由Google和雅虎提出的最佳实践和工具: 1. **避免坏请求**:确保所有...

    高清彩版 Web前端开发最佳实践

    根据提供的标题、描述和部分上下文内容,我们可以推断出这份文档主要关注的是Web前端开发的最佳实践。然而,文档的实际内容似乎与标题和描述不符,更多地是在介绍如何获取PDF电子书资源。为了遵循您的要求,我们将...

    WEB前端开发最佳实践.pdf

    【WEB前端开发最佳实践】是针对想要提升WEB前端技能或转行至该领域的学习者而设计的培训课程。课程涵盖了HTML5、CSS3、JavaScript、jQuery、Vue.js等核心技术,并结合实战项目,帮助学员从基础知识到高级应用进行...

    web前端优化方法

    Web前端优化是提升网站性能和用户体验的关键步骤,它涉及到页面加载速度、资源利用率以及页面的交互体验等多个方面。以下是对标题和描述中提及的优化方法的详细解释: 1. **避免坏的请求**:确保所有资源(如图片、...

    WEB前端设计修炼之道.pdf

    "WEB前端设计修炼之道.pdf"这本书为Web前端设计领域提供了详尽的指南和最佳实践。 首先,前端开发工程师应具备的技能和素质非常多,他们需要掌握HTML、CSS、JavaScript等基础技术,并对设计原则有深入的理解。HTML...

    Web前端性能优化全攻略

    Web前端性能优化是提高网页加载速度和用户体验的关键因素。Yahoo! 的 Exceptional Performance team 提出了一系列不断更新的优化策略,从最初的13条发展到现在的34条,涵盖了多个角度,包括内容、服务器、Cookie、...

    ccs禅意花园 + bootstrap+Web前端开发最佳实践+w3cshool离线手册

    3. **Web前端开发最佳实践**:这本书或文档可能包含了前端开发的规范、技巧和优化方法,涵盖了HTML、CSS、JavaScript等多个方面。学习最佳实践有助于开发者写出高效、可读性强、易于维护的代码,并且遵循无障碍...

    WEB前端性能优化测试

    的前端性能最佳实践规则对网页进行评分,并提供优化建议。它分析网页并提供关于如何改进性能的报告,包括合并文件、压缩资源、减少DNS查找等方面的建议。 了解和应用这些优化策略,并结合YSLOW等工具进行测试和评估...

    现代Web开发的最佳实践

    现代Web开发是一个不断演变的领域,它涉及到一系列的技术和最佳实践。这个压缩包文件"google-WebFundamentals-45bcd61"很可能包含了Google关于Web开发基础的资源,这通常涵盖HTML、CSS、JavaScript以及性能优化等多...

    WEB前端开发.pdf

    以上概述了《WEB前端开发.pdf》文档中提到的关键知识点,包括网页性能优化的各个方面、JavaScript编程的最佳实践以及一些高级主题。通过实施这些优化策略和技术,可以显著提高网页加载速度和用户体验,同时增强应用...

    web前端开发技术储久良第三版答案

    综上所述,《Web前端开发技术储久良第三版答案》不仅包含了前端开发的基础知识,还涉及了高级技术和最佳实践,是学习和提升Web前端技能的宝贵资源。通过深入学习和实践书中的答案,开发者可以更好地掌握前端开发的...

    web前端课程设计.zip

    在本课程设计中,我们将...综上所述,"web前端课程设计.zip"涵盖了Web前端开发的核心技术、工具、框架以及最佳实践,为学习者提供了一个全面的实践平台,旨在帮助他们提升技能,理解和掌握构建现代Web应用的全过程。

    高性能网站建设进阶指南:Web开发者性能优化最佳实践(口碑网前端团队翻译)

    《高性能网站建设进阶指南:Web开发者性能优化最佳实践》是由口碑网前端团队翻译的一本专业书籍,旨在为Web开发者提供一套全面的性能优化策略。在当前互联网环境下,网站的性能对于用户体验至关重要,优化网站性能...

    web网页前端模板

    在IT行业中,Web前端开发是构建互联网应用的重要组成部分,它主要负责用户与网站之间的交互界面。Web前端模板则是为了加速开发过程,提供预设样式和布局的代码框架。标题提到的"web网页前端模板",具体指的是"H+4.1...

    Web前端开发修炼之道

    3. **JavaScript最佳实践**:JavaScript是Web前端的核心语言,书中可能详细阐述了变量声明、函数使用、异步编程、错误处理等方面的最佳实践,以提高代码质量和运行效率。 4. **CSS优化**:CSS的组织和编写也直接...

Global site tag (gtag.js) - Google Analytics