其他
1.有没有用webpack自己搭建过自动化脚手架?
就是利用webpack和webpack的各个插件,满足项目开发的搭建过程.
后面详细实验.
2.有没有做过私有化npm包?
暂时还没有
3.有没有用户前端模板引擎,怎么实现一个模板引擎?
字符串模板引擎
4.浏览器的缓存机制?
缓存位置
(1)Service Worker,浏览器的独立线程,必须是https协议,自由匹配缓存,还可以拦截请求
(2)Memory Cache,内存缓存,tab页关闭即不存在了
(3)Disk Cache,硬盘缓存,持久缓存
(4)Push Cache, 推送缓存,存在于会话级别
缓存过程
- 浏览器每次发起请求,都会查找缓存中浏览器的查询结果和缓存标识
-
浏览器每次都会将请求结果和缓存标识存入浏览器的缓存
image.png
强缓存
(1) Expires, last-modified. http/1.0产物,Expires是服务端的缓存过期时间,,在过期前都可以直接取浏览器缓存而不是请求服务器.
(2)Cache-Control,是http/1.1的标准,优先级高于Expires,可以设置max-age=300,或者no-cache等,当缓存时间内不会向服务器发送请求而是使用本地缓存资源.
协商缓存
当强制缓存失效后,浏览器携带缓存标识发起请求,由服务器根据缓存标识判断是否使用浏览器缓存.
(1)Last-Modified,If-Modified-Since,服务器响应头中返回最后修改时间Last-Modified,浏览器缓存Last-Modified; 当再次发起请求的时候,浏览器请求头中发送If-Modified-Since,这个值就是Last-Modified,然后由服务器对比修改时间,如没变化,返回304和空响应体,告诉浏览器使用本地缓存;如果变化了,返回200和新的资源.
(2)Etag, If-None-Match.Etag是一个服务端生成的资源文件的唯一标识,每次文件改变都会改变这个标识.每次响应头中携带Etag,浏览器将之缓存,下次请求时请求头中携带 If-None-Match( If-None-Match就是Etag),由服务器判断资源是否过期.过期和不过期的逻辑处理同上
Etag精度高于Last-modified
5.跨域处理? Access-Control-Allow-Origin设置为 * 和特定域名有何区别?
CORS中关于cookie的设置
(1)服务端设置Access-Control-Allow-Credentials: true | false // 是否允许携带Cookie
(2)浏览器请求设置withCredentials
6.预请求是什么?预请求的请求方式是什么?
预请求的请求方式是OPTIONS
预请求是浏览器的CORS跨域策略中,一个复杂请求的预检请求.询问服务器是否支持此次复杂请求
7.浏览器的兼容性
css兼容性
opacity: 0.5;
filter: alpha(opacity = 50); //IE6-IE8我们习惯使用filter滤镜属性来进行实现
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)。
交互兼容性
(1)事件绑定
addEventListener和attachEvent
removeEventListener和detachEvent
var helper = {}
//绑定事件
helper.on = function(target, type, handler) {
if(target.addEventListener) {
target.addEventListener(type, handler, false);
} else {
target.attachEvent("on" + type,
function(event) {
return handler.call(target, event);
}, false);
}
};
//取消事件监听
helper.remove = function(target, type, handler) {
if(target.removeEventListener) {
target.removeEventListener(type, handler);
} else {
target.detachEvent("on" + type,
function(event) {
return handler.call(target, event);
}, true);
}
};
(2)new Date()的传参,应该用'year/month/day',而不是'''year-month-day'
8. http协议的基本原理
9. dom获取位置信息API
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect