前端有用学问

2024年2月9日 178次阅读 来源: Fardwn

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及更早版本不支撑）

    原文作者：Fardwn
    原文地址: https://segmentfault.com/a/1190000018170541
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞