文章目录
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,然后对文件进行指纹处理,一旦文件名变动就会立刻下载新的文件。