前端优化

减少http请求

1 合理使用http缓存;

2 CSS Sprites,通过合并 CSS图片减少请求数;

把非常多小图片集中到一张图片上这样在仅仅须要一个HTTP请求-响应,下载一次之后不管是该页面还是网站其他页面使用这张大图上的图片的时候就能够使用缓存,不会带来重复下载的开销。所以仅仅有一个HTTP请求-响应

3 js脚本放在文档尾部,css放在文档头部;

4 压缩图片和代码;

5 异步script标签;

defer:  异步加载,在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似

async: 异步加载,加载完成后立即执行

6 避免使用层级较深的选择器或复杂选择器,提高css渲染效率;

7 避免多次操作dom,可以用文档片段(createDocumentFragment);

// 在Node.js中,当需要统计一段代码的执行时间时,可以使用console.time方法与console.timeEnd方法,其中console.time方法用于标记开始时间,console.timeEnd方法用于标记结束时间,并且将结束时间与开始时间之间经过的毫秒数在控制台中输出
<script>
    var list1 = document.getElementById('list1');
    console.time("time");
    var fragment = document.createDocumentFragment();
    for(var i = 0; i < 500000; i++){
        fragment.appendChild(document.createElement('li'));
    }
    list1.appendChild(fragment);
    console.timeEnd('time');
</script>

8 使用轻量级框架

原文地址:https://www.cnblogs.com/xjy20170907/p/12739424.html