面试:提升页面性能优化的方法有哪些?

面试:提升页面性能优化的方法有哪些?

 

1、资源压缩合并,减少http请求

(html压缩, css压缩,js压缩,文件-公共库合并)

 

  • 合并图片(css sprites)、CSS和JS文件合并、CSS和JS文件压缩

  • 图片较多的页面也可以使用 lazyLoad 等技术进行优化。

  • 精灵图等

 

2. 非核心代码异步加载 --> 异步加载的方式 (defer/async ->src适用;把js代码封装在函数里面动态加载onload回掉) --> 异步加载的区别

 

  • defer:在HTML解析完之后才会执行。如果是多个,则按照加载的顺序依次执行。

  • async:在加载完之后立即执行。如果是多个,执行顺序和加载顺序无关。

 

3. 利用浏览器缓存 --> 缓存的分类(H5:localStorage; sessionStorage; Cookies) --> 缓存的原理(先查询缓存里有没有数据,有就直接用,没有再请求)

 

缓存分为:

  • 强缓存:不用请求服务器,直接使用本地的缓存

  • 协商缓存:浏览器发现本地有资源的副本,但是不太确定要不要使用,于是去问问服务器。

 

4. 使用CDN

Content Delivery Network或者Content Disrubute Network 内容分化网络

(最简单的CDN就是一个DNS服务器和几台缓存服务器组成)

面试:提升页面性能优化的方法有哪些?_第1张图片

浏览器第一次打开页面的时候,浏览器缓存是起不了作任何用的,使用CDN,效果就很明显。

 

 

5. DNS预解析

DNS 预解析会告诉浏览器未来可能从某个特定url获取资源,实际用到的时候尽快完全解析

也可以对指定的域名进行预解析

 

你可能感兴趣的:(面试:提升页面性能优化的方法有哪些?)