上次说到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文件执行是顺序执行的,明天我们会继续回忆这个。

web优化(二)的更多相关文章

  1. Web优化躬行记(1)——CSS

    Web优化的对象包括页面性能.用户体验.开发效率.代码优化.网络延迟等,本系列会列举出众多常用的优化技巧,每个技巧都可深入分析,在此只做抛砖引玉. 本系列优化内容提炼于<前端面试宝典>.& ...

  2. EMW 性能优化二之---并发配置

    EMW 性能优化二之---并发配置 在前一个日志中写到交货的异步更新,对于RFUI RF的前台操作会提升效率,异步更新不用等待更新状态的返回,启用更新队列的方式执行(SM13). 下面再补全性能相关的 ...

  3. MySQL优化二(连接优化和缓存优化)

    body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10 ...

  4. mysql优化二之锁机制

    mysql优化二之锁机制 mysql提供了锁机制和MVCC机制来保证并发操作的安全性,这里主要讨论锁机制, MVCC见下篇文章 mysql的锁按照锁粒度可分为行锁与表锁,按照操作类型划分可读锁和写锁 ...

  5. web优化及web安全攻防学习总结

    web优化 前端:(高性能网站建设进阶指南) 使用gzip压缩(节省服务器的 网络带宽) 减少http请求( 减少DNS请求所耗费的时间. 减少服务器压力. 减少http请求头) 使用cdn(用户可以 ...

  6. Emacs 启动优化二三事

    Emacs 启动优化二三事 */--> div.org-src-container { font-size: 85%; font-family: monospace; } p {font-siz ...

  7. 转:Web优化 及常用工具包

    Web优化: 减少http请求 避免404错误 在html页面header加入缓存标签 Gzip压缩网页 减少cookie体积 使用外部的js和css 消减js和css 压缩js 使用css spri ...

  8. simple go web application & 二维码生成 & 打包部署

    go语言简易web应用 & 二维码生成及解码 & 打包部署 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/10801476.html 前言(闲 ...

  9. MySQL性能优化(二):优化数据库的设计

    原文:MySQL性能优化(二):优化数据库的设计 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.n ...

  10. Azure Web App (二)使用部署槽切换部署环境

    一,引言 前天我们将到使用Azure的 Pass 服务 “Web App” 去部署我们的.NET Core Web项目,也同时有介绍到如何在VS中配置登陆中国区的Azure账号,今天接着讲,我们部署完 ...

随机推荐

  1. Volley解析之表单提交篇

    要实现表单的提交,就要知道表单提交的数据格式是怎么样,这里我从某知名网站抓了一条数据,先来分析别人提交表单的数据格式.  数据包: Connection: keep-alive Content-Len ...

  2. Unity 数据Json格式的转换

    把对象转换为字节序列的过程称为对象的序列化. 把字节序列化恢复为对象过程称为对象的反序列化. JSON格式的转换,是一大神给我说的,让我拿来存储数据库时对一些数据的处理,感觉特别好用.但是我并没有深入 ...

  3. CImage 对话框初始化时候显示透明 PNG

    使用CImage的时候,发现显示出来的并不是透明背景的图片,而是白色背景的图片. 后发现原因如下: PNG图片的透明背景总是一片白色,后来才发现这其实是微软GDI+的设计问题,PNG图片是ARGB,使 ...

  4. android:inputType常用取值

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content&q ...

  5. 高通 android平台LCD驱动分析

    目前手机芯片厂家提供的源码里包含整个LCD驱动框架,一般厂家会定义一个xxx_fb.c的源文件,注册一个平台设备和平台驱动,在驱动的probe函数中来调用register_framebuffer(), ...

  6. obj-c中-fobjc-arc-exceptions的解释

    在开启ARC之后正常情况下一切和内存有关的申请和释放操作皆不用你关心了,ARC全全帮你包办了.但是还有极少数的情况下,编译器无法为你生成合适的ARC额外代码,比如obj-c异常就是这么一个例子. 话句 ...

  7. Android+struts2+json方式模拟手机登录功能

    涉及到的知识点: 1.Struts2框架的搭建(包括Struts2的jSON插件) 2.Android前台访问Web采用HttpClient方式. 3.Android采用JSON的解析. 服务端主要包 ...

  8. SharePoint WebService 之更新审批状态

    SharePoint列表使用WebService操作,可以进行增删改查,但是操作开启审批功能列表的时候,会遇到列表项审批的问题,只要进行修改,该项目就会变成待定状态,然后想要修改审批状态,就使用Upd ...

  9. C#解析HTML利器-Html Agility Pack

    今天刚开始做毕设....好吧,的确有点晚.我的毕设设计需要爬取豆瓣的电影推荐,于是就需要解析爬取下来的html,之前用Python玩过解析,但目前我使用的是C#,我觉得C#不比python差,有微软大 ...

  10. C++笔记十七:C语言中 “冒牌货”const和const符号表

      在.c文件中有程序: int main() { int const a = 10; a=20; printf("a=%d\n",a); return 0; } 编译就知道C语言 ...