1.准绳
多运用内存,缓存或许其他要领
削减CPU盘算,削减收集要求
削减IO操纵(硬盘读写)
2.加载资本优化
静态资本的兼并和紧缩。
静态资本缓存(浏览器缓存战略)。
运用CDN让静态资本加载更快。
3. 衬着优化
CSS放head中,JS放body后
图片懒加载
削减DOM操纵,对DOM操纵做缓存
削减DOM操纵,多个操纵只管兼并在一起实行
事宜撙节
尽早实行操纵 DOMContentLoaded
4. 示例
4.1 资本兼并
a.js b.js c.js --- abc.js
4.2 缓存
经由历程衔接称号掌握缓存
<script src="abc_1.js" ></script>
只需转变内容的时刻,链接称号才会转变。
4.3 懒加载
<img src="preview.png" realsrc="abc.png" id="img1" />
<script>
var i = document.getElementById('img1');
i.src = i.getAttribute('realsrc');
</script>
4.4 缓存dom查询
//没有缓存dom
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {
}
//缓存dom
var p = document.getElementsByTagName('p');
for (let i = 0; i < p.length; i++) {
}
4.5 兼并dom插进去
var listNode = document.getElementById('list');
var flag = document.createDocumentFragment();
var li;
for (let i = 0; i < 10; i++) {
li = document.createElement('li');
li.innerHTML = i;
flag.appendChild(li);
}
listNode.appendChild(flag);
10次dom插进去 —> 1次dom插进去
4.6 事宜撙节
监听笔墨转变事宜,无操纵100毫秒后实行操纵,不必每次触发。
var textarea = document.getElementById('ta');
var timeoutId;
textarea.addEventListener('keyup',function(){
if(i){
clearTimeout(i);
}
timeoutId = setTimeout(() => {
//操纵
}, 100);
});
事宜撙节重要用于触发频次较高的事宜,设定一个缓冲触发事宜。
补充
异步加载
非中心代码异步加载 — 异步加载的体式格局 — 区分
1.动态剧本加载
用js建立
2.defer
3.async
<script src="script.js"></script>
没有 defer 或 async,浏览器会马上加载并实行指定的剧本,“马上”指的是在衬着该 script 标签之下的文档元素之前,也就是说不守候后续载入的文档元素,读到就加载并实行。
<script async src="script.js"></script>
有 async,加载和衬着后续文档元素的历程将和 script.js 的加载与实行并行举行(异步)。
<script defer src="myscript.js"></script>
有 defer,加载后续文档元素的历程将和 script.js 的加载并行举行(异步),然则 script.js 的实行要在一切元素剖析完成以后,DOMContentLoaded 事宜触发之前完成。
关于 defer,我们还要记着的是它是根据加载递次实行剧本的
标记为async的剧本并不保证根据指定它们的先后递次实行。对它来讲剧本的加载和实行是牢牢挨着的,所以不论你声明的递次怎样,只需它加载完了就会马上实行。
浏览器缓存
浏览器缓存 — 缓存的分类 — 缓存的道理
缓存就是html文件在当地存在的副本,
强缓存
发现有缓存直接用。
Expires: 相对时候,推断客户端日期是不是凌驾这个时候
Cache-Control:相对时候,推断接见距离是不是大于3600秒
//在设定时候之前不会和服务端举行通讯了
//假如两个都下发以后者为准
协商缓存
讯问服务器缓存是不是能够用,在举行推断是不是用。
Last-Modified/If-Modified-Since
第一次要求,respone的header加上Last-Modified(末了修正时候)
再次要求,在request的header上加上If-Modified-Since
和服务端的末了修正时候对照,假如没有变化则返回304 Not Modified,然则不会返回资本内容;假如有变化,就一般返回资本内容。
浏览器收到304的相应后,就会从缓存中加载资本
假如协商缓存没有掷中,浏览器直接从服务器加载资本时,Last-Modified的Header在从新加载的时刻会被更新
Etag/If-None-Match
这两个值是由服务器天生的每一个资本的唯一标识字符串,只需资本有变化就这个值就会转变;其推断历程与Last-Modified/If-Modified-Since相似,他能够准确到秒的更高级别。
DNS预剖析
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">
在一些浏览器的a标签是默许翻开dns预剖析的,在https协定下dns预剖析是封闭的,到场mate后会翻开。