JS基础——浅谈前端页面渲染和性能优化

加载html中的静态资源 

其中,加载静态资源的过程,一般为浏览器根据DNS服务器得到域名的IP地址,然后向这个IP的机器发送http请求,服务器收到、处理并返回http请求,浏览器得到返回http请求.

浏览器渲染页面的过程 

• 根据HTML 结构生成DOM Tree
• 根据CSS 生成 CSSOM
• 将DOM和CSSOM结合生成RenderTree
• 浏览器根据RenderTree开始渲染和展示
• 遇到<script> 时,会执行并阻塞渲染

window.onload // 页面的全部资源全部渲染完
documnet.addEventListener('DOMContentLoaded',function(){
// dom 渲染完即可执行,此时图片和视频可能§§还没加载完
})

性能优化　

原则

多使用内存、缓存或者其他方法

减少CPU计算、减少网络请求

解决

加载资源优化

1. 静态资源的压缩合并(webpack 构建工具)
2. 静态资源缓存(内容改变,链接名字才会改变)
3. 使用CDN让资源加载更快(内容分发网络)
4. 使用SSR后端渲染,数据直接输出到html中(例如react 的renderToString)

渲染优化

CSS放前面,JS放后面

懒加载(图片懒加载、下拉加载更多)

<img src="preview.png" date-realsrc="abc.png"> //date-realsrc 真正的图片
<script type="text/javascript">
var img1=document.getElementsByTagName('img')[0];
img1.src=img1.getAttribute('date-realsrc')
</script>

减少dom查询,对dom查询做缓存

for 每次循环都需要dom查询 document.getElementsByTagName('img')

如果var domList = document.getElementsByTagName('img');只要一次dom查询

减少dom操作,多个操作尽量合并到一起

var frag = document.createDocumentFragment();不属于主dom中,通常用于片段的处理

案例:

let ul = document.querySelector(`[data-uid="ul"]`),
    docfrag = document.createDocumentFragment();

const browserList = [
    "Internet Explorer", 
    "Mozilla Firefox", 
    "Safari", 
    "Chrome", 
    "Opera"
];

browserList.forEach((e) => {
    let li = document.createElement("li");
    li.textContent = e;
    docfrag.appendChild(li);
});
ul.appendChild(docfrag);

事件节流

var searchTimeout = null;
$('#input').on('keyup', function(event) {
    //每次keyup时直接取消上次计时器，只有当keyup超过100ms时才执行handler
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        handler();
    }, 100);
});

尽早执行操作(DOMContentLoaded) 

window.addEventListener('load',function(){
　　// 页面的全部资源全部渲染完
　　............
}) 
documnet.addEventListener('DOMContentLoaded',function(){
　　.....
　　// dom 渲染完即可执行,此时图片和视频可能§§还没加载完
})