0520面试题拓展
F5和Ctrl+F5的区别
浏览器是一个比较复杂但是又比较重要的机制，我们在浏览一个页面发现有异常的情况下，通常考虑的就是是不是浏览器做了缓存，一般的做法就是按Ctrl+F5组合键重新请求一次这个页面
如果是按Ctrl+F5组合键刷新页面，那么浏览器会直接向目标URL发送请求，而不会使用浏览器缓存的数据
请求到服务端，也可能访问到的是缓存数据，，比如会在应用服务器的前端部署一个缓存服务器。所以，要保证用户能够看到最新的数据，必须通过http来控制
http缓存
http缓存分为强缓存和协商缓存
当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。http缓存一般针对GET请求，POST请求一般不会缓存，因为POST请求执行的任务都是对服务器产生副作用或者非幂等性的任务，既然要改变服务器资源，自然请求是要进入服务器进行处理的。缓存带来的好处是巨大的，减少了http请求，自然也就减少的服务端压力，并且增加了资源的访问速度，但是胡乱使用缓存，将会带来资源的不及时更新，甚至资源更新错位，灾难也是巨大的。
强缓存
如果命中缓存，直接从缓存中拿数据，请求不会经过服务器，返回的http状态码为200(from disk cache)
重要特征是如果在缓存数据库中找到想要的缓存,那么不会访问数据库
如果缓存失效,那么会重新访问数据库,然后将想要的内存重新存入缓存数据库
协商缓存
协商缓存与强制缓存的不同之处在于，协商缓存每次读取数据时都需要跟服务器通信，并且会增加缓存标识。在第一次请求服务器时，服务器会返回资源，并且返回一个资源的缓存标识，一起存到浏览器的缓存数据库。当第二次请求资源时，浏览器会首先将缓存标识发送给服务器，服务器拿到标识后判断标识是否匹配，如果不匹配，表示资源有更新，服务器会将新数据和新的缓存标识一起返回到浏览器；如果缓存标识匹配，表示资源没有更新，并且返回 304 状态码，浏览器就读取本地缓存服务器中的数据。
协商缓存的最大特点是要经过服务器验证的，下面我们来讲解协商缓存的验证流程。
nodejs fs同步/异步加载
nodejs 对文件的操作依赖于自带的文件系统模块(fs模块)
nodejs 文件系统中的方法均有异步和同步版本
fs.readFile() 异步加载
fs.readFileSync() 同步加载
fs.readFile("文件名",function(err,data){});
fs.readFileSync("文件名",function(err,data){});
同步方法会产生阻塞效果,效率上来讲推荐异步方法
cookie — nodejs
引用cookie 并 开启
var cook = require(‘cookie-parser’);
app.use(cook()); //使用cookie **
设置cookie
res.cookie(‘cookie名字’, ‘值’, { maxAge: 900000, httpOnly: true });
maxAge 过期时间
httpOnly 只能在请求头里设置cookie
获取 和 检测cookie
req.cookies.cookie的名字
页面弹窗蒙版
思路:其实就是设置一个定位在全屏的盒子,先设置隐藏,然后在触发时显示,然后点击特定按钮的时候再次隐藏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
width: 900px;
margin: 50px auto;
text-align: center;
}
#myModel {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(9, 9, 9, 0.63);
width: 100%;
height: 100%;
z-index: 1000;
}
.model-content {
width: 50%;
text-align: center;
background: #ffffff;
border-radius: 6px;
margin: 100px auto;
line-height: 30px;
z-index: 10001;
}
</style>
</head>
<body>
<div class="container">
<button onclick="showModel()">弹出蒙板</button>
<div id="myModel">
<div class="model-content">
<p>你好啊,我是内容~~</p>
<p>
<button id="closeModel" onclick="closeModel()">关闭</button>
</p>
</div>
</div>
</div>
<script>
function showModel() {
document.getElementById('myModel').style.display = 'block';
}
function closeModel() {
document.getElementById('myModel').style.display = 'none';
}
</script>
</body>
</html>
@import导入css样式
<style>
@import url(style.css)
</style>
H5标签新特性
语义化标签：article、footer、section、header、nav
视频和音频：video、audio
canvas画布：图形容器、必须使用js脚本来绘制图形
H5移除的标签
<basefont> 默认字体
<font> 字体标签
<center> 水平居中
<u> 下划线
上一篇： 常见Java笔面试题集（七）
下一篇： 80道最新java基础部分面试题（七）