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 渲染完便可执行,此时图片和视频可能§§还没加载完
})