笔记一、HTTP状态码状态码的类别：类别原因描述 1xx Informational(信息性状态码) 接受的请求

一、HTTP状态码

状态码的类别：

类别	原因	描述
1xx	Informational(信息性状态码)	接受的请求正在处理
2xx	Success(成功状态码)	请求正常处理完毕
3xx	Redirection(重定向状态码)	需要进行附加操作一完成请求
4xx	Client Error (客户端错误状态码)	服务器无法处理请求
5xx	Server Error(服务器错误状态码)	服务器处理请求出错

二、懒加载

1. 懒加载的概念

懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。

如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。

2. 懒加载的特点

减少无用资源的加载：使用懒加载明显减少了服务器的压力和流量，同时也减小了浏览器的负担。
提升用户体验: 如果同时加载较多图片，可能需要等待的时间较长，这样影响了用户体验，而使用懒加载就能大大的提高用户体验。
防止加载过多图片而影响其他资源文件的加载 ：会影响网站应用的正常使用。

懒加载与预加载的区别

这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。
预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。

二、js本地存储方式：

1.js的本地缓存有几种分别是什么
   storage分为sessionstorage/localstorage
   cookie:存储有过期时间
设置local--localStorage.setitem(key,value)
全部清除local--localStorage.clear()
单个清除local--localStorage.removeitem(key)
一般用于做用户登陆功能--登陆存储用户登录后的用户信息和登陆token

seeion--存数据量大不会经常改变的数据，避免多次请求增加服务器压力

session 和 local 的区别就在于--
session 只存在于当前页面会话期 页面关闭销毁
local是存在本地上 所以会一直存在 除非自己清除

说一下几个很实用的 BOM 属性对象方法?

参考回答： 什么是Bom? Bom 是浏览器对象。有哪些常用的Bom 属性呢？

location 对象

location.href-- 返回或设置当前文档的URL
location.search -- 返回URL 中的查询字符串部分。例
// 如http://www.xxx.com/xxx.go?id=5&name=xxx 返回包括(?)后面的内容?id=5&name=xxx
location.hash -- 返回URL#后面的内容，如果没有#，返回空
location.host -- 返回URL 中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL 中的主域名部分，例如dreamdu.com
location.pathname -- 返回URL 的域名后的部分。例如http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL 中的端口部分。例如http://www.dreamdu.com:8080/xhtml/ 返回 8080
location.protocol -- 返回URL 中的协议部分。例如http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL，并且在history 对象的地址列表中移除这个
URL location.replace(url);
location.reload() -- 重载当前页面
复制代码

history 对象

history.go() -- 前进或后退指定的页面数history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页
复制代码

Navigator 对象

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

cookie 和session 的区别，localstorage 和sessionstorage 的区别

参考回答： Cookie、sessionStorage、localStorage共同点：都是保存在浏览器端，并且是同源的。

Cookie和session： Cookie 和session 都可用来存储用户信息，cookie 存放于客户端，session 存放于服务器端，因为cookie 存放于客户端有可能被窃取，所以cookie 一般用来存放不敏感的信息，比如用户设置的网站主题，敏感的信息用session 存储，比如用户的登陆信息，session 可以存放于文件，数据库，内存中都可以，cookie 可以服务器端响应的时候设置，也可以客户端通过JS 设置cookie 会在请求时在http 首部发送给客户端，cookie 一般在客户端有大小限制，一般为4K，很多浏览器都限制一个站点最多保存20 个cookie。

1、生命周期：

Cookie：可设置失效时间，否则默认为关闭浏览器后失效
Localstorage:除非被手动清除，否则永久保存
Sessionstorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除

前端优化

参考回答：

降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存manifest，离线数据缓存localStorage。
渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。

如何解决跨域问题

跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

解决跨域问题：

1、使用JSONP（json+padding）把数据内填充起来
2、CORS方式（跨域资源共享），在后端上配置可跨域
3、服务器代理，通过服务器的文件能访问第三方资源

谈谈你对重构的理解？

网络重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化