题目:提升页面性能的方法有哪些?
- 资源压缩合并,减少HTTP请求
- 非核心代码异步加载-->异步加载方式 --> 异步加载区别
- 利用浏览器缓存 --> 缓存的分类 --> 缓存原理
- 使用CDN
- 预解析DNS
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
复制代码
异步加载方式
- 异步加载的方式 1) 动态脚本加载 2)defter 3) async
- 异步加载的区别 1)defer是HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执行 2)async是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关
浏览器缓存分类
强缓存
Expires Expires: Thu,21 Jan 2018 15:55:55 GMT Cache-Control Cache-Control:max-age = 3600
直白点的方式描述下:客户端第一次问服务器要某个资源时,服务器丢还给客户端所请求的这个资源同时,告诉客户端将这个资源保存在本地,并且在未来的某个时点之前如果还需要这个资源,直接从本地获取就行了,不用向服务器请求。这种方式缓存下来的资源称为强缓存。
协商缓存
直白点的方式描述下:客户端第一次问服务器要某个资源时,服务器丢还给客户端所请求的这个资源同时,将该资源的一些信息(文件摘要、或者最后修改时间)也返回给客户端,告诉客户端将这个资源缓存在本地。当客户端下一次需要这个资源时,将请求以及相关信息(文件摘要、或者最后修改时间)一并发送给服务器,由服务器来判断客户端缓存的资源是否需要更新:如不需要更新,就直接告诉客户端获取本地缓存资源;如需要更新,则将最新的资源连同相应的信息一并返回给客户端。
更多详情可参考:浏览器缓存
前端错误分类
- 即时运行错误:代码错误
- 资源加载错误
错误的捕获方式
即时运行错误的捕获方式
- try.catch
- window.error
资源加载错误
- object.onerror
- performance.getEntries()
- Error事件捕获
愿你成为终身学习者