摘要：开发中的实践尽量使用更换实现样式变化。原因事件存在毫秒延时。解决方法移动端使用事件。文本显示省略号显示省略号的基本条件元素定长。单行显示省略号多行显示省略号目前只有内核支持此属性和手机端内核以及浏览器默认字体浏览器默认字体是。
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
/**
ModalHelper helpers resolve the modal scrolling issue on mobile devices
https://github.com/twbs/boots...
requires document.scrollingElement polyfill https://github.com/yangg/scro...
*/
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及更早版本不支持）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101734.html
摘要：与面向对象编程六大方向助你突破前端生涯平台期前端掘金无论我们从事何种职业，在职业生涯的某个阶段，都或多或少会遇到所谓的平台期。目前为止，已经有个用户通过认证登观点年前端初学者的生存指南前端掘金逝者如斯夫，不舍昼夜。 你可能听说过函数式编程（Functional programming），甚至已经使用了一段时间。 但是，你能说清楚，它到底是什么吗？ 网上搜索一下，你会轻松找到好多答案...
摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。 前言 一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。 书签源码 书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...
摘要：我对知乎前端相关问题的十问十答张鑫旭张鑫旭大神对知乎上经典的个前端问题的回答。作者对如何避免常见的错误，难以发现的问题，以及性能问题和不好的实践给出了相应的建议。但并不是本身有问题，被标准定义的是极好的。 这一次，彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。 不论你是javascript新手还是老...
阅读 3793·2021-11-17 09:33
阅读 2010·2021-10-26 09:51
阅读 1525·2021-09-29 09:44
阅读 1677·2019-08-30 15:55
阅读 1446·2019-08-30 15:52
阅读 2324·2019-08-30 15:43
阅读 3431·2019-08-29 17:00
阅读 2301·2019-08-29 16:23
