摘要：原则多使用内存，缓存或者其他方法减少计算，减少网络请求减少操作硬盘读写加载资源优化静态资源的合并和压缩。操作事件节流主要用于触发频率较高的事件，设定一个缓冲触发事件。
1.原则
多使用内存，缓存或者其他方法
减少CPU计算，减少网络请求
减少IO操作（硬盘读写）
2.加载资源优化静态资源的合并和压缩。
静态资源缓存（浏览器缓存策略）。
使用CDN让静态资源加载更快。
3. 渲染优化CSS放head中，JS放body后
图片懒加载
减少DOM操作，对DOM操作做缓存
减少DOM操作，多个操作尽量合并在一起执行
事件节流
尽早执行操作 DOMContentLoaded
4. 示例 4.1 资源合并a.js b.js c.js --- abc.js4.2 缓存
通过连接名称控制缓存
只有改变内容的时候，链接名称才会改变。
4.3 懒加载
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
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。 有 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预解析在一些浏览器的a标签是默认打开dns预解析的，在https协议下dns预解析是关闭的，加入mate后会打开。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100505.html
摘要：前言对于前端的性能话题，从来都没有断绝过。作为一个前端开发者，性能是我们关注的指标。前端发展以来，优化方式，琳琅满目，有雅虎军规等。所以，接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。 前言 对于前端的性能话题，从来都没有断绝过。因为这个东西没有最好，只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者，性能是我们关注的指标。它直接影响着我们...
摘要：前言对于前端的性能话题，从来都没有断绝过。作为一个前端开发者，性能是我们关注的指标。前端发展以来，优化方式，琳琅满目，有雅虎军规等。所以，接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。 前言 对于前端的性能话题，从来都没有断绝过。因为这个东西没有最好，只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者，性能是我们关注的指标。它直接影响着我们...
摘要：前言对于前端的性能话题，从来都没有断绝过。作为一个前端开发者，性能是我们关注的指标。前端发展以来，优化方式，琳琅满目，有雅虎军规等。所以，接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。 前言 对于前端的性能话题，从来都没有断绝过。因为这个东西没有最好，只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者，性能是我们关注的指标。它直接影响着我们...
摘要：前端每周清单年度总结与盘点在过去的八个月中，我几乎只做了两件事，工作与整理前端每周清单。本文末尾我会附上清单线索来源与目前共期清单的地址，感谢每一位阅读鼓励过的朋友，希望你们能够继续支持未来的每周清单。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清单年度总结与盘点 在过去的八个月中，我几乎只做了...
摘要：是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。 web前端性能优化主要分为以下几个板块: 加载优化 DNS预解析 合并img、css、javascript文件，减少http请求 缓存一切可缓存资源 使用长Cache 使用外联式引用css、javascript文件 压缩HTML、css、jav...
摘要：是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。 web前端性能优化主要分为以下几个板块: 加载优化 DNS预解析 合并img、css、javascript文件，减少http请求 缓存一切可缓存资源 使用长Cache 使用外联式引用css、javascript文件 压缩HTML、css、jav...
阅读 3647·2021-11-24 09:39
阅读 1243·2021-09-30 09:48
阅读 3219·2021-09-09 11:51
阅读 2851·2021-09-08 10:41
阅读 1282·2019-08-30 14:06
阅读 2779·2019-08-30 14:01
阅读 854·2019-08-29 17:11
阅读 3152·2019-08-29 15:37
