web面试总结-其他

其他

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等,当缓存时间内不会向服务器发送请求而是使用本地缓存资源.

协商缓存

当强制缓存失效后,浏览器携带缓存标识发起请求,由服务器根据缓存标识判断是否使用浏览器缓存.

image.png

(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

最后编辑于：2019.04.01 14:18:51