当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)
一个盒子由四个部分组成:content
、padding
、border
、margin
- margin(外边距)- 清除边框外的区域,外边距是透明的。
- border(边框)- 围绕在内边距和内容外的边框。
- padding(内边距)- 清除内容周围的区域,内边距是透明的。
- content(内容)- 盒子的内容,显示文本和图像。
标准盒模型又称W3C标准盒模型,标准盒模型的 width 或 height 决定 content 的宽或高。
计算盒子宽:width(content) + padding + border
计算盒子高:heigth(content) + padding + border
样式设置:box-sizing: content-box;
怪异盒模型又称IE盒子模型,怪异盒子模型的 width 或 height 等于 content + padding + border 的宽或高。
计算盒子宽:width(content + padding + border)
计算盒子高:heigth(content + padding + border)
样式设置:box-sizing: border-box
- 行内元素有:a b span img input select strong
- 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
- 空元素:br hr img input link meta
- 行内元素不可以设置宽高,不独占一行
- 块级元素可以设置宽高,独占一行
- id选择器:权重100
- 类选择器:权重10
- 标签选择器
- 后代选择器
- 伪类选择器
- 伪元素选择器
- 属性选择器
- 属性选择器
- 子选择器
- 相邻同胞选择器
- 群组选择器
!important>内联>ID选择器>类选择器>标签选择器
!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器
!important > 行内样式(比重1000)> ID 选择器(比重100) > 类选择器(比重10) > 标签(比重1) > 通配符 > 继承 > 浏览器默认属性
<link href="reset.css" rel=”stylesheet“/>
浏览器会识别该文档为css文档,并行下载该文档,并且不会停止对当前文档的处理。这也是建议使用link,而不采用@import加载css的原因。
<script src="script.js">script>
当浏览器解析到该元素时,会暂停浏览器的渲染,知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
CSS hack
是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的。
CSS hack
由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。
/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */
+color:red; /* IE6、IE7 识别 */
*+color:red; /* IE6、IE7 识别 */
[color:red; /* IE6、IE7 识别 */
color:red9; /* IE6、IE7、IE8、IE9 识别 */
color:red; /* IE8、IE9 识别*/
color:red!important; /* IE6 不识别!important*/
/* CSS选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */
*+html #demo { color:red;} /* 仅IE7 识别 */
:root #demo { color:red9; } : /* 仅IE9识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
/* IE条件注释Hack */
PS:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
vw:表示视窗宽度的百分比,1vw等于视窗宽度的1%。
vh:表示视窗高度的百分比,1vh等于视窗高度的1%。
em:相对于元素的字体大小,如果没有设置字体大小,则相对于父元素的字体大小。1em等于当前元素的字体大小。
rem:相对于根元素(即元素)的字体大小,1rem等于根元素的字体大小。
px:像素单位,表示固定的像素值。
vmin:表示视口宽度和高度中较小的那个值,在哪个尺寸上取最小值就是多少。例如,如果视口宽度比高度小,则 vmin 的值将等于视口宽度。
vmax:表示视口宽度和高度中较大的那个值,在哪个尺寸上取最大值就是多少。例如,如果视口宽度比高度大,则 vmax 的值将等于视口宽度
这些单位在网页开发中用于控制元素的尺寸和布局。vw和vh基于视窗大小,可以实现响应式设计;em和rem相对于字体大小,可以适应不同的层级关系;px是一个固定的像素值,用于具体的精确尺寸控制。选择使用哪个单位取决于具体的需求和设计要求。
html5不基于SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照他们应该的方式来运行)
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
1、域名解析
2、发起TCP的三次握手
3、建立TCP连接后发起http请求
4、服务器端响应http请求,浏览器得到html码
5、浏览器解析html代码,并请求html代码中的资源
6、浏览器对页面进行渲染并呈现给客户
HTTPS在传输数据之前需要客户端(浏览器) 与服务端(网站之间进行一次握手,在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议,更是一件经过艺术家精心设计的艺术品,TLS/SSL中使用了非对称加密,对称加密以及HASH算法。
HTTPS并非绝对安全,掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击,但HTTPS仍是现行架构下最安全的解决方案,主要有以下几个好处:
HTTP 3.0 使用的底层传输协议 QUIC 是基于 UDP 的,因此需要在应用层实现可靠的数据传输。QUIC 协议使用了以下几种机制来保证数据的可靠性:
连接迁移:QUIC 允许在网络切换或 IP 变更时迁移连接,而不需要重新建立新的连接,从而避免了连接中断和数据丢失的问题。
可靠性流控制:QUIC 在每个流上都实现了可靠的流控制机制,可以根据发送方和接收方的负载情况动态调整数据发送速率,从而优化传输效率和可靠性。
数据重传:QUIC 中每个数据包都带有唯一标识符(Packet Number),接收方可以根据这个标识符进行数据包的确认和重传,以保证数据传输的可靠性。
拥塞控制:QUIC 采用了基于 TCP 的拥塞控制机制,可以根据网络拥塞程度自适应调整发送速率,以避免网络拥塞和丢包等问题。
在基于 UDP 的 HTTP/3 协议中,通过 QUIC 实现了多种机制来保证数据传输的可靠性,如连接迁移、可靠性流控制、数据重传、拥塞控制等,从而有效解决了 UDP 协议本身的可靠性问题,提高了传输效率和安全性。
浏览器从HTTP服务器获取html文档,到呈现页面给用户,会经过以下几个步骤:
浏览器的解析内容可以分为三个部分:
HTML/XHTML/SVG:解析这三种文件后,会生成DOM树(DOM Tree)
CSS:解析样式表,生成CSS规则树(CSS Rule Tree)
JavaScript:解析脚本,通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree,与用户进行交互。
以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同,具体在后文进行讨论。
解析文档完成后,浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上,并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree(渲染树)。此处需要注意:
Render Tree和DOM Tree的区别在于,类似Head或display:node之类的东西不会放在渲染树中;
将CSS Rule Tree匹配到DOM Tree需要解析CSS的选择器,为了提高该过程的性能,DOM树应该尽量小,CSS Selector应该尽量使用id和class,避免过度层叠。
解析position, overflow, z-index等等属性,计算每一个渲染树节点的位置和大小,此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制(repain)。
注意:
渲染树的节点,在Gecko中称为frame,而在webkit中称为renderer;
reflow和repaint是两个不同的概念,其区别会在后文进行探讨
加载顺序:使用link标签时,外部样式表会在页面加载时同时加载,并且不会阻塞页面的渲染。而@import是在页面加载完毕后再加载样式表,会阻塞页面的渲染。
兼容性:link标签是HTML标签,几乎所有的浏览器都支持。而@import是CSS提供的语法规则,较老的浏览器可能不支持或支持不完全。
引入个数:link标签可以同时引入多个外部样式表,而@import只能引入一个外部样式表。
优先级:由于link标签是在页面加载时同时加载的,所以其定义的样式具有较高的优先级,可以覆盖其他样式。而@import是在页面加载完毕后再加载的,其定义的样式优先级较低。
基于以上区别,一般推荐使用link标签来导入外部样式表,因为它具有更好的兼容性,加载效率高,且可以同时引入多个样式表。而@import在特定情况下(例如需要根据条件动态加载样式)可以使用。
不用图片,尽量用css3代替。 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用CSS达成。
使用矢量图SVG替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!
使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
按照HTTP协议设置合理的缓存。
使用字体图标webfont、CSS Sprites等。
用CSS或JavaScript实现预加载。
WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩,动态、静态图片,压缩比率优于GIF、JPEG、JPEG2000、PG等格式,非常适合用于网络等图片传输。
矢量图:图标字体,如 font-awesome,svg
位图:gif,jpg(jpeg),png
区别:
1、gif:是一种无损,8位图片格式。具有支持动画,索引透明,压缩等特性。适用于做色彩简单(色调少)的图片,如logo,各种小图标icons等。
2、JPEG格式:是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片,不适合做色彩简单(色调少)的图片,如logo,各种小图标icons等。
3、png:PNG可以细分为三种格式:PNG8,PNG24,PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div,少用大致4个css属性(圣杯布局中间div的padding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,一共6个;而双飞翼布局子div里用margin-left和margin-right共2个属性,6-2=4)
以下是双飞翼布局的一种实现方式:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局title>
<style>
.col {
float: left;
}
#main {
width: 100%;
height: 400px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px 0 190px;
}
#left {
width: 190px;
height: 400px;
margin-left: -100%;
background-color: #0000FF;
}
#right {
width: 190px;
height: 400px;
margin-left: -190px;
background-color: #FF0000;
}
style>
head>
<body>
<div id="container">
<div id="main" class="col">
<div id="main-wrap">
#main
div>
div>
<div id="left" class="col">
#left
div>
<div id="right" class="col">
#right
div>
div>
body>
html>
为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。
以下是圣杯布局的一种实现方式:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局title>
<style>
.container {
border: 1px solid yellow;
padding: 0 300px;
}
.container div {
float: left;
position: relative;
}
/* 中间自适应 */
.main {
width: 100%;
height: 300px;
background: #FFFF00;
}
/* 左 */
.left {
height: 300px;
width: 300px;
background: darkcyan;
margin-left: -100%;
left: -300px;
}
/* 右 */
.right {
height: 300px;
width: 300px;
background: #0000FF;
margin-left: -300px;
right: -300px;
}
style>
head>
<body>
<div class="container">
<div class="main">maindiv>
<div class="left">leftdiv>
<div class="right">rightdiv>
div>
body>
html>
-webkit\-transform: translate3d(0,0,0);
-moz\-transform: translate3d(0,0,0);
-ms\-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em,因为left会额外触发layout与paint,而webkit-transform只触发整个页面composite(这也是为什么推荐在CSS动画中使用webkit-transform: translateX(500px)的方案代替使用left: 500px);
如动画过程有闪烁(通常发生在动画开始的时候),可以尝试下面的Hack:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
box-shadows与gradients往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们.
尽可能的让动画元素不在文档流中,以减少重排
position: fixed;
position: absolute;
优化网页渲染:
DOM操作优化:
操作细节注意:
移动端优化:
数据方面
图片加载处理:
异步请求的优化:
解决办法:
body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
在CSS文件开头,加*{margin: 0; padding: 0;},把所有标签的margin和padding设置为0即可。
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
解决方案:万能公式在float的父元素上使用 .abc:after
{clear:both;content:‘.’;display:block;width: 0;height:
0;visibility:hidden;}
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略 }
IE:filter:alpha(opacity = 10);
FF:不透明度:0.6;
FF:-moz-opacity:0.10;
最好两个都写,并将透明度属性放在下面
#mrjin {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}
解决办法:为其父容器设置text-align:center;
9,被点击过后的超链接不再具有hover和active属性
解决办法:按lvha的顺序书写css样 “:link”: a标签还未被访问的状态;
“:visited”: a标签已被访问过的状态;
“:hover”: 鼠标悬停在a标签上的状态;
“:active”: a标签被鼠标按着时的状态;
解决办法:为期设置overflow:hidden;或者line-height:1px;
解决办法:设置{overflow: hidden;},或者设置line-height小于你设置的高度
解决办法:使用float为img布局,因为所有标签设置float之后都会变成块级元素,块级元素浮动时会紧挨在一起,没有边距;此外可以让HTML的img标签紧挨在一起,不要隔开,但是会影响HTML文档的结构,不太美观
解决办法:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto
!important; height:200px; overflow:visible;}。
解决办法:{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。
解决办法:父级元素设置position:relative。
前端安全性是一个重要的问题,以下是几种解决前端安全性问题的常用方法和使用案例:
示例:在用户注册页面中,对于用户名和密码进行长度、字符类型等方面的验证,确保用户输入的内容合法。使用正则表达式来检验输入值是否符合规定的格式。
示例:使用HTML编码或JavaScript函数进行转义处理,将用户输入的内容进行转义,确保不会被当作恶意脚本执行。
示例:在每个表单或请求中添加一个CSRF令牌(Token),并在服务器端进行验证,确保请求的合法性。当请求不含有效的令牌或令牌验证失败时,拒绝处理该请求。
示例:通过使用HTTPS协议来加密前端与后端之间的通信数据,防止敏感信息被窃听或篡改。
示例:将敏感信息进行加密处理后再存储到客户端,同时设置相关的安全策略和限制,减少敏感信息泄露的风险。
请注意,每个场景的安全措施可能因具体情况而异。为了确保前端的安全性,建议参考安全编码标准和最佳实践,并根据具体需求综合选择适合的安全措施。
全双工(full-duplex)通信自然可以实现多个标签页之间的通信
在页面A设置一个使用 setInterval 定时器不断刷新,检查 Cookies 的值是否发生变化,如果变化就进行刷新的操作。
localstorage是浏览器多个标签共用的存储空间,所以可以用来实现多标签之间的通信(ps:session是会话级的存储空间,每个标签页都是单独的)。
直接在window对象上添加监听即可:
window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))
普通的webworker直接使用new Worker()即可创建,这种webworker是当前页面专有的。然后还有种共享worker(SharedWorker),这种是可以多个标签页、iframe共同使用的。
SharedWorker可以被多个window共同使用,但必须保证这些标签页都是同源的(相同的协议,主机和端口号)
cookie是什么:cookie是指存储在用户本地终端上的数据,同时它是与具体的web页面或者站点相关的。cookie数据会自动在web浏览器和web服务器之间传输,也就是说HTTP请求发送时,会把保存在该请求域名下的所有cookie值发送给web服务器,因此服务器端脚本是可以读、写存储在客户端的cookie的操作。
cookie的有效期:cookie默认情况下的有效期是很短暂的,一旦用户关闭浏览器,cookie保存的数据就会丢失。如果想要延长cookie的有效期,可以通过设置HTTP头信息中的cache-control属性的max-age值,或者修改HTTP头信息中的expires属性的值来延长有效期。
cookie的作用域:它是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。默认情况下,cookie和创建它的web页面有关,并对该页面以及和该页面同目录或者子目录的其他页面可见。有时候,你可能希望让整个网站都能够使用cookie的值,而不管是哪个页面创建它。要满足这样的需求可以设置cookie的路径(设置cookie的path属性)。cookie的作用域默认由文档源限制。但是,有的大型网站想要子域之间能够互相共享cookie。
cookie的数目和大小的限制:每个web服务器(域名)保存的cookie数不能超过50个,每个cookie保存的数据不能超过4KB,如果超过了4KB(IE6大约只能存储2K),服务器会处理不了。
cookie的优点:能用于和服务器端通信;当cookie快要过期时,可以重新设置而不是删除。
cookie的缺点:它会随着http头信息一起发送,增加了网络流量(文档传输的负载);它只能储存少量的数据;它只能储存字符串;有潜在的安全问题。
另外,自从有了Web Storage API(Local and Session Storage),cookie就不被推荐用于存储数据了~
localStorage是什么:在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
localStorage的优点:
1)localStorage拓展了cookie的4K限制;
2)localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的;
3)localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
1)浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性;
2)目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换;
3)localStorage在浏览器的隐私模式下面是不可读取的;
4)localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡;
5)localStorage不能被爬虫抓取到。
sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对就会被清空。
position 属性值的含义:
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身
示例代码:
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100vh; /* 设置容器高度 */
}
.content {
/* 内容样式 */
}
示例代码:
.container {
position: relative; /* 设置容器为相对定位 */
height: 100vh; /* 设置容器高度 */
}
.content {
position: absolute; /* 设置内容为绝对定位 */
top: 50%; /* 相对于父元素顶部距离为50% */
left: 50%; /* 相对于父元素左边距离为50% */
transform: translate(-50%, -50%); /* 通过负的自身宽度和高度的一半来实现居中 */
}
示例代码:
.container {
display: table; /* 设置容器为表格布局 */
height: 100vh; /* 设置容器高度 */
}
.content {
display: table-cell; /* 设置内容为表格单元格 */
vertical-align: middle; /* 垂直居中 */
text-align: center; /* 水平居中 */
}
.ovh{
overflow:hidden;
}
先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意:一般情况下也不会使用这种方式,因为overflow:hidden有一个特点,离开了这个元素所在的区域以后会被隐藏(overflow:hidden会将超出的部分隐藏起来).
.clear{
clear:both;
}
在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.
a.内部标签:会将这个浮动盒子的父盒子高度重新撑开.
b.外部标签:会将这个浮动盒子的影响清除,但是不会撑开父盒子.
注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构的混乱.
.clearfix::after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
.clearfix::before,.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
TCP协议对应于传输层,而Http协议对应于应用层,从本质上讲,二者没有可比性,Http协议是建立在TCP协议之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求。Http会通过tcp建立起一个到服务器的连接通道,当本次请求需要的数据完毕后,Http会立即将TCP连接断开,这个过程是很短的。所以Http连接是一种短连接,是一种无状态的连接。
所谓的无状态,就是指浏览器每次向服务器发起请求的时候,不是通过一个连接,而是每次都建立一个新的连接。如果是一个连接的的话,服务器进程中就能保持住这个连接并并且在内存中记住一些信息状态。而每次请求结束后,连接就关闭,相关的内容就释放了,所以记不住任何状态,成为无状态连接。
1、TCP连接
手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接。TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别”的网络之上。
建立起一个TCP连接需要经过“三次握手”:
第一次握手:客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认;
第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;
第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手。
握 手过程中传送的包里不包含数据,三次握手完毕后,客户端与服务器才正式开始传送数据。理想状态下,TCP连接一旦建立,在通信双方中的任何一方主动关闭连 接之前,TCP 连接都将被一直保持下去。断开连接时服务器和客户端均可以主动发起断开TCP连接的请求,断开过程需要经过“四次握手”(过程就不细写 了,就是服务器和客户端交互,最终确定断开)
2、HTTP连接
HTTP协议即超文本传送协议(Hypertext Transfer Protocol ),是Web联网的基础,也是手机联网常用的协议之一,HTTP协议是建立在TCP协议之上的一种应用。
HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应,在请求结束后,会主动释放连接。从建立连接到关闭连接的过程称为“一次连接”。
1)在HTTP 1.0中,客户端的每次请求都要求建立一次单独的连接,在处理完本次请求后,就自动释放连接。
2)在HTTP 1.1中则可以在一次连接中处理多个请求,并且多个请求可以重叠进行,不需要等待一个请求结束后再发送下一个请求。
由 于HTTP在每次请求结束后都会主动释放连接,因此HTTP连接是一种“短连接”,要保持客户端程序的在线状态,需要不断地向服务器发起连接请求。通常的 做法是即时不需要获得任何数据,客户端也保持每隔一段固定的时间向服务器发送一次“保持连接”的请求,服务器在收到该请求后对客户端进行回复,表明知道客 户端“在线”。若服务器长时间无法收到客户端的请求,则认为客户端“下线”,若客户端长时间无法收到服务器的回复,则认为网络已经断开。
一、HTTP和HTTPS的基本概念
HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。
HTTPS:是以安全为目标的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。
HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一种就是确认网站的真实性。
二、HTTP与HTTPS有什么区别?HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全,为了保证这些隐私数据能加密传输,于是网景公司设计了SSL(Secure
Sockets Layer)协议用于对HTTP协议传输的数据进行加密,从而就诞生了HTTPS。简单来说,HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全。
HTTPS和HTTP的区别主要如下:
1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。
HTML、XHTML 和 XML 是三种不同的标记语言,它们之间的区别如下:
用途:HTML(超文本标记语言)主要用于创建网页和定义其结构和内容。它包含了一些预定义的标签和属性,用来表示文本、图像、链接等等。XHTML(可扩展超文本标记语言)是对HTML进行了严格化和XML化的重新定义,强调在编写页面时应遵循较为严格的规范和语法。XML(可扩展标记语言)则是一种通用的标记语言,用于存储和传输结构化的数据,没有预定义的标签,需要根据具体需求自定义标签。
语法要求:HTML相对较宽松,允许一些灵活性和不规范的写法,比如忽略一些闭合标签、大小写混合的元素名等。而XHTML对语法要求更严格,需要使用正确的XML语法,所有标签必须被正确地闭合,属性值必须使用引号括起来,并且元素名必须使用小写字母。XML也对语法要求很严格,要求严格的标签闭合和正确的嵌套关系。
结构关系:HTML和XHTML都是基于树形结构的标记语言,使用标签对表示各种元素以构建层次化的页面结构。XML也是树形结构,但不仅限于用于网页,可以用来表示任意结构化数据。
预定义标签:HTML和XHTML都具有一些预定义的标签和属性,比如 严谨性和可扩展性:XHTML和XML相对于HTML更严格和规范,强调代码的正确性和质量。XHTML在HTML的基础上进行了严格化和XML化的改进,使得其更为严谨和可扩展。XML则是一种通用的标记语言,非常灵活和可扩展,适用于各种领域和应用。 总体来说,HTML主要用于创建网页和定义其结构和内容,XHTML是对HTML进行了重新定义和严格化,而XML则是一种通用的标记语言,用于存储和传输结构化数据,没有预定义的标签。 DNS缓存:短时间内多次访问某个网站,在限定时间内,不用多次访问DNS服务器。 CDN缓存:内容分发网络(人们可以在就近的代售点取火车票了,不用非得到火车站去排队) 浏览器缓存:浏览器在用户磁盘上,对最新请求过的文档进行了存储。 服务器缓存:将需要频繁访问的Web页面和对象保存在离用户更近的系统中,当再次访问这些对象的时候加快了速度。 1.文件合并(目的是减少http请求):使用css sprites合并图片,一个网站经常使用小图标和小图片进行美化,但是很遗憾这些小图片占用了大量的HTTP请求,因此可以采用sprites的方式把所有的图片合并成一张图片 ,可以通过相关工具在线合并,也可以在ps中合并。 2.使用CDN(内容分发网络)加速,降低通信距离。 3.缓存的使用,添加Expire/Cache-Control头。 4.启用Gzip压缩文件。 5.将css放在页面最上面。 6.将script放在页面最下面。 7.避免在css中使用表达式。 8.将css, js都放在外部文件中。 9.减少DNS查询。 10.文件压缩:最小化css, js,减小文件体积。 11.避免重定向。 12.移除重复脚本。 13.配置实体标签ETag。 14.使用AJAX缓存,让网站内容分批加载,局部更新。 网页标准和标准制定机构都是为了能让web发展的更健康,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种bug、安全问题,最终提高网站易用性。 data-为H5新增的为前端开发者提供自定义的属性, 需要注意的是:data-之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。 在 Chrome 浏览器中,默认情况下是不允许显示小于 12px 的文字的,这是为了保证最佳的可读性和用户体验。不过,您可以通过一些 CSS 技巧来实现在 Chrome 浏览器中显示小于 12px 的文字,例如: 请注意,尽管可以使用上述技巧来在 Chrome 浏览器中强制显示小于 12px 的文字,但这可能会影响可读性和用户体验。建议仔细考虑字体大小和排版,以确保最佳的阅读体验,并在必要时改变设计或选择更大的字体大小。 1、什么是reflow? 首先sass和less都是css的预编译处理语言, less是基于JavaScript的在客户端处理 所以安装的时候用npm 两者的优缺点 (1) 用HTML标签设置HTTP头信息 说明:HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面何时将过期。HTTP1.1规范中新定义的头信息Cache-Control可以通知浏览器不缓存任何页面。当点击后退按钮时,浏览器重新访问服务器已获取页面。如下是使用Cache-Control的基本方法: no-cache:强制缓存从服务器上获取新的页面 no-store: 在任何环境下缓存不保存任何页面 HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache,同样可以包含在头信息中。 (2) 在需要打开的url后面增加一个随机的参数: 若设置:width=device-width iPhone 横屏有 bug。 Virtual DOM的概念有很多解释,分别是:一个对象,两个前提,三个步骤。 伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。 伪类其实就是基于普通DOM元素而产生的不同状态,他是DOM元素的某一特征。 http请求中的8种请求方法 1、GET方法 发送一个请求来取得服务器上的某一资源 向URL指定的资源提交数据或附加新的数据 跟POST方法很像,也是想服务器提交数据。但是,它们之间有不同。PUT指定了资源在服务器上的位置,而POST没有 只请求页面的首部 删除服务器上的某资源 它用于获取当前URL所支持的方法。如果请求成功,会有一个Allow的头包含类似“GET,POST”这样的信息 TRACE方法被用于激发一个远程的,应用层的请求消息回路 把请求连接转换到透明的TCP/IP通道 在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件 原理:HTML5的离线存储是基于一个新建的 如何使用: 在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。 离线的情况下,浏览器就直接使用离线存储的资源。 标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离 cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密) cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递 sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存 存储大小: 有期时间: CSS选择符:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=“external”])、伪类选择器(a:hover, li:nth-child) 可继承的属性:font-size, font-family, color 不可继承的样式:border, padding, margin, width, height 优先级(就近原则):!important > [ id > class > tag ] !important声明的样式优先级最高,如果冲突再进行计算。 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。 首先,需要把元素的宽度、高度设为0。然后设置边框样式。 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断: 如果都找不到,则为 initial containing block。 补充: 当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。 “display: none”、"visibility: hidden"和"opacity: 0"都是用于隐藏元素的CSS属性,它们有不同的行为和效果: display: none: visibility: hidden: opacity: 0: 总结: 类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。 BFC规定了内部的Block Box如何布局。 满足下列条件之一就可触发BFC 浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。 清除浮动的方式: 在重合元素外包裹一层容器,并触发该容器生成一个BFC。 是的,媒体查询在移动端布局中非常常见和重要。媒体查询是一种CSS技术,用于根据设备的特性(如屏幕宽度、屏幕方向、分辨率等)来应用不同的样式规则。通过使用媒体查询,可以根据不同设备的屏幕大小和特征,为移动端提供更好的用户体验和适应性。 以下是一个示例,展示了在不同屏幕尺寸下应用不同的样式: 在上述示例中,@media 是媒体查询的关键词,括号内的条件 (max-width: 600px) 表示屏幕宽度小于等于 600px 时应用该样式规则;(min-width: 601px) 则表示屏幕宽度大于 600px 时应用另一套样式规则。 媒体查询是响应式网页设计的重要组成部分,它可以根据不同设备的特性灵活地适应不同屏幕尺寸和设备类 CSS选择器的解析是从右向左解析的。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。 使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。 何时使用margin: 何时使用padding: 兼容性的问题:在IE5 IE6中,为float的盒子指定margin时,左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display:inline解决 当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。 视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。 :before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after -webkit-font-smoothing在window系统下没有起作用,但是在IOS设备上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。 多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。 行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。 外层div使用position:relative;高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0 页面加载自上而下 当然是先加载样式。 将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的 background-image,background- repeat,background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;CSS Sprites能减少图片的字节。 原理是超出第二行就增加三个点点点,后面的内容依然输出页面,只是超出隐藏了; 所以需要注意如果在有的情况下第二行显示…了但是后面依旧接有内容,就检查你的line-height是不是更改小了. get请求参数的大小存在限制,而post请求的参数大小是无限制的。 注意 get请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。、
等,用于表示特定的内容和功能。而XML没有预定义标签,需要根据具体需求自定义标签。
31. 刷新页面,js请求一般会有哪些地方有缓存处理
32.如何对网站的文件和资源进行优化
33.你对网页标准和W3C重要性的理解
34.data-属性的作用
这些属性集可以通过对象的 dataset
属性获取,
不支持该属性的浏览器可以通过 getAttribute
方法获取 :
即:当没有合适的属性和元素时,自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。35.如何让Chrome浏览器显示小于12px的文字
.my-text {
transform: scale(0.8);
}
.my-text {
font-size: 10px;
transform: scale(0.8);
zoom: 0.8;
}
36.哪些操作会引起页面回流(Reflow)
reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。
因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。
以下操作会引起回流:
① 改变窗口大小
② font-size大小改变
③ 增加或者移除样式表
④ 内容变化(input中输入文字会导致)
⑤ 激活CSS伪类(:hover)
⑥ 操作class属性,新增或者减少
⑦ js操作dom
⑧ offset相关属性计算
⑨ 设置style的值
…
reflow与repaint是减缓js的几大主要原因,尤其是reflow更是性能杀手,所以我们应该想法避免。37.CSS预处理器的比较less sass
他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等
加快了css开发效率,
当然这两者都可以配合gulp和grunt等前端构建工具使用
sass是基于ruby所以在服务器处理
38.如何实现页面每次打开时清除本页缓存
<meta http-equiv="Pragma" content="no-cache">
header("Cache-Control: no-cache, must-revalidate")
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
增加参数前:url=test/test.jsp
增加参数后:url=test/test.jsp?ranparam=random()39.meta 标签中的 viewport 相关属性:
若设置:initial-scale=1 页面的初始缩放为1,Windows Phone IE 横屏产生 BUG。
若设置:width=device-width,initial-scale=1 兼容 iPhone and Safari of iPad and IE of Windows Phone 横屏 BUG。
若设置:initial-scale=0.1 @media 下的 css 将失效。40 .什么是Virtual DOM,为何要用Virtual DOM
得益于V8引擎的出现,让JavaScript可以高效地运行,在性能上有了极大的提高。
直接操作DOM的低效和JavaScript的高效相对比,为Virtual DOM的产生提供了大前提。
一个DOM节点包含了很多的内容,但是一个抽象出一个DOM节点却只需要三部分:节点类型,节点属性、子节点。所以围绕这三个部分,我们可以使用JavaScript简单地实现一棵DOM树,然后给节点实现渲染方法,就可以实现虚拟节点到真是DOM的转化。
比较两棵DOM树的差异是Virtual DOM算法最核心的部分,这也是我们常说的的 Virtual DOM的diff算法。在比较的过程中,我们只比较同级的节点,非同级的节点不在我们的比较范围内,这样既可以满足我们的需求,又可以简化算法实现。
比较“树”的差异,首先是要对树进行遍历,常用的有两种遍历算法,分别是深度优先遍历和广度优先遍历,一般的diff算法中都采用的是深度优先遍历。对新旧两棵树进行一次深度优先的遍历,这样每个节点都会有一个唯一的标记。在遍历的时候,每遍历到一个节点就把该节点和新的树的同一个位置的节点进行对比,如果有差异的话就记录到一个对象里面。
在第二步得到整棵树的差异之后,就可以根据这些差异的不同类型,对DOM进行针对性的更新。与四种差异类型相对应的,是更新视图时具体的更新方法,分别是:replaceChild(),appendChild()/removeChild(),setAttribute()/removeAttribute(),textContent41.伪元素和伪类的区别
伪元素能够创建在DOM树中不存在的抽象对象,而且这些抽象对象是能够访问到的。42.http的几种请求方法和区别
2、POST方法
3、PUT方法
4、HEAD方法
5、DELETE方法
6、OPTIONS方法
7、TRACE方法
8、CONNECT方法43.前端需要注意哪些SEO
44.的title和alt有什么区别
45.从浏览器地址栏输入url到显示页面的步骤
46.语义化的理解
47.HTML5的离线储存怎么使用,工作原理能不能解释一下?
.appcache文件
的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示
48.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
49.iframe有那些缺点?
iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题50.WEB标准以及W3C标准是什么?
51.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
52.HTML全局属性(global attribute)有哪些
53.Canvas和SVG有什么区别?
54.如何在页面上实现一个圆形的可点击区域?
55.网页验证码是干嘛的,是为了解决什么安全问题
56.请描述一下 cookies,sessionStorage 和 localStorage 的区别?
57. CSS选择器有哪些?哪些属性可以继承?
!important 比内联优先级高58.CSS优先级算法如何计算?
如果优先级相同,则选择最后出现的样式。
继承得到的样式的优先级最低。59.请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?
试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。60.用纯CSS创建一个三角形的原理是什么?
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
61.为什么要初始化CSS样式
62.absolute的containing block计算方式跟正常流有什么不同?
63.CSS里的visibility属性有个collapse属性值?在不同浏览器下以后什么区别?
64.display:none与visibility:hidden和opacity: 0的区别?
65.position跟display、overflow、float这些特性相互叠加后会怎么样?
66.对BFC规范(块级格式化上下文:block formatting context)的理解?
定位方案:
67.为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?
浮动带来的问题:
68.上下margin重合的问题
<div class="aside">div>
<div class="text">
<div class="main">div>
div>
.aside {
margin-bottom: 100px;
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 100px;
height: 200px;
background: #fcc;
}
.text{
/*盒子main的外面包一个div,通过改变此div的属性使两个盒子分属于两个不同的BFC,以此来阻止margin重叠*/
overflow: hidden; //此时已经触发了BFC属性。
}
69.移动端的布局用过媒体查询吗?
/* 适用于小于等于 600px 宽度的屏幕 */
@media (max-width: 600px) {
/* 移动端样式规则 */
body {
font-size: 14px;
}
}
/* 适用于大于 600px 宽度的屏幕 */
@media (min-width: 601px) {
/* 非移动端样式规则 */
body {
font-size: 16px;
}
}
70.CSS优化、提高性能的方法有哪些?
71.浏览器是怎样解析CSS选择器的?
而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。72.在网页中的应该使用奇数还是偶数的字体?为什么呢?
73.margin和padding分别适合什么场景使用?
74.元素竖向的百分比设定是相对于容器的高度吗?
75.全屏滚动的原理是什么?用到了CSS的哪些属性?
overflow:hidden;
transition:all 1000ms ease;
76.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no'/>
77.视差滚动效果?
优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器
通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。
优点:能兼容到各个版本的,效果可控性好
缺点:开发起来对制作者要求高
例如:parallax-scrolling,兼容性十分好78.::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用
79.让页面里的字体变清晰,变细用CSS怎么做?
80.position:fixed;在android下无效怎么处理?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
81.如果需要手动写动画,你认为最小时间间隔是多久,为什么?
82.li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
解决方法:
83.display:inline-block 什么时候会显示间隙?
84.有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度
85.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
86.style标签写在body后与body前有什么区别?
写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
88.阐述一下CSS Sprites(css精灵图)
89. 一行或多行文本超出隐藏
overflow:hidden; //超出文本隐藏
white-space:nowrap; //溢出不换行
text-overflow:ellipsis; //溢出省略号显示
overflow:hidden; //超出文本隐藏
text-overflow:ellipsis; //溢出省略号显示
display:-webkit-box; //将对象作为弹性伸缩盒子
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式-从上到下垂直排列
-webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,数组代表显示的行数,如2,3,4....
90.get和post区别
实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器,浏览器或web服务器限制了url的长度。为了明确这个概念,我们必须再次强调下面几点:
post不同,post做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。因此get请求适合于请求缓存。