`
jobar
  • 浏览: 349019 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

高性能web网站优化原则6——把js脚本放在页面底部

 
阅读更多
在页面渲染时,js跟css渲染时的顺序恰好相反,浏览器会先下载js脚本,然后再下载js脚本后面的组件,这样渐进式渲染会阻塞脚本下面的所有元素,将脚本移到页面底部的方式可以解决这个问题。

如下图所示,js下载时间需要大约10s,js分别放在三个不同的位置,页面顶部,中间和底部,页面渲染元素的区别,一目了然。



  • 大小: 69 KB
分享到:
评论

相关推荐

    [高性能网站建设指南——前端工程师技能精粹(英文原版)].pdf

    《高性能网站建设指南——前端工程师技能精粹》是前端开发领域的一本重要著作,它由Steve Souders撰写,旨在提供一套实用的策略和技巧,帮助网站优化性能,提高加载速度和用户体验。这本书不仅受到业界知名专家如Joe...

    高性能网站建设指南2 中文版 高性能网站建设指南(中文版)

     《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例,在本书的配套网站上可以找到代码片段。这些规则包括:  •减少HTTP请求 •使用...

    高性能网站建设指南1

     《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例,在本书的配套网站上可以找到代码片段。这些规则包括:  •减少HTTP请求 •使用...

    网上购物网站——asp+access

    【网上购物网站——ASP+ACCESS】是一个针对初级编程人员设计的项目实例,它结合了ASP(Active Server Pages)脚本语言和ACCESS数据库管理系统,提供了一种简易的电子商务平台搭建方案。这个项目对于学习Web开发,...

    WEB前端开发.pdf

    ### WEB前端开发性能优化知识点详解 #### 一、性能优化 **1. 减少HTTP请求数** - **背景**: 在网页加载过程中,每个图片、CSS文件、JavaScript文件、Flash对象等都会产生一个HTTP请求,这会显著增加网页加载时间...

    Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站

    6. **兼容性与优化**:考虑到兼容性问题,项目中的代码经过优化,能够在各种主流浏览器中稳定运行,包括Chrome、Firefox、Safari等。 #### 三、技术实现与工具使用 1. **HTML5**:作为项目的基石,HTML5提供了丰富...

    Web大学生网页作业成品——游戏主题HTM5网页设计作业成品 (HTML+CSS王者荣耀8页)

    - **JavaScript**: JavaScript 是一种轻量级的编程语言,常被用作客户端脚本来实现网页上的交互性。它可以用来创建动态效果,如图像滑动、轮播图、下拉菜单等,还可以处理用户输入数据和表单验证等。 - **DIV+CSS**:...

    HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页

    - **JavaScript**: 作为一种强大的客户端脚本语言,JavaScript被用于实现动态效果和交互功能,比如处理用户输入、控制DOM元素的行为变化等。 - **jQuery**: jQuery是一个流行的JavaScript库,简化了JavaScript编程,...

    html 和 javascript 课件 lesson3万和

    `<script>`标签用于在HTML中引入JavaScript代码,可以放在`<head>`或`<body>`中,但为了页面加载性能,通常推荐将其放在`<body>`的底部。事件监听器允许我们响应用户的特定行为,如`addEventListener()`。此外,`...

    share.js实用又漂亮的jQuery分享按钮提示插件

    **jQuery分享按钮提示插件——share.js** 在Web开发中,提供社交分享功能已经成为网站和应用的必备元素,它能够方便用户将感兴趣的内容快速分享到各种社交媒体平台。share.js就是这样一款实用且美观的jQuery插件,...

    javascript经典特效---字符在FORM中坠落.rar

    6. **动画优化**:为了保证性能,避免过多的DOM操作,可以使用CSS3的`transform`属性进行位移,而不是更改`top`或`left`属性。同时,利用requestAnimationFrame进行动画渲染,能更好地与浏览器渲染周期同步,提高...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关...

    jquery弹出层tipBox

    jQuery,一个轻量级、高性能的JavaScript库,提供了丰富的API来实现各种复杂的动态效果,其中包括创建弹出层。本文将深入探讨自定义的jQuery弹出层插件——tipBox,它的设计目标是尽可能地减少对页面其他元素的影响...

    HTML5 Cookbook 2015

    - 将外部脚本放在页面底部,或者使用`async`和`defer`属性来异步加载脚本。 - 使用CDN(内容分发网络)来托管外部资源。 - **讨论**:合理的资源加载策略可以显著提升用户体验。异步加载脚本可以避免阻塞页面渲染...

    aitg-wordpress-theme:可在DRES Accessible IT Group网站上使用的WordPress主题

    7. **性能优化**:快速加载的网站可以提高用户满意度,因此aitg-wordpress-theme可能进行了代码优化,减少了HTTP请求,使用了CDN(内容分发网络)服务,或者优化了图片大小,以提升网站性能。 8. **翻译支持**:...

Global site tag (gtag.js) - Google Analytics