web优化(二)

  上次说到js的阻塞dom渲染可能出现的白屏现象,所以对于js我们需要一些优化。首先我们可以模仿通信中的时分的概念,使用 setTime()来执行一段js代码然后渲染页面然后再执行一段js代码,这样可以有效防止白屏现象。

  当然,你可以能意识到了,这样并没有提高载入速度,那么如何才能提高载入速度呢?如果js代码下载得更快是不是就可以了?加载js代码所花的时间,主要是加载外部js时,如果有多个js脚本我们要一个个的下载执行不是很浪费时间而且这个过程中并没有渲染页面。ok,第一个方法,我们并行的去下载js脚本。

如何才能并行的下载js脚本呢,你可能立刻会回答我XHR注入啊,很有名的。在这里总结一下可以无阻塞加载脚本的技术,你当然可以把所有的js写在页面内,可是你如果要使用jquery库的话,或者js代码很长,这是不理智的,而且这也不利于利用js的缓存。

  1. XHR eval
  2. XHR 注入
  3. script in iframe
  4. script DOM Element
  5. script defer
  6. Document.write Script Tag

  XHR eval 这种技术看名字就知道了,eval,主要利用eval这个函数,这是相对比较危险的 通过new一个xhr对象来像服务器请求一个脚本并执行,事实上,慎用。

  XHR 注入的比较有意思,它也是通过XHR来向服务器请求脚本,但是它是通过document.creatELement()来创建一个script表签,很有意思,非常鸡贼的一种做法

以上两种做法因为都使用了XHR的技术,所以要受同源策略的限制,不能解决跨域的问题,事实上很多时候我们需要跨域。

下面的几种有可以解决这个问题的办法

对于script in iframe,这个,主页中的iframe是和其他组件一起加载的,我们将iframe的width height都设为0,使其不可见,然后在iframe中去实现异步加载,这个其实很得不偿失,因为iframe元素是开销最大的dom元素了,而且iframe本身也要受同源策略的限制。

script defer,是IE自己实行的一个,所以浏览器兼容不好,不过新版的chrome ff等都实现了对它的支持、

最后一种技术的话,也只是在ie中才支持,也只是并行下载脚本,仍会阻塞渲染。

从上面几种技术,我们发现,似乎很多情况下,script DOM Element是一个很好的选择,其实也正是如此。

在上面我们谈论了并行下载的技术,但是如果我们有好几个脚本,我们并行下载了,但是下载速度有快有慢,下载下来即执行,如果代码之间存在依赖关系,那么执行就会出现问题,即,我们如何保证多js文件执行是顺序执行的,明天我们会继续回忆这个。

时间: 2024-10-28 16:19:16

web优化(二)的相关文章

Java Web总结二十一Listener监听器

一.事件三要素 1.事件源:操作事件的对象,例如:窗体Frame 2.事件监听器:事件监听器监听事件源,例如WindowListner,它是一个接口 3.事件,例如:单击事件,通过事件,可以取得事件源 二.适配器模式 1.当一个接口有较多的方法时,而实现类只需对其中少数几个实现,此时可以使用适配器模式 2.适配器模式常用于GUI编程 三.八种Web监听器 1.Web中有三个事件源,分别是ServletContext->HttpSession->ServletRequest 2.ServletC

转:Web优化 及常用工具包

Web优化: 减少http请求 避免404错误 在html页面header加入缓存标签 Gzip压缩网页 减少cookie体积 使用外部的js和css 消减js和css 压缩js 使用css sprites技术,众多图片合成在一起,通过CSS切分,降低图片传输的频率和数据量 可以使用静态网页的,避免使用动态网页 工具包 进程管理器,CPU,内存,I/O 日志:IIS日志,windows日志,系统本身日志 使用dotTrace,跟踪方法执行时间,找出速度慢的方法,针对性优化 Sql Profile

Java Web总结二十二投票系统

投票系统需求: (1)查询所有候选人基本信息 (2)查询某位候选人详细信息 (3)投票人登录和退出 (4)投票人限制1分钟之内重复投票 (5)投票人IP和最后投票时间查询 (6)阻止相同用户名二次在线登录 (7)票数条形显示和候选人头像处理 (8)显示投票人归属地 (9)热门候选人,即投票数最多 (10)后台管理员登录 可选需求: (11)查询.删除.更新.增加候选人详细信息 (12)与一个Listener,创建所有表格式和初始化数据 代码参见:day19/vote(此处不上传) Java We

Java Web总结二十Filter、装饰设计模式

一.Filter的部署--注册Filter <filter> <filter-name>testFitler</filter-name> <filter-class>org.test.TestFiter</filter-class> <init-param> <param-name>word_file</param-name> <param-value>/WEB-INF/word.txt</p

Java Web总结二十三发送邮件

一.所需jar包: 1.mail.jar 2.activation.jar 二.代码: 1.MailUtil.java package com.gnnuit.web.mail.util; import java.util.Properties; import javax.mail.Message; import javax.mail.Session; import javax.mail.Transport; import javax.mail.internet.InternetAddress;

如何构建日均千万PV Web站点(二) 之~缓存为王~

随着网站业务的不断发展,用户的规模越来越大:介于中国无比蹩脚复杂的网路环境:南电信:北联通:中间竟然只用一条链路进行互联通信!有研究表明,网站访问延迟和用户流失率正相关,网站访问速度越慢,用户越容易失去耐心而离开.为了提高更好的用户体验,留住用户,网站需要加速网站访问速度.如今主要的手段只有使用CDN和反向代理了:此时网站的架构应该是这样的: 1.使用CDN和缓存服务器:CDN和反向代理的基本原理都是缓存数据,区别就在于CDN部署在网络提供商的机房,使用户在请求网站服务时,可以从距离自己最近的网

Web优化之YaHoo Web优化的14条法则

Yahoo Web优化建议原文:Best Practices for Speeding Up Your Web Site Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等,的下载上.减少页面元素将会减少HTTP请求次数.这是快速显示页面的关键所在. 一种减少页面元素个数的方法是简化页

Web优化之Javascript Compressor

目的: web项目前端js的体积大小影响页面性能和用户体验, 压缩js是web优化的一个重要手段.JavaScript的压缩不是为了保护代码而压缩,而是压缩后的js代码文件可以小一倍甚至多倍,从而使这个js代码快速的下载到客户端,特别js文件较大时速度效果非常明显. 方法: JS优化的方法有以下几个方法: 1.tomcat的压缩, gzip压缩启用的情况下, 压缩的比例大概是1:6 2.js加载的时候合并下载, 可以有效减少请求js产生的网络连接次数.(满足Yahoo!前端优化第一条原则:Min

使用idfc-proguard-maven-plugin混淆优化Jave Web工程二

上篇文章说了下大致流程和我们要达到的效果.本文主要讲一下详细配置. 其实只要弄过一次,就觉得很简单了.只需要配置两个文件. pom.xml和${project.artifactId}-maven.pro 这两个文件即可. 其中pom.xml配置插件的使用,真正的优化选项 在${project.artifactId}-maven.pro  文件里配置. 先来看一下完整的pom.xml. <project xmlns="http://maven.apache.org/POM/4.0.0&quo