高性能网站建设进阶指南(二)

第四章  无阻塞加载脚本

阻塞:大部分浏览器在下载或执行<script>标签内容时不会下载其他内容。浏览器是按顺序执行的,但不一定要按顺序下载脚本。

对于外部脚本,如果浏览器缓存中有,就从缓存中读取,否则发送HTTP请求获取。

解决阻塞:

(1)把所有的<script>中的代码内嵌在HTML页面中,这种方法不推荐使用。

(2)XHR Eval、XHR注入、Script in Iframe(iframe是页面中开销最高的DoM元素),这两个的缺点:通过XHR获取的脚本必须部署在和主页面相同的域下

(3)Script DOM Element、Script Defer、document.write Script Tag

Script DOM Element:允许跨域获取脚本,代码如:

var domsr=document.createElement(‘script‘);
domsr.src=‘1.js‘;
document.getElementsByTagName(‘head‘)[0].appendChild(domsr);

Script Defer:脚本中不包含对document.wirte的调用,且当前页面中没有其它脚本依赖它时,使用这个属性是安全的,只有IE和新浏览器支持这个defer属性。代码:

document.write Script Tag:只有在IE中是并行加载的,代码:

document.write("<script type=‘text/javascript‘ src=‘1.js‘><\/script>");

浏览器忙时的指示器:状态栏、进度条、标签页图标、光标、阻塞渲染(差的用户体验)、阻塞onload事件,使用XHR Eval、XHR注入不会触发浏览器的忙指示器,忙指示器是否触发是由技术和浏览器来共同决定的。浏览器忙指示器的目的是让用户知道页面下面运行。

如果下载脚本是并行的,浏览器执行脚本是最先到达的最先执行。并不是按排列顺序执行的,但是document.write Script Tag、script defer、Script DOM Element除外。

没有独立的最佳方案,真正的最佳方案取决于需求。

有六种使用结果:

(1)不同域、无序(2)不同域、保持顺序(3)同域、无序、无忙时指示器(4)同域、无序、有忙时指示器(5)同域、保持顺序、无忙时指示器(6)同域、保持顺序、有忙时指示器

时间: 2024-10-23 11:55:32

高性能网站建设进阶指南(二)的相关文章

高性能网站建设进阶指南:Web开发者性能优化最佳实践 pdf扫描版

高性能网站建设进阶指南:Web开发者性能优化最佳实践是<高性能网站建设指南>姊妹篇.作者Steve Souders是Google Web性能布道者和Yahoo!前首席性能工程师.在本书中,Souders与8位专家分享了提升网站性能的最佳实践和实用建议,主要包括:理解Ajax性能,编写高效的JavaScript,创建快速响应的应用程序.无阻塞加载脚本, 跨域共享资源,无损压缩图片大小,使用块编码加快网页渲染:避免或取代iframe的方法,简化CSS选择符,以及其他技术.性能是任何一个网站成功的关

高性能网站建设进阶指南(一)

WEB性能提升的14条规则: 1.尽量减少HTTP请求(使用css sprites): 2.使用CDN; 3.添加Expires头: 4.添加Gzip压缩组件: 5.将样式表放在顶部: 6.避免CSS表达式,使用外部的js和css,并精简JS,删除重复的脚本: 7.减少DNS查询: 8.避免重定向: 9.配置ETag: 10.使ajax可缓存: 第一章    理解ajax性能 1.权衡:但是在97%的情况下,过早优化是万恶之源,但我们不应该错过那关键的3%.现实情况的项目三角形(项目管理的三角形

高性能网站建设进阶指南(三)

第五章  整合异步脚本 1.脚本如果按常规方式加载<scripg src=""></script不仅会阻塞页面中其它内容的下载,还会阻塞脚本后面所有元素的渲染,异步加载脚本可以避免这种阻塞情况.但是代码异步执行时可能会出现竞争状态而导致出现未定义标识符的错误.如果行内脚本依赖外部脚本(如引用jquery),保证执行顺序就很重要,外部脚本必须在行内脚本之前下载.解析.执行. 2.竞争状态 没有一种技术既能并行下载又能保持执行顺序,唯一的特例是firefox中执行的Scr

前端性能优化规则总结—读《高性能网站建设指南》

本文对<高性能网站建设指南>这本书中提出的14种基本的前端性能优化方案进行了总结,这本书介绍的优化方案比较过时了,不能完全满足目前前端性能优化,如果您浏览完能弄清楚每种方案的实施过程.就没必要看这本书了. 规则1-减少HTTP请求 1.使用图片地图 图片地图允许你在一个图片上关联多个URL,目标URL的选择取决于用户点击了图片上的哪个位置. 比如导航栏菜单有五个选项,为了美观,我们将菜单对应的超链接关联到图片上,可以使用五个分开的图片分别关联五个分开的超链接,此时加载这个导航菜单就要通过五次H

高性能网站建设指南pdf

下载地址:网盘下载 内容简介  · · · · · · 本书结合Web 2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状.产生的原因,以及改善或解决性能问题的原则.技术技巧和最佳实践.重点关注网页的行为特征,阐释优化Ajax.CSS.JavaScript.Flash和图片处理等要素的技术,全面涵盖浏览器端性能问题的方方面面.在<高性能网站建设指南>中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持.<高性能网站建设指南>内容丰富,主要包

高性能网站建设

压缩 浏览器使用Accept-Encoding头来生命它支持压缩. 服务器使用content-Encoding头确认响应已被压缩. 持久连接 request:      Connection:keep-alive response:    Connection:keep-alive 图片优化 1.使用图片地图,将多个图片整合到一张图片上   <map> 2.CSS Sprites   多张图片合并为一张,使用时,通过位置制定 合并后大小比单个图片总和还小,并且减少http请求 3.内联图片 d

高性能网站建设和优化

高性能网站建设和优化 在前端中,性能优化就是优化用户体验,减少响应速度以助于提高网页整体的加载速度,提高性能在建设高性能页面中不可缺少的一部分. 改进性能分为从前端改进和后台改进. 可以说前端是改进编辑页面的一些细节,在建设页面编辑代码是就注意性能的优化,然后集少成多 ,响应和加载时间通过逐步的减少,到达性能的改进, 而且在前端优化中需要的时间和资源都较少. 而要从后台入手改进性能,就相对来说复杂,也会带来很多的改动. 前端 作为前端开发人员,就要把性能优化的重点放在前端优化中.在代码编辑中考虑

《高性能网站建设指南》

1.目录11页 1.第一章:规则1-减少HTTP请求,介绍为什么额外的HTTP请求会对性能产生巨大的影响,并介绍了减少HTTP请求的方法,包括图片地图.CSS Sprites.使用data:模式的URL内嵌图片,     以及合并脚本和样式表 2.第二章:规则2-使用内容发布网络,强调了使用内容发布网络的优势 3.第三章:规则3-添加Expires头,研究了一个简单的HTTP头是如何通过浏览器缓存来戏剧性地改善web页面性能的 4.第四章:规则4-压缩组件,解释了压缩是如何工作的,以及如何为we

《高性能网站建设指南》读书笔记

(一)绪言 1.绪言A 性能黄金法则: 只有10%~20%的最终用户响应时间花在了下载HTML文档上.其余的80%~90%时间花在了下载页面中的所有组件上. 2.绪言B HTTP概述: HTTP是浏览器和服务器通过Internet进行相互通信的协议. 请求的类型:GET  POST  HEAD  PUT  DELETE  OPTIONS  TRACE. 压缩:浏览器使用Accept-Encoding头来声明它可以支持压缩.服务器使用Content-Encoding头确认响应已被压缩. 条件GET