web优化(二)
上次说到js的阻塞dom渲染可能出现的白屏现象,所以对于js我们需要一些优化。首先我们可以模仿通信中的时分的概念,使用 setTime()来执行一段js代码然后渲染页面然后再执行一段js代码,这样可以有效防止白屏现象。
当然,你可以能意识到了,这样并没有提高载入速度,那么如何才能提高载入速度呢?如果js代码下载得更快是不是就可以了?加载js代码所花的时间,主要是加载外部js时,如果有多个js脚本我们要一个个的下载执行不是很浪费时间而且这个过程中并没有渲染页面。ok,第一个方法,我们并行的去下载js脚本。
如何才能并行的下载js脚本呢,你可能立刻会回答我XHR注入啊,很有名的。在这里总结一下可以无阻塞加载脚本的技术,你当然可以把所有的js写在页面内,可是你如果要使用jquery库的话,或者js代码很长,这是不理智的,而且这也不利于利用js的缓存。
- XHR eval
- XHR 注入
- script in iframe
- script DOM Element
- script defer
- 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优化(二)的更多相关文章
- Web优化躬行记(1)——CSS
Web优化的对象包括页面性能.用户体验.开发效率.代码优化.网络延迟等,本系列会列举出众多常用的优化技巧,每个技巧都可深入分析,在此只做抛砖引玉. 本系列优化内容提炼于<前端面试宝典>.& ...
- EMW 性能优化二之---并发配置
EMW 性能优化二之---并发配置 在前一个日志中写到交货的异步更新,对于RFUI RF的前台操作会提升效率,异步更新不用等待更新状态的返回,启用更新队列的方式执行(SM13). 下面再补全性能相关的 ...
- MySQL优化二(连接优化和缓存优化)
body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10 ...
- mysql优化二之锁机制
mysql优化二之锁机制 mysql提供了锁机制和MVCC机制来保证并发操作的安全性,这里主要讨论锁机制, MVCC见下篇文章 mysql的锁按照锁粒度可分为行锁与表锁,按照操作类型划分可读锁和写锁 ...
- web优化及web安全攻防学习总结
web优化 前端:(高性能网站建设进阶指南) 使用gzip压缩(节省服务器的 网络带宽) 减少http请求( 减少DNS请求所耗费的时间. 减少服务器压力. 减少http请求头) 使用cdn(用户可以 ...
- Emacs 启动优化二三事
Emacs 启动优化二三事 */--> div.org-src-container { font-size: 85%; font-family: monospace; } p {font-siz ...
- 转:Web优化 及常用工具包
Web优化: 减少http请求 避免404错误 在html页面header加入缓存标签 Gzip压缩网页 减少cookie体积 使用外部的js和css 消减js和css 压缩js 使用css spri ...
- simple go web application & 二维码生成 & 打包部署
go语言简易web应用 & 二维码生成及解码 & 打包部署 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/10801476.html 前言(闲 ...
- MySQL性能优化(二):优化数据库的设计
原文:MySQL性能优化(二):优化数据库的设计 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.n ...
- Azure Web App (二)使用部署槽切换部署环境
一,引言 前天我们将到使用Azure的 Pass 服务 “Web App” 去部署我们的.NET Core Web项目,也同时有介绍到如何在VS中配置登陆中国区的Azure账号,今天接着讲,我们部署完 ...
随机推荐
- Redis配置信息
# Redis configuration file example # Note on units: when memory size is needed, it is possible to sp ...
- obj-c编程05:类的多态与id动态绑定
说实在的,写这第5篇的时候十分纠结,代码老是不能动态绑定,在编译时就会出错,最后发现这是开了ARC的原因.开了ARC obj-c就不能动态绑定了吗?这个问题还不清楚哦.把ARC关闭后,虽然会有警告,但 ...
- ruby利用Zip Gem写一个简单的压缩和解压的小工具
在UNIX下的我们怎么会沦落到用ruby写压缩和解压工具呢?直接上shell啊!但是请允许本猫这次可耻的用ruby来玩玩吧!其实ruby GEM中有很多压缩解压包,我选的是Zip,也许是因为名字符合K ...
- Yii2.0源码阅读-PHP如何与redis通信?
PHP与Redis可以通过socket进行通信,前提是PHP需要实现Redis的协议 RESP协议描述: 字符串 \r\n : 表示一个正确的状态信息,具体信息是'+'后面的字符(Simple Str ...
- html5中新增的属性和删除的属性
一.表单新增的属性 1.对input(type="text").select.textarea与button元素指定autofocus属性,它以指定属性的方式让元素在画面打开时自动 ...
- (转) windows下 安装 rabbitMQ 及操作常用命令
该博客转载自:https://blog.csdn.net/gy__my/article/details/78295943 原作者:Eric Li 出处:http://www.cnblogs.com/ ...
- 推荐两个国外公共CDN服务
最近这个国家信息安全问题舆论形势又见紧张,Google的访问又被强力堵截,谷歌的公共CDN也顺带被波及,像AngularJS这样的前卫js库,国内几大公共CDN服务都不提供支持.国外目前两大第三方公共 ...
- 基于JS的WEB会议室预订拖拽式图形界面的实现
06年的一篇blog,转到这个博客上: 很早之前写的,后来由于这个功能模块取消,最终没有上线,所以与Server交互的那部分还没有写,不过那部分方案我也已经出来了,而且现在客户端这一部分已经通过了比较 ...
- View requires API level 14 (current min is 8): <GridLayout>
在学习android的过程中,出现这个错误的是否,可以build clean解决
- esp-12e折腾
寒假前就从x宝买了esp-12e以及esp32s,当时似乎是想给自己的蓝牙开门升级换代?esp32s拿来过度linux? 寒假放在书包拿回去以为有时间会玩玩,没想到一直耽搁到现在.前两天才拿出来,网上 ...