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账号,今天接着讲,我们部署完 ...
随机推荐
- Leetcode_231_Power of Two
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/47334243 Given an integer, writ ...
- 排队时延(Queuing delay)
网络时延的构成 Network delay including four parts: Processing delay - time routers take to process the pack ...
- 【44】java大数值剖析
基本的整数和浮点型精度不能满足需求,那么可以使用java.math中的两个类:BigInteger和BigDecimal. BigInteger和BigDecimal介绍: 这两个类可以处理包含任意长 ...
- 阳阳买苹果--C实现
原题:阳阳第一天买了两个苹果,一个苹果0.8元.从第二天开始,他每天购买前一天苹果数量的2倍,直到购买的苹果个数达到不超过100的最大值.编程求阳阳平均每天花多少钱? 编程思路: 假设阳阳每天购买苹果 ...
- error C4996: 'strcpy': This function or variable may be unsafe.
vs2012用strcpy遇到的错误. 错误描述:error C4996: 'strcpy': This function or variable may be unsafe. Consider us ...
- 知物由学|游戏开发者如何从容应对Unity手游风险?
本文由 网易云发布. "知物由学"是网易云易盾打造的一个品牌栏目,词语出自汉·王充<论衡·实知>.人,能力有高下之分,学习才知道事物的道理,而后才有智慧,不去求问就不 ...
- IOS空数据页面,网络加载失败以及重新登陆View的封装(不需要继承)
一.问题 对于B2C和B2B项目的开发者,可能会有一个订单列表为空,或者其他收藏页面为空,用户token失效,判断用户要重新登陆,以及后台服务错误等提示.本篇课文,看完大约10分钟. 原本自己不想写空 ...
- 初步认识thymeleaf:简单表达式和标签(二)
1.th:each:循环,<tr th:each="user,userStat:${users}">,userStat是状态变量,有 index,count,size, ...
- Python小游戏之 - 飞机大战美女 !
用Python写的"飞机大战美女"小游戏 源代码如下: # coding=utf-8 import os import random import pygame # 用一个常量来存 ...
- Linux的动态库与静态库
1.动态库与静态库简介 在实际的软件开发中,为了方便使用一些被重复调用的公共代码,我们经常将这些公共的函数编译成动态库或静态库.我们知道程序一般要经过预处理.编译.汇编和链接这几个步骤才能变成可执行的 ...