Web性能优化——浏览器相关

Posted 2021-04-30 Web开发

来自：庄君祥 - 博客园

链接：http://www.cnblogs.com/ansn001/p/5691525.html（点击尾部阅读原文前往）

简介

优化是一个持续的过程。所以尽可能的不要有人为的参与。所以能自动化的或者能从架构、框架级别解决的就最更高级别解决。

这样即能实现面对开发人员是透明的、不响应，又能确保所有资源都是被优化过的。

场景

• 确保静态资源是有缓存。

• 确保静态资源的大小最小。

• 确保加载的资源最少。

• 确保用户以最短的时间看到页面

• 减少人为因素的性能瓶颈。

解决方案

缓存

让资源更可能快的让用户看到。

结合代理（nginx）来实现。给http添加缓存的时长。

# 需要缓存的静态资源类型   
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|ico)$ {   
    ....   
    if (-f $request_filename) {   
        expires 1d;   
        break;   
    }   
}

说明：

html文件的缓存，要根据具体业务来判断。因为有些是真实的Html文件。有些是伪静态，并没有真的html文件

也可以通过cdn来缓存。

压缩

通过自动化压缩的工具来实现，尽量不要有人为的参与。这样即能对开发是透明的，不增加复杂度，也能防止因为人为的因素的遗忘。

建议：glup的插件（jsmin，cssmin,imgmin）

按需加载

图片加载延迟

所谓图片延迟加载，就是每次只加载当前屏幕可见区域的图片，其余的图片在用户滚动页面到该位置后才开始加载。这是一项非常实用的技术，减少了并发数，不但减少了服务器的压力，也降低了页面的加载时间，目前很多门户网站都使用了该技术，如腾讯微博的“看看推荐的人”页面，在该页面上有几千个头像，如果一次性加载全部的图片，就要耗费比较多的客户端和服务器端的资源。该功能的实现原理很简单，就是将页面上的src替换成其他标记（如original），在页面滚动到相应位置后，再将original更改为src。目前有个Jquery插件Jquery.LazyLoad.js可以实现图片的延迟加载，而且这个方法也能减少请求数。

异步加载

首屏为行，重要信息为先，次要信息异步加载。

减少不必要的传输

动静域名分离。不传输cookie。有很多业务相关的cookie会通过http传输。比如登录后的token等。

减少请求数

网络请求是很费时。即增加了服务器压力，也影响用户使用的性能。

一般思路是通过合并来实现。

1、合并请求。结合代理(nginx)的模块(concat)来实现。

2、合并资源。雪碧图。这个也可以通过glup插件来实现。

加快渲染

image属性设置

有时需要在页面加载完之前，就对页面布局进行定位。

若页面中的图片没指定尺寸，或尺寸与实际图片大小不符，浏览器会在图片下载完成后再"回溯"该图片并重新显示，从而浪费时间。

# 页面的请求过程   
...   

12. 渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置   
13. 一旦计算出来渲染的坐标后，又同步去开始渲染   
14. 10-13步进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染   

...

所以，如果image如果没有width和height的话，会影响性能。

js位置

js的加载方式是阻塞式的。放在最后，等页面都渲染完了再加载。

减少嵌套层级

嵌套越深，document的构建越慢。

高性能的规范

比如说：

1、避免CSS表达式

2、避免过大的cssName

3、避免频繁的DOM操作等。

...

也可以把上面的一些对性能有响应加到规范里，比如img标签必须有width和height，不允许css import，嵌套不允许超过3级等等。具体还是要看前端的规范。最好能有一些自动检验规范的工具。比如csshint，或者自己写一些小工具等。

验证方法

1、谷歌浏览器的开发者工具（控制台）

2、pagespeed

3、yslow

4、https://varvy.com/tools/css-delivery/

5、Chrome Task Manager。能查看内存泄漏

参考资源

1、网站性能优化工具大全

2、web前端性能分析--原理篇

3、Web性能优化分析

4、Web前端，高性能优化

5、Web前端优化最佳实践及工具集锦

---

●本文编号129，以后想阅读这篇文章直接输入129即可。

●输入m可以获取到文章目录

更多推荐《》

涵盖：程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、ios开发、C/C++、.NET、Linux、数据库、运维等。传播计算机学习经验、推荐计算机优秀资源：点击前往《》！