换个思路。 成dou网站建设公司_创新互联， 为您提供响应式网站、定制开发、关键词优化、品牌网站制作、网站营销、外贸网站建设

前端优化，从网络开始请求，到再说说渲染结束，中间方方面面的小环节，douKe以进行hen多优化， 事实上... 前端优化雅虎军规依然是优化方向，每一个小环节douKe以写出来hen多小文章。

公正地讲... 下面放一个页面小函数显示当前页面的各阶段加载的小时间。

前端开发完之后业务说太卡，你优化吧。我打开一个离职的小同事的代码， 复用到是用的挺好的，不过把一个小城市级联里面下载数据的环节封装到组件中，页面中有8个小地方dou用到了打开网络请求， 复盘一下。 真的就下载了8次2M的小城市数据。幸好我们网络情况还不错，也就每次页面打开前卡半分钟而Yi，呵呵了。

jsHeapSizeLimit: 小内存大小限制totalJSHeapSize: 可使用小内存usedJSHeapSize: Yi使用小内存，乱弹琴。

• navigation
• onresourcetimingbufferfull
• timeOrigin
• timing

各个节点小时间的间隔就是每个环节的使用情况了。

在前后端小分离的大环境下前端优化也越来越小重要。无论从视觉、性Neng、页面逻辑上进行优化，douKe以比较直观的提升用户体验。当然优化的前提是知道我哪里慢了performance API就是进行这样的监控的。

关于performanceAPI是建立在chrome浏览器的基础上使用的，其他浏览器兼容情况暂时没有去小究，我坚信...。

使用上的性Neng面板的时候， Ru果你的chrome上安装了hen多插件的话，建议打开无痕模式进行调试，与君共勉。。

        
            function performanceTest {
                let timing = performance.timing,
                    readyStart = timing.fetchStart - timing.navigationStart,
                    redirectTime = timing.redirectEnd - timing.redirectStart,
                    appcacheTime = timing.domainLookupStart - timing.fetchStart,
                    unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart,
                    lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart,
                    connectTime = timing.connectEnd - timing.connectStart,
                    whiteScreenTime = timing.responseStart - timing.navigationStart,
                    requestTime = timing.responseEnd - timing.requestStart,
                    initDomTreeTime = timing.domInteractive - timing.responseEnd,
                    domReadyTime = timing.domComplete - timing.domInteractive,
                    loadEventTime = timing.loadEventEnd - timing.loadEventStart,
                    loadTime = timing.loadEventEnd - timing.navigationStart;
                console.log;
                console.log;
                console.log;
                console.log;
                console.log;
                console.log;
                console.log;
                console.log;
                console.log;
                console.log;
                console.log;
                console.log;
            }
        
    

performance 方法

1. clearMarks 清理打点标记
2. clearMeasures 清理连线标记
3. clearResourceTimings 重置缓冲区域大小
4. getEntries 获取所有资源分节点加载时间
5. getEntriesByName 通过Name获取所有资源分节点加载时间
6. getEntriesByType 通过Type获取所有资源分节点加载时间
7. mark 增加打点标记
8. measure 增加打点连线标记
9. now 从获取基准时间到当前时间的间隔，精确到微秒百万分之一秒，呃
10. setResourceTimingBufferSize 设置缓冲区域大小

chrome开发这工具的Performance面板

本地开发调试的话，chrome中提供了关于Performance情况geng加详细的小报表数据， 我心态崩了。 精确到每个资源，每个时间点页面的渲染效果，后续就Ke以针对环节进行专项优化

网页名称：前端性Neng优化监控之performance API

分享路径：https:///news/.html