页面性能优化

我会带着你远行 2022-05-10 16:48 216阅读 0赞

**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字段（加载完毕就会立刻执行）

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

**3.浏览器缓存：**  
[https://blog.csdn.net/qq593249106/article/details/83154210][https_blog.csdn.net_qq593249106_article_details_83154210]

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

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

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

[https_blog.csdn.net_qq593249106_article_details_83154210]: https://blog.csdn.net/qq593249106/article/details/83154210