51Testing软件测试论坛
标题:
前端性能优化，我们可以做哪些？
[打印本页]
作者:
测试积点老人
时间:
2018-12-12 15:27
标题:
前端性能优化，我们可以做哪些？
1、雪碧图技术
这个很简单，把每个小图标都整合到一张大图上面，极大的减轻http请求数，同时能够让图片快速加载进来。
考虑到当前的5g的发展前景，以后图片不会造成加载延迟的现象。
2、浏览器渲染机制
输入一个网址：我们得到服务端html文件。
根据html文件，从头到尾的一个个的依次渲染页面渲染页面。
但是遇到图片——不会等待图片的加载完毕，会直接渲染下面的标签。
如果图片加载出来——根据图片选择，由于图片要占用空间，决定是否重新加载页面，这个概念叫reflow。（优化的方式——给图片宽高）。
reflow和什么相关：占位面积、定位方式、边距。
对于样式中的颜色变化，叫做repaint、这个就只需要把颜色改变。所以性能上来说，repaint稍微比reflow高点。
repaint和什么相关：和颜色变化相关
3、webpack、gulp等打包工具的使用
压缩代码，减少了代码体积。
可以把多个css文件，多个js文件，合并为一个css文件/js文件。
合并文件，让我们减少了http请求数。
4、避免页面跳转，也就是使用单页面应用的开发。
每次页面跳转，就是一次html文件的下载过程。而这个过程，我们首先从服务端下载网页，再进行渲染，网页性能体验会很差。而单页面应用，它从一开始，就把完整的网页给加载到本地。
5、延迟加载、懒加载技术
什么是懒加载技术：
原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载技术</title>
<style>
li{
width: 300px;
height: 400px;
}
li img{
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
window.onload = function () {
var lazyLoad = (function () {
var timer = 0;
function init() {
$(window).on('scroll',function () {
timer && clearTimeout(timer);
timer = setTimeout(function () {
console.log('scroll')
showImage();
},200)
});
showImage();
}
function showImage() {
$('img').each(function () {
var current = $(this);
if(current.attr('isLoaded')) return;
shouldShow(current) && showImg(current);
})
}
function shouldShow(node) {
var scrollH = $(window).scrollTop(),
winH = $(window).height(),
top = node.offset().top;
if(top < winH + scrollH){
return true;
}else{
return false;
}
}
function showImg(node) {
node.attr('src',node.attr('data-src'));
node.attr('isLoaded',true);
}
return {
init: init
}
})();
lazyLoad.init();
};
</script>
</head>
<body>
<ul>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
<li>
<img
data-src="https://img11.360buyimg.com/babel/s700x360_jfs/t17803/198/955524217/34057/c1046b73/5ab469d6Nb7738eba.jpg!q90!cc_350x180"
src="https://img10.360buyimg.com/babel/s340x420_jfs/t17560/109/1280106391/43247/e6499029/5ac48cf1N6ae7ba3a.jpg!q90!cc_340x420"
alt=""
>
</li>
</ul>
</body>
</html>
复制代码
6、将css放在HEAD中
如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
7、Vue项目的按需加载
vue中的懒加载是通过webpack的代码分割来实现的，下面是官网文档：
https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
主要是在加载路由的时候，使用：
const Main = r => require.ensure([], () => r(require(‘../views/main/Main’)))
require.ensure就是webpack提供的异步加载的方式。
8、关于React的性能优化
react中，进行性能优化的核心就是shouldComponentDidMount周期函数。
下面是我写的性能优化的博客：
react性能优化
9、设置合理的http缓存
http请求中，我们可以合理的设置headers，就能达到缓存的目的。
有两种常见的缓存，强制缓存和对比缓存：
第一种：强制缓存。
直接访问浏览器中的缓存数据，如果存在，则直接使用浏览器中的数据。如果不存在，则再向服务器发送请求，然后得到服务器的数据，再把这些数据存在浏览器中。
第二种：对比缓存。
首先，获取浏览器中的数据缓存标识，再获取服务器上面的数据缓存标识，如果相匹配，则直接从浏览器中获取数据，如果不匹配，则从服务器上获取数据。
关于缓存标识，有两类标识：
第一类：
第一次请求，服务器会返回一个Last-Modified。
下一次请求，浏览器会自动在headers中添加一条If-Modified-Since属性，记录的就是上一次数据发生修改的时间。
第二类：
第一次请求，服务端返回一个Etag资源唯一标识符。
第二次请求，浏览器会自动携带一个If-None_Match标识符。
应用程序缓存
创建cache manifest文件，通过给html文件中的HTML标签添加一个manifest属性来实现的。
<span class="hljs-doctype" style="box-sizing: border-box; outline: 0px;"><!DOCTYPE HTML></span>
复制代码
欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)
Powered by Discuz! X3.2