高频面试题之浏览器篇

最新推荐文章于 2024-01-19 17:51:39 发布

原创最新推荐文章于 2024-01-19 17:51:39 发布 · 579 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#面经

面经专栏收录该内容

16 篇文章

订阅专栏

文章目录

1 浏览器兼容问题
2 移动端click延迟300ms
3 viewport和响应式布局
4 浏览器缓存机制

1 浏览器兼容问题

略过了一些IE 6/7,选择了相对常见的问题进行总结。

1.1 CSS部分

1.1.1 消除默认样式

(1) 引入Normalize.css/reset.css

<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">

(2) 通配符 *{margin: 0; padding: 0;}

1.1.2 H5标签不识别

针对IE9以下浏览器对于h5新增标签不识别的问题，引入html5shiv.js

<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

1.1.3 IE属性过滤器

针对不同的IE浏览器，使用不同字符对特定版本浏览器进行样式控制。
_color，*color，color:red\9 分别针对IE6，IE6/7，IE8及以下浏览器

1.1.4 清除浮动

.clearfix:after{
  display:block;
  clear:both;
  content:'.';
  visibility:hidden;
  height:0;
}
.clearfix{//IE 6/7
  *zoom:1;
}

1.2 JS部分

1.2.1 键盘码keyCode

IE、FireFox、Chrome和Safari的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时才包含值，代表按键字符表示的ASCII码。此时的keyCode通常等于0或者按键键码。IE8及之前版本和Opera则是在keyCode中保存字符的ASCII码。

var EventUtil={
  getCharCode:function(event){
     if(typeof event.charCode=='number'){
       return event.charCode;
     }else{
       return event.keyCode; 
     }
  }
}

1.2.2 窗口大小

三者区别参考 https://www.cnblogs.com/kongxianghai/p/4192032.html
clientWidth：内容可视区宽度
offsetWidth：元素实际宽度(包括滚动条)
scrollWidth：实际内容宽度

var client_w=document.documentElement.clientWidth||document.body.clientWidth;
var client_h=document.documentElement.clientHeight||document.body.clientHeight;

同理可得 scrollWidth/scrollHeight offsetWidth/offsetHeight scrollTop
documentElement针对使用了DTD的文档，body针对没有使用DTD的文档

1.2.3 跨浏览器的事件处理程序

var EventUtil={
  addHandler:function(element,type,handler){
    if(element.addEventListener){
      element.addEventListener(type,handler,false)
    }else if(element.attachEvent){
      element.attachEvent('on'+type,handler)
    }else{
      element['on'+type]=handler
    }
  },
  removeHandler:function(element,type,handler){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false)
    }else if(element.detachEvent){
      element.detachEvent('on'+type,handler)
    }else{
      element['on'+type]=null
    }
  }
}

JS部分还有很多类似的例子，以上只是一小部分。有问题的地方欢迎指正。

2 移动端click延迟300ms

参考 https://thx.github.io/mobile/300ms-click-delay
ios为了分辨是缩放还是点击而出现的问题
解决办法：
(1) 粗暴型：禁用缩放
(2) 利用FastClick库：原理是检测到touchend事件后立刻触发click事件，并且把浏览器300ms后真正触发的事件给阻断掉。

3 viewport和响应式布局

参考 https://github.com/forthealllight/blog/issues/13
响应式布局常用解决方案
(1) 媒体查询 @media screen and (max-width:320px) 根据不同的设备采取不同的方式
(2) 百分比因为padding和margin都是针对父元素宽度而言所以对于按比例的情况可以使用height:0 padding:50%(2:1)
(3) rem 以根元素font-size为基准但是设置rem需要结合js代码或者webpack等方式耦合性不好

4 浏览器缓存机制

浏览器缓存策略通常分为两种：强缓存和协商缓存
强缓存
实现强缓存可以通过两种响应头实现：Expires和Cache-Control.强缓存表示在缓存期间不需要请求，state code为200。
HTTP/1.0：Expires：Wed，22 Oct 2018 08:41:00 GMT 表示资源会在该时间后过期，需要再次请求。并且Expires受制于本地时间，如果修改了本地时间，可能会造成缓存失效。
HTTP/1.1：Cache-control：max-age=30，优先级高于Expires，表示资源会在30秒后过期，需要再次请求。
协商缓存
如果缓存过期了，可以使用协商缓存来解决问题。协商缓存需要请求，缓存有效会返回304。并且需要客户端和服务端共同实现。有两种实现方式。
(1) Last-Modified和If-Modified-Since
前者表示本地文件最后修改日期，后者会将Last-Modified的值发送给服务器，询问服务器在该日期后的资源是否有更新，有更新则会将新的资源发送回来。
但是如果在本地打开了缓存文件，就会造成Last-Modified被修改。所以在HTTP/1.1中出现了ETag。
(2) ETag和If-None-Match
ETag优先级比Last-Modified高。使用方式和(1)相同。
选择合适的缓存策略
特殊地方使用特殊缓存策略
(1) 不需要缓存的地方使用Cache-control：no-store表示该资源不需要缓存
(2) 对于频繁变动的资源来说，可以使用Cache-control：no-cache配合ETag，缓存前确认有效性，但是每次都会发送请求询问资源是否更新。
(3) 对于代码文件来说，通常使用Cache-control：max-age=315360000，然后对文件进行指纹处理，一旦文件名变动就会立刻下载新的文件。