ITPub博客

首页 > 应用开发 > IT综合 > 前端性能优化总结,这也是我做程序员的第五个年头了

前端性能优化总结,这也是我做程序员的第五个年头了

原创 IT综合 作者:智云编程 时间:2019-01-12 22:03:44 0 删除 编辑

前文

转眼间2018年就要结束了,越是写博客就越发现,博客的力量是有限的,除非超越博客。写公开发表的文章是大不同的。笔记可以写得像铜墙铁壁那么规整,可以一层一层地嵌进去。但是发表在博客上的文章就像代码,是写给自己之外的人看的,要讲究阅读体验。偶尔要用段子活跃一下气氛给读者提提神,字里行间也要注意正确地使用行话。尤其是写一些教程一般的文章时,要循序渐进地讲述自己的操作过程,还要战战兢兢地担心别人无法复现自己的结果(人类的本质是复读机)。


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);

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类似,他可以精确到秒的更高级别。

最后

尽管有年月日的划分,但日子毕竟是连在一起过的,所以今年未完成的学习安排并不会在2019年到来的那一刻戛然而止。2019年,想必会是忙碌的一年。预祝大家2019年,加班少点,工资多点!

这里推荐一下我的学习交流群:731771211,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入

点击: 加入


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69901074/viewspace-2396391/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
前端开发学习交流群:731771211 让梦想照亮现实,前端者的集中营

注册时间:2018-12-03

  • 博文量
    114
  • 访问量
    60446