随笔分类 - 前端性能
前端性能监控优化相关
摘要:1. 背景 几个月前对腾讯文档 Smart Sheet 中看板视图的排版计算进行了一次优化,主要是利用异步分片计算来提高当前的 FPS 值,避免用户操作被阻塞。感谢 kylehr 的支持和帮助。 目前项目中主要有三个地方用到了异步分片计算,分别是: 表格视图的列统计计算 看板视图的排版计算 甘特视图
阅读全文
摘要:在优化网站打开速度上,我们有很多的方法,而其中一个就是减少诸如Javascript和CSS等资源文件的大小,而减少文件大小的方法除了在代码上下功夫外,最常用的方法就是使用压缩算法对文件进行压缩。 目前,网站普遍使用的是gzip压缩算法,当然你可能还知道deflate和sdch算法,但是最近两年新兴了
阅读全文
摘要:开发者可以控制浏览器资源的加载顺序,但这种控制的粒度能做到多细呢? 本文来聊聊资源加载优先级的问题。 浏览器解析资源的优先级 当浏览器开始解析网页,并开始下载图片、Script 以及 CSS 等资源的时候,浏览器会为每个资源分配一个代表资源下载优先级的 fetch priority 标志。 而资源下
阅读全文
摘要:HTTPS的主要缺点是需要设置连接,每次新的TLS连续都需要握手,以便创建共享的加密密钥,这个握手过程在标准TCP的握手过程之上还需要两个额外的来回过程,用这样一个高延时的连接,在网站第一个字节传输之前需要三个来回就让人感觉这个网站有点慢。 TLS有几个特征可以用来消除额外的来回,比如重用一个会话s
阅读全文
摘要:使用Brotli提高网站访问速度 在优化网站打开速度上,我们有很多的方法,而其中一个就是减少诸如Javascript和CSS等资源文件的大小,而减少文件大小的方法除了在代码上下功夫外,最常用的方法就是使用压缩算法对文件进行压缩。 目前,网站普遍使用的是gzip压缩算法,当然你可能还知道deflate
阅读全文
摘要:开始 今天突然心血来潮想起前端性能优化的问题,这基本是老生常谈的事情了,面试随便都能说上几个,但是还是有点疑问:就是Head标签了,记忆中Head可是藏龙卧虎,各种技能都有,当然这些不可能都一一记住,太伤脑细胞了,于是打开神奇的Github,来到这个 HEAD项目,翻一翻就会看到今天的主角dns-p
阅读全文
摘要:写在前面 今天再看一同事写的代码,发现了这样<link rel="dns-prefetch" href="//hm.baidu.com">这个代码,很好奇查了一下才知道,dns-prefetch链接关系类型用于指示将用于获取所需资源的源,并且用户代理应该尽可能早地解析,可以提高网页的载入速度。 背景
阅读全文
摘要:本文主要介绍preload的使用,以及与prefetch的区别。然后会聊聊浏览器的加载优先级。 preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行。提供的好处主要是 将加载和执行分离开,可不阻塞渲染和 document 的 onload 事件
阅读全文
摘要:关于页面相应时间,有一条著名的“2-5-8原则”。当用户访问一个页面: 在2秒内得到响应时,会感觉系统响应很快; 在2-5秒之间得到响应时,会感觉系统的响应速度还可以; 在5-8秒以内得到响应时,会感觉系统的响应速度很慢,但可以接受; 而超过8秒后仍然无法得到响应时,用户会感觉系统糟透了,进而选择离
阅读全文
摘要:做移动web页面,受移动网络网速和终端性能影响,我们经常要关注首屏内容展示时间(以下简称首屏时间)这个指标,它衡量着我们的页面是否能在用户耐心消磨完之前展示出来,很大程度影响着用户的使用满意度。 怎么获取首屏时间呢? 我们经常要先问自己:页面是怎么加载数据? A:加载完静态资源后通过ajax请求去后
阅读全文
摘要:背景 首先我们为什么要做前端系统呢,先看下面这张表,可以很显然的看出,前端的性能对于产品的价值提升还是蛮有帮助的,但是这些信息如果我们能实时的采集到,并且实施以监控,让整个产品在产品线上一直保持高效的运作,这才是我们的目的。 性能 收益 Google 延迟 400ms 搜索量下降 0.59% Bin
阅读全文
摘要:(1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? (2)我们一再强调将css放在头部,将js文件放在尾部,这样有利于优化页面的性能,为什么这种方式能够优化性能? (3)在用jquery的时候,我们一般都会将
阅读全文
摘要:Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。 大概长这个样子,小程序也支持 属性 timing (PerformanceTiming) 从输入url
阅读全文
摘要:刚刚给博客加了一个500px相册插件,lightbox引入了很多js文件和css文件,页面一下子看起来非常臃肿,所以还是把Gzip打开了。 环境:Debian 6 1、Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2、找到如下一段,进行修改
阅读全文
摘要:这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中。 在我的印象中,facebook是这个领域的鼻祖,有兴趣、有梯子的同学可以去看看facebook的页面源代码,体会一下什么叫工程化。 接下来,我想从原理展开讲述,多图,
阅读全文