前端实用知识

2024年5月28日 117次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞