1.输入URL显示网页，中间发生了什么DNS（完成域名到IP的映射）-->TCP传输（三次握手建立传输链路）-->发送请求（解析url，设置requestHeader,body)-->服务器返回请求文件（HTML文件）-->浏览器渲染页面（DOM树渲染，css树渲染，Render树渲染，布局布局，GPU完成像素渲染页面）2.网络协议（七层）物理层（以比特流为单位传输）-->数据链路层（封装帧，将数据从一个MAC传送到另一个MAC）-->网络层（路径选择，网络转发）-->传输层（建立链接、传输消息、TCP、UDP）-->会话层（发起会话）-->表现层（数据表示的转换）-->应用层（面向用户、DNS、FTP、E-mail、HTTP）3.页面重绘和回流重绘（repaint）：当页面元素的样式改变时，但不会引起structural布局发生变化，浏览器只是在UI层面进行重绘和更新，称为重绘。回流：页面的结构、布局或操作触发某些属性，导致浏览器重新计算和布局，称为回流。引起回流的操作：①页面初始渲染②页面大小改变③元素大小和位置改变④字体大小改变⑤删除和添加元素⑥激活伪类⑦触发某些属性（offsetWidth系列，clientWidth系列,scrollTop系列,getComputedStyle(),getBoundingClientRect(),scrollTo())回流一定会引起重绘，重绘不一定会引起回流，重绘开销小。开发中的做法：①尽量使用替换类来实现样式的改变。②尽量减少DOM操作，将多个DOM操作集中在一次修改上。4.点透问题描述：发生在z层的上下DOM元素。当点击上层A元素时，A元素隐藏，下层B元素也触发点击事件。原因：点击事件有300毫秒的延迟。解决方法：使用移动端的触摸事件。点击事件的过程：mousedown->mouseup->click触摸屏幕上的元素时：touchstart->mouseover->mousemove->mousedown->mouseup->click->touchend5、滑动穿透问题（移动端）https：//uedsky.com/2016-06/mo...说明：在移动端，当弹出一个固定浮层时，滚动浮层，下层也会跟着滚动。原因：未知解决方法：①禁用html和body元素的滚动，浮层消失时用js恢复滚动---overflow:hidden（整个文档失去滚动，弹出框也失去滚动）②记录当前滚动定位并让整个文档脱离文档流，将文档拉回记录的位置；当浮层消失时恢复之前的设置。body.modal-open{position:fixed;width:100%;}如果只是上面的css，滚动条的位置也会丢失，所以如果需要保持滚动条的位置，需要使用js保存滚动条位置并在关闭时恢复滚动位置JavaScript/**ModalHelperhelpers解决移动设备上的模态滚动问题https://github.com/twbs/boots...需要文档。scrollingElementpolyfillhttps://github.com/yangg/scro...*/varModalHelper=(function(bodyCls){varscrollTop;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在设置位置后丢失：固定,恢复它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,boolean值与0/1相互转换，string转boolean值（是否为空），string转number（直接数字转换，非number转NAN)，对象是否相等取决于是否引用同一个对象（对象为布尔值——是否为null）。Number()/Boolean()/toString()/+：一个是字符串，一个是调用toString()方法转换成字符串；两个数直接相加；两个字符串直接连接在一起。7.判断两个值是否相等==：相等，具有强制转换的特点。===：全等运算符，不强制转换，但是+0/-0的判断为真，NaN的判断===NaN为假Object.is(par1,par2)：准确判断，-0和+0是两个不同的值（ES6新方法）8.DOM中的高度每个DOM元素都会有五个高度属性：offsetHeight,clientHeight,scrollHeight,offsetTop,scrollTop。offsetHeight：水平滚动条的高度+padding+border+高度。clientHeight：高度+填充。scrollHeight：没有滚动条时=clientHeight，有滚动条时=包含滚动高度的整体高度offsetTop：当前元素距离最近的父元素的高度，不管是否出现滚动条。scrollTop：发生滚动时，页面滚动到的高度。9、文本显示省略号显示省略号的基本条件：元素定长。单行显示ellipsis:overflow:hidden;文本溢出：省略号；空白：nowrap；多行显示省略号：（目前只有webkit内核支持该属性---Chrome、Safari和手机内核）overflow:hidden;文本溢出：省略号；display:-webkit-box;-webkit-clamp:2;-webkit-box-orient:vertical;10,px,em,rem,浏览器默认字体浏览器默认字体为16px。chrom显示的最小字体是12px，Firefox支持显示更小的字体。px是一个物理像素，不自适应大小。em是一个相对大小，继承自父元素。rem是一个相对大小，继承自html根元素。(IE8及更早版本不支持)
