脚本宝典收集整理的这篇文章主要介绍了

前端实用知识

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

1、输入URL到显示网页,中间发生了什么

DNS(完成域名到IP的映射)-->TCP传输(三次握手建立传输链接)-->发送请求(分析url,设置请求头、主体)-->服务器返回请求文件(HTML文件)-->浏览器渲染页面(DOM tree渲染,css tree渲染,Rander tree渲染,layout布局,GPU完成像素渲染页面)

2、网络协议(七层)

物理层(以比特流为单位传输)-->数据链路层(封装桢,把数据从一个MAC传到另一个MAC)-->网络层(路径的选择,网络的转发)-->传输层(建立链接,传送报文,TCP、UDP)-->会话层(发起会话)-->表示层(数据表示方式的转化)-->应用层(面向用户,DNS、FTP、E-mail、HTTP)

3、页面的重绘和回流

  • 重绘(repaint):页面元素样式发生变化,但不引起结构布局改变时,浏览器只在UI层面进行重绘和更新,称为重绘。
  • 回流(reflow):页面的结构、布局或者操作触发某些属性,引起的浏览器重新就算、布局,称为回流。
    引起回流的操作:①页面的初次渲染 ②页面尺寸的改变 ③元素的尺寸、位置发生改变 ④字体的大小改变 ⑤删除、添加元素 ⑥激活伪类 ⑦触发某些属性(offsetWidth系列、clientWidth系列、scrollTop系列、getComputedStyle()、getBoundingClientRect()、scrollTo())

回流一定引起重绘,重绘不一定引起回流,重绘开销较小。

开发中的实践:①尽量使用更换class实现样式变化。②尽量减少DOM操作,把多次DOM操作,集中一次修改。

4、点透问题

描述:发生在z层的上下两层DOM元素,点击上层A元素时,A元素隐藏,下层B元素也触发点击事件的现象。

原因:click事件存在300毫秒延时。

解决方法:移动端使用touch事件。

click事件发生的过程:mousedown->mouseup->click
触摸屏幕上元素时:touchstart->mouseover->mousemove->mousedown->mouseup->click->touchend

5、滑动穿透问题(移动端)
https://uedsky.com/2016-06/mo...

描述:在移动端,当弹出一个fixed浮层,滚动浮层,下层也会跟随滚动。

原因:尚未知

解决方法:
①禁止html,body元素滚动,浮层消失用js恢复滚动---overflow:hidden(整个文档失去滚动,弹出框也失去滚动)
②记录当前的滚动位置,让整个文档脱离文档流,把文档拉回记录的位置;浮层消失时恢复之前的设置。

body.modal-open {

position: fixed;
width: 100%;

}
如果只是上面的 css,滚动条的位置同样会丢失
所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置

JavaScript
/**

*/

var ModalHelper = (function(bodyCls) {
  var scrollTop;
  return {
    afterOpen: function() {
      scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add(bodyCls);
      document.body.style.top = -scrollTop + 'px';
    },
    beforeClose: function() {
      document.body.classList.remove(bodyCls);
      // scrollTop lost after set position:fixed, restore it back.
      document.scrollingElement.scrollTop = scrollTop;
    }
  };
})('modal-open');

说明:document.scrollingElement.scrollTop是获取和设置文档滚动高度的通用方法。
document.documentElement.scrollTop可获取PC端的滚动高度(移动端恒为0)
document.body.scrollTop可获取移动端的滚动高度(PC端恒为0)

6、类型转换

==:发生强制类型转换,其中undefined==null,NAN!=NAN,布尔值和0/1互转,字符串转布尔值(是否为空),字符串转数字(数字直接转,非数字转为NAN),对象是否相等取决于是否引用同一对象(对象转布尔值--是否为null)。

Number()/Boolean()/toString()/

+:一个为字符串,另一个调用toString()方法转成字符串;两个数字直接相加;两个字符串直接拼接。

7、判断两个值相等

==:相等,具有强制转化的特点。
===:全等运算符,不强制转换,但对+0/-0判断为true,NaN===NaN的判断为false
Object.is(par1,par2):可准确判断,-0和+0是两个不同的值(ES6新添方法)

8、DOM中的高度
每个DOM元素都会有五种高度属性:offsetHeight、clientHeight、scrollHeight、offsetTop、scrollTop。
offsetHeight:height+padding+border+水平滚动条的高度。
clientHeight:height+padding。
scrollHeight:无滚动条时=clientHeight,有滚动条时=包含滚去高度的整体高度

offsetTop:当前元素距离最近父元素的高度,和滚动条出现与否无关。
scrollTop:发生滚动时,页面滚去的高度。

9、文本显示省略号

显示省略号的基本条件:元素定长。

单行显示省略号:overflow:hidden; text-overflow: ellipsis; white-space: nowrap;

多行显示省略号:(目前只有webkit内核支持此属性---Chrome、Safari和手机端内核)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-clamp: 2;
-webkit-box-orient: vertical;

10、px、em、rem以及浏览器默认字体

浏览器默认字体是16px。chrom显示的最小字体是12px,Firefox支持显示更小的字体。

px是物理像素,不可自适应大小。

em是相对大小,继承自父元素。

rem是相对大小,继承自html根元素。(IE8及更早版本不支持)

总结

以上是脚本宝典为你收集整理的

前端实用知识

全部内容,希望文章能够帮你解决

前端实用知识

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过