前端面试题之页面性能优化

1.合并资源，减少http请求：
合并资源：CSS Sprites(精灵图)，压缩代码
减少http请求：一个页面请求不要太多，能分页分页，把每个页面请求减少

2.异步加载非核心代码：
三种方法：动态创建script，script标签添加defer字段，script标签添加async字段

1）动态创建script：

function addScriptTag(src){
	var script = document.createElement('script');
	script.setAttribute("type","text/javascript");
	script.src = src;
	document.body.appendChild(script);
}
window.onload = function(){
	addScriptTag("js/index.js");
}

用js创建一个script标签，然后用window.onload方法让这个标签确保页面加载之后再插入到DOM中

2）script标签添加defer字段（加载完毕就会立刻执行）

<script src="test.html" defer></script>

3）script标签添加async字段（在文档元素完全载入后，一般会按照原本的顺序执行）

<script src="test.html" async></script>

3.浏览器缓存：
https://blog.csdn.net/qq593249106/article/details/83154210

4.使用CDN：
CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。

5.预解析DNS：
DNS全称为Domain Name System，即域名系统，是域名和IP地址相互映射的一个分布式数据库。
域名解析即通过主机名，最终得到该主机名对应的IP地址的过程。
1）用meta信息来告知浏览器, 当前页面要做DNS预解析:

<meta http-equiv="x-dns-prefetch-control" content="on" />

2）在页面head中使用link标签来强制对DNS预解析:

<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

前端面试题之页面性能优化

前端面试题之页面性能优化

猜你喜欢