页面性能

最新推荐文章于 2024-04-22 09:45:18 发布

云Girl

最新推荐文章于 2024-04-22 09:45:18 发布

阅读量156

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/diwang_718/article/details/104825029

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一般面试，问页面性能方面的题，就会被问到提升页面性的方法有哪些？

提升页面性能的方法

利用浏览器缓存（这里的话可能会被问到缓存的分类和缓存的原理，下面会讲到的）
资源压缩合并，减少HTTP请求
非核心代码异步加载（这里可能会被问到异步加载的方式和异步加载的区别，下面也会讲到的）
使用CDN
CDN是Content Delivery Network的简称，即“内容分发网络”的意思。一般我们所说的CDN加速，一般是指网站加速或者用户下载资源加速。
使用CDN服务的网站，只需将其域名的解析权交给CDN的负载均衡设备，CDN负载均衡设备将为用户选择一台合适的缓存服务器，用户通过访问这台缓存服务器来获取自己所需的数据。
由于缓存服务器部署在网络运营商的机房，而这些运营商又是用户的网络服务提供商，因此用户可以以最短的路径，最快的速度对网站进行访问。因此，CDN可以加速用户访问速度，减少源站中心负载压力。
预解析DNS

<!-- 当页面是HTTPS协议的时候，浏览器默认dns-prefetch是关闭的，所以我们要将他打开--->
<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel=”dns-prefetch” href=”//host_name_to_prefetch.com”>

DNS Prefetch 是一种DNS 预解析技术，当浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。
作用：用于优化网站页面的图片，如果图片很多的话，可以使用dns域解析，否则可以不用，因为有开发者指出禁用DNS 预读取能节省每月100亿的DNS查询。

异步加载方式和区别

动态创建script标签加载
通过window.onload()确保页面加载完，再将script标签插入到DOM中，代码如下：

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

defer方式
（1）defer是一个标签属性，也是一个布尔属性。但是该属性仅适用于外部脚本（只有在使用src属性时）。
（2）当页面已经完成加载之后，才会执行脚本。
（3）如果是多个脚本，该方法可以确保所有设置defer属性的脚本按顺序执行。
（4）兼容所有的浏览器

	<script type="text/javascript" src="js/index.js" defer></script>

async
(1) async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持。
(2) async属性规定一旦脚本可用，则会异步执行。
(3)async属性仅适用于外部脚本（只有在使用src属性时）
(4) 如果是多个脚本，该方法不能保证脚本按正常顺序执行。

  <script type="text/javascript" src="js/index.js" async="async"></script>

区别：
（1）defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序一次执行。
（2）async 是加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。

缓存的分类和缓存的原理

强缓存
给缓存的资源设置一个过期时间，客户端每次请求资源时都会看是否过期，过期了才会访问服务器。也就是说在请求资源的时候会读取header里面的属性，如果含有cahe-control:max-age = xxxxx (时间值),public 就是强缓存，每次用户正常打开页面，浏览器会判断缓存是否过期，如果没过期，则从缓存中读取数据。但是当用户刷新页面的时候，就算此时有缓存并且没有过期，也会去请求服务器，这就属于协商缓存了。要是想避免这种情况，用户刷新页面可以直接读取缓存数据，可cahe-control属性值加上immutable ，即：cahe-control:max-age = xxxxx ，public,immutable
注：cahe-control是代表缓存的有效期
协商缓存
每次请求资源的时候，都需要请求服务器，服务器查看是否过期或者资源是否有更新，如果没有就返回304状态码，直接将获取缓存里的数据。原理是这样子的，每次请求返回的response header 中的 etag 和 last-modified ，在下一次请求时将这两个参数带上，服务端把将这两个参数值进行对比，判断资源是否更改，如果更改就返回新资源，和新资源对应的esponse header的标识etag、last-modifie。如果没有返回304，客户端之前缓存的资源。
流程如下：
没过期的流程：
发请求 --》看资源是否过期–》过期—》请求服务器—》服务器对比资源是否真的过期–》没过期–》返回304状态码—》使用缓存了的资源
过期的流程：
发请求–》看资源是否过期–》过期–》请求服务器–》服务器对比资源是否真过期—》过期–》返回200状态码–》客户端更换新的资源，并记下cache-control的过期时间，etag 和last-modified等。