从一道面试题说起—你知道哪些前端性能优化方法

被裁员之后,在家休息了一周,现在开始苦兮兮的面试日子。面了几家,发现这个问题出现的频率过于高了,这里通过另一道面试题,浏览器输入URL后发生了什么为思路,做一个简单的反思总结。

浏览器输入URL并按下回车

无优化点

浏览器查找当前URL是否存在缓存

有一次面试,面试官问了个问题,你知道浏览器有哪些缓存方法。我当时第一反应是localstorage那一套东西,突突突报了一遍。面试官笑笑说,你这才说了一半,然后我人就傻了。回来后查了一些资料,原来想说的是这个东西。学习了一下相关的知识,这里记录一下。

强缓存(不走服务器)

强制缓存流程

在没有缓存数据的时候,浏览器向服务器请求数据时,服务器会将数据和缓存规则一并返回,缓存规则信息包含在响应header中。对于强制缓存来说,响应header中会有两个字段来标明失效规则(Expires/Cache-Control)
Expires值为服务器返回的到期时间,HTTP1.0标准,现已废弃
Cache-Control 有更详细的缓存规则

协商缓存(走服务器)

对比缓存流程

浏览器第一次请求数据时,服务器会将缓存标识与数据一起返回给客户端,客户端将二者备份至缓存数据库中。
再次请求数据时,客户端将备份的缓存标识发送给服务器,服务器根据缓存标识进行判断,判断成功后,返回304状态码,通知客户端比较成功,可以使用缓存数据。

Last-Modified 服务器在响应请求时,告诉浏览器资源的最后修改时间。
If-Modified-Since 再次请求服务器时,通过此字段通知服务器上次请求时,服务器返回的资源最后修改时间。

Etag  /  If-None-Match(优先级高于Last-Modified  /  If-Modified-Since)
Etag 服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定)。
If-None-Match 再次请求服务器时,通过此字段通知服务器客户段缓存数据的唯一标识。

总结

对于强制缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行比较缓存策略。
对于比较缓存,将缓存信息中的Etag和Last-Modified通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存。

优化点

服务器对静态资源设置浏览器缓存信息,浏览器在有缓存的情况下直接从本地读取资源。

DNS域名解析

当浏览器访问一个域名的时候,需要解析一次DNS,获得对应域名的ip地址。在解析过程中,按照浏览器缓存系统缓存路由器缓存ISP(运营商)DNS缓存根域名服务器顶级域名服务器主域名服务器的顺序,逐步读取缓存,直到拿到IP地址
DNS Prefetch,即DNS预解析就是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度

<link rel="dns-prefetch" href="https://www.google.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">

CDN

使用cdn分发,将用户的请求重新导向距离较近的服务节点。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度

TCP连接

DNS解析后得到了服务器的ip,接下来就是和服务器建立起连接,这通过TCP的三次握手完成。

浏览器向服务器发送HTTP请求

减少请求次数,为什么要减少请求次数,
合并外部请求的js、css文件
运用CSS精灵合并处理多个icon文件、运用图标字体、把小图标转为base64

浏览器接收响应体

对请求的文件进行打包(webpack),减少文件体积,使用gzip压缩

页面渲染

浏览器构建的步骤,大概如下:
1、处理HTML标记并构建DOM树
2、处理CSS标记并构建CSSOM树
3、将DOM与CSSOM合并成一个渲染树
4、根据渲染树来布局,以计算每个节点的集合信息
5、将各个节点绘制到屏幕

js的影响

js是会阻塞页面渲染,所以把js放在body底部,或者异步

css的影响

前端页面渲染时会根据DOM结构生成一个DOM树,然后加上CSS样式生成渲染树。如果CSS文件放在标签中,则CSS Rule Tree会先于DOM树完成构建,之后浏览器就可以边构建DOM树边完成渲染;反之,CSS文件放在所有页面标签之后,比如之前,那么当DOM树构建完成了,渲染树才构建,浏览器不得不再重新渲染整个页面,这样造成了资源的浪费。而且页面还可能会出现闪跳的感觉,或者白屏或者布局混乱或者样式很丑,直到CSS加载完成,页面重绘才能恢复正常。
因此,一般来讲,css标签应放在标签之间。但如果css文件较大,会让首页白屏时间更长,所以并不是说把css都放顶部是一个完美的方法。权衡利弊,应该把必须的css(js)放顶部,把不那么重要的css(js)放底部。

发表评论

邮箱地址不会被公开。 必填项已用*标注