一、前端必备
1、web前端性能优化
1.1 性能评级工具
PageSpeed
是由谷歌官方开发的一款可以分析页面载入的各个方面,包括资源、网络、DOM以及时间线等等信息的在线检测工具。(
YSlow
是Yahoo
发布的一款基于FireFox(火狐浏览器)
的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则进行优化。它可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow
会列出具体的修改意
1.2 前端性能优化
1、从DOM结构和标签上来优化
- 使用语义化的标签,代码清晰简洁;
- 减少Dom节点,增加渲染速度;
- 使用W3C标准书写闭合小写的标签;
- 给图片和table指定宽高,避免缩放;
- 防止src和href值为空,当为空时,浏览器会把当前页面当做属性值重新加载
- css在头部位置,js在body底部位置
- 尽量合并js和css,对js和css进行压缩,可以缩短文件传输时间;
- 避免在html标签中写style属性
2、从CSS样式上来优化
- 使用link加载样式而不是@import
- 避免使用css表达式;
- 删除重复的css,css简化;
- 使用css 缩写 如#fff,减少代码量;
- 减少css查询层级,如.header .log 要好于.header .top .log;
- 减少css查询范围,如header>div获取直系子元素要好于heade div;
3、从js上来优化
- js尽量少用全局变量;
- 多个js变量声明合并;
- 删除重复的js
- 使用setTimeout来避免页面失去响应
- 图片懒加载(data-src)
4、网络优化
- 减少 HTTP 请求数量
- 利用浏览器缓存,公用依赖包(如vue、Jquery、ui组件等)单独打包/单文件在一起,避免重复请求
- 减小cookie使用,尽量用localStorage代替
- CDN托管静态文件
2、浏览器内核
主要分成两部分:
渲染引擎
和JS引擎
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页 的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的 效果也不相同。
JS引擎则:解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引
3、常见的浏览器内核有哪些
- Trident内核(IE内核):用它的浏览器有:ie、360浏览器
- Webkit内核(谷歌内核):用它的浏览器有:谷歌浏览器、枫树浏览器、太阳花
- Gecko内核: 用它的浏览器有:Netscape6、、火狐浏览器、K-Meleon浏览
- Presto内核:用它的浏览器有:Opera浏览器
4、cookies、sessionStorage、localStorage 和 indexDB 的区别
cookie是网站为了标示用户身份而储存在用户本地的数据
IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。
1、是否在http请求只能够携带
- cookie数据始终在同源的http请求中携带,跨域需要设置withCredentials = true
- sessionStorage和localStorage和indexDB不会自动把数据发给服务器,仅在本地保存
2、存储大小
- cookie数据大小不能超过4k;
- sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更 大,因不同浏览器大小不同;
- indexDB允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的
3、 有效时间
- cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
- localStorage 硬盘存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage 存在内存中,数据在当前浏览器窗口关闭后自动删除
- indexDB除非被清理。否则一直存在
5、从输入URL到浏览器显示页面过程中都发生了什么
1、浏览器根据请求的URL交给DNS域名解析,找到真实IP。
2、找到真实的IP地址后,浏览器根据 IP 地址向服务器发起 TCP 连接,与浏览器建立 TCP 三次握手。
简单的讲,通信连接的建立需要经历以下三个过程:
(1)客户端向服务器发送一个建立连接的请求(您好,我想连接您);
(2)服务器接到请求后发送同意连接的信号(好的,可以连接);
(3)客户端接到服务器端同意连接的信号后,再次向服务器发送了确认信号(好的,确认连接)。
自此,客户端与服务器两者建立了连接。
(三次握手的过程采用 TCP 协议,其可以保证信息传输的可靠性,三次握手过程中,若一方收不到确认信号,协议会要求重新发送信号)
3、浏览器开始发送HTTP请求
4、服务器处理请求并返回HTTP报文,其实就是服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;服务器将得到的 HTML 文件发送给浏览器;
5、浏览器解析渲染页面
6、连接结束(TCP四次挥手)
(1)主机向服务器发送一个断开连接的请求(不早了,我该走了);
(2)服务器接到请求后发送确认收到请求的信号,进入CLOSE-WAIT(等待关闭)状态(知道了);
(3)数据传输完毕后,服务器向主机发送断开通知,服务器进入LAST-ACK(最后确定)(我也该走了);
(4)主机接到断开通知后断开连接并反馈一个确认信号(嗯,好的),服务器收到确认信号后断开连接,立刻进入CLOSE(关闭)状态
6、对AMD、CMD的理解
相同点:
AMD(异步模块定义)
、CMD(通用模块定义)
、CommonJS()
这些东西都是js规范,前两个是为了实现浏览器端模块化开发。
区别 :
1、对于依赖的模块,AMD是提前执行,CMD是延迟执行。
2、AMD推崇依赖前置,CMD推崇依赖就近。
3、AMD的API默认的是一个当多个用,CMD比较严格,指责单一。
7、浏览器缓存
关于缓存的两个概念
强缓存:
用户发送的请求,直接从客户端缓存中获取,不发送请求到服务器,不与服务器发生交互行为。
协商缓存:
用户发送请求,发送到服务器之后,由服务器判定是否从缓存中获取资源。
两者共同点:
客户端获取的数据最后都是熊客户端的缓存中取得。
两者区别:
从名字就可以看出,强缓存不与服务器发生交互,而协商缓存则需要需服务器发生交互。
8、浏览器是如何渲染网页的
1.根据html文件构建DOM树和CSSOM[层叠样式表模型CSSOM(CSS Object Model)]树。构建DOM树期间,如果遇到JS,阻塞DOM树及CSSOM树的构建,优先加载JS文件,加载完毕,再继续构建DOM树及CSSOM树。
2.构建渲染树(Render Tree)。
3.页面的重绘(repaint)与重排(reflow,也有称回流)。页面渲染完成后,若JS操作了DOM节点,根据JS对DOM操作动作的大小,浏览器对页面进行重绘或是重排。
9、重绘(Repaint)和回流(Reflow)
重绘和回流会在我们设置节点样式时频繁出现,同时也会很大程度上影响性能。
- 重绘:当节点需要更改外观而不会影响布局的,比如改变 color 就叫称为重绘
- 回流:布局或者几何属性需要改变就称为回流。
回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变父节点里的子
节点很可能会导致父节点的一系列回流
以下几个动作可能会导致性能问题:
- 改变 window 大小
- 改变字体
- 添加或删除样式
- 文字改变
- 定位或者浮
10、首屏加载优化方案
- 1、 如果使用了一些UI库,采用按需加载
- 2、页面使用骨架屏
- 3、如果首屏为登录页,可以做成多入口
- 4、图片懒加载减少占用网络带宽
- 5、使用CDN加速
- 6、 vue-router 使用懒加载
二、html
1、html5有哪些新特性、移除了那些元素?
新增功能:
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加
-
新增选择器 document.querySelector、document.querySelectorAll
-
拖拽释放(Drag and drop) API
-
媒体播放的 video 和 audio
-
本地存储 localStorage 和 sessionStorage
-
离线应用 manifest
-
桌面通知 Notifications
-
语意化标签 article、footer、header、nav、section
-
增强表单控件 calendar、date、time、email、url、search
-
地理位置 Geolocation
-
多任务 webworker
-
全双工通信协议 websocket
-
历史管理 history
-
跨域资源共享(CORS) Access-Control-Allow-Origin
-
页面可见性改变事件 visibilitychange
-
跨窗口通信 PostMessage
-
Form Data 对象
-
绘画 canva
移除的元素: -
纯表现的元素:basefont、big、center、font、 s、strike、tt、u
-
对可用性产生负面影响的元素:frame、frameset、noframes
2、viewport
<meta name="viewport" content="width=device-width,initial-
scale=1.0,minimum- scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!--width 设置viewport宽度,为一个正整数,或字符串‘device-width’
device-width 设备宽度
height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置 initial-scale 默认缩放比例(初始缩放比例),为一个数字,可以带小数 minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
user-scalable 是否允许手动缩放 -->
延伸提问:怎样处理 移动端 1px 被 渲染成 2px问题?
- 局部处理
meta标签中的 viewport属性 ,initial-scale 设置为 1
rem按照设计稿标准走,外加利用transfrome 的scale(0.5) 缩小一倍即可;
- 全局处理
mate标签中的 viewport属性 ,initial-scale 设置为 0.5
rem 按照设计稿标准走即可
3、html文档解析
大致过程:
解析html文件 -> 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
1.dom树的生成;
2.解析css构建cssom树(CSS对象模型);
3.根据dom树和cssom树来构建render树(渲染树);
4.根据渲染树来布局,以计算每个节点的几何信息(位置、大小等)。
5.将各个节点绘制到屏幕上。
三、css
1. css选择器优先级
!important > inline > id > class > tag > * > inherit > default
!important
:大于其他- 行内:1000
id
选择器:100- 类,伪类和属性选择器,如
.content:10
- 类型选择器和伪元素选择器:1
- 通配符、子选择器、相邻选择器:0
同级别的后写的优先级高。
相同class样式,css中后写的优先级高,和html中的class名字前后无关
2. 水平垂直居中
-
文本水平居中:
text-algin: center
-
文本垂直居中:
line-height
等于容器height
;display: flex; algin-items: center;
-
div
水平居中:margin: 0 auto;
- 已知父元素宽度:
margin-left: width / 2; transform: tranlateX(-50%)
- 未知父元素宽度:
position: absolute: top: 50%; transform: tranlateY(-50%)
display: flex; justify-content: center;
-
div垂直居中:
- 已知父元素高度:
margin-top: height / 2; transform: tranlateY(-50%)
- 未知父元素高度:
position: absolute: top: 50%; transform: tranlateY(-50%)
display: flex; algin-items: center;
- 已知父元素高度:
3. 移除inline-block(行内元素)的间隙
- 移除空格
标签写在一行,移除标签间的空格 (格式化后会失效)标签写在一行,移除标签间的空格 (格式化后会失效)标签写在一行,移除标签间的空格 (格式化后会失效)
- 使用margin负值
- 使用font-size:0
- letter-spacing
- word-spacing
4. 清除浮动
浮动的影响
- 由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后,因为浮动元素脱离文档流不占据原来的位置
- 如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示
清除浮动的方法
-
父级div定义height
-
结尾处加空div标签,样式clear:both
-
父级div定义伪类:after和zoom
-
父级div定义overflow:hidden(同时还要定义width或zoom:1,不能定义height)
-
父级div定义overflow:auto(同时还要定义width或zoom:1,不能定义height)
-
父级也浮动,需要定义width(不推荐)
-
父级div定义display:table(不推荐)
-
结尾处加br标签,样式clear:both(父元素div定义zoom:1,不推荐)
在浮动元素后面放一个空的div标签,div设置样式clear:both来清除浮动。它的优点是简单,方便兼容性好,但是一般情况下不建议使用该方法,因为会造成结构混乱,不利于后期维护
5.(外)边距重叠
原因
布局垂直方向上两个元素的间距不等于margin的和,而是取较大的一个
1. 同级相邻元素
现象: 上方元素设 置margin-bottom: 20px ,下方元素设置 margin-top: 10px ,实际的间隔是 20px
避免办法: 同级元素不要同时设置,可都设置margin-bottom或margin-top的一个,或者设置padding
2.父子元素
现象: 父元素设 置margin-top: 20px ,下方元素设置 margin-top: 10px ,实际的间隔是 20px
避免办法: 父元素有padding-top,或者border-top。或者触发 BFC
6. 两、三栏布局
两栏布局
方法一:浮动布局
<style>
div{
height:500px;
}
#aside{
width:300px;
background-color:yellow;
float:left;
}
#main{
background-color:aqua;
margin-left:300px;
}
</style>
<body>
<div id = "aside">
</div>
<div id = "main">
</div>
</body>
侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。
右侧固定宽度,左侧自适应则是同理,只要将固定栏右浮动,使用margin-right空出其宽度即可。
方法二:浮动布局+负外边距(双飞翼布局的两栏版)
这种方法是创建简单一列宽度固定,一列内容为宽度的100%的两列布局的好方法:
<style>
div{
height:500px;
}
#aside{
width:300px;
background-color:yellow;
float:left;
margin-right:-100%;
}
#main{
width:100%;
float:left;
}
#content{
margin-left:300px;
background-color:aqua;
}
</style>
<body>
<div id = "aside">
</div>
<div id = "main">
<div id = "content"></div>
</div>
</body>
左侧固定栏指定一个右侧的100%的负外边距,为整个屏幕的宽度,这就使得main的最左侧可以与屏幕最左侧对齐。
此时main的宽度是100%,因此需要为其子内容content指定一个左侧的外边距用于空出左侧栏的位置,即左侧栏的宽度300px
这种方法要相对复杂一些,但也很常用。
三栏布局
方法一:绝对定位
左侧栏和右侧栏分别用绝对定位固定在左侧和右侧,中间栏则利用margin-left和margin-right空出左右栏位置来
方法二:浮动定位法
此种方法最简单,分别另左侧栏和右侧栏向左和向右浮动,中间栏放在最后,再利用左右外边距空出左右栏的位置即可。
7. BFC
BFC 是 Block Formatting Context ,也就是 块级格式化上下文 ,是用于布局块级盒子的一块渲染区域。
简单来说,BFC 实际上是一块区域,在这块区域中遵循一定的规则,有一套独特的渲染规则。文档流其实分为 普通流
、定位流
和浮动流
和三种,普通流
其实就是指BFC
中的FC
,也即 格式化上下文
。
普通流:
元素按照其在 HTML 中的先后位置从上到下、从左到右
布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行。
格式化上下文:
页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用
BFC的几条规则:
- BFC 区域内的元素外边距会发生重叠。
- BFC 区域内的元素不会与浮动元素重叠。
- 计算 BFC 区域的高度时,浮动元素也参与计算。
- BFC 区域就相当于一个容器,内部的元素不会影响到外部,同样外部的元素也不会影响到内部。
BFC的应用:
- 清除浮动:父元素设置overflow: hidden触发BFC实现清除浮动,防止父元素高度塌陷,后面的元素被覆盖,实现文字环绕等等。
- 消除相邻元素垂直方向的边距重叠:第二个子元素套一层,并设置overflow: hidden,构建BFC使其不影响外部元素。
- 消除父子元素边距重叠,父元素设置overflow: hidden
触发BFC的方式:
- float 不为 none,浮动元素所在的区域就是一个 BFC 区域。
- position 的值不是 static 或 relative 的元素所在的区域就是一个 BFC 区域
- display为 table-cell 的表格单元格元素所在的区域也是一个 BFC 区域
- overflow 不为 visible 的元素所在的区域也是一个 BFC 区域
8. flex布局
弹性布局,Flex 布局将成为未来布局的首选方案。
兼容性:
- Webkit 内核的浏览器,必须加上-webkit前缀。
- ie9不支持
基本概念:
- 容器&项目:采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
- 主轴&交叉轴:堆叠的方向,默认主轴是水平方向,交叉轴是垂直方向。可通过 flex-derection: column 设置主轴为垂直方向。
容器属性:
- display: flex
- flex-direction:主轴的方向(即项目的排列方向),row | row-reverse | column | column-reverse;
- flex-wrap:是否换行,nowrap | wrap | wrap-reverse;
- flex-flow:direction 和 wrap简写
- justify-content:主轴对齐方式,flex-start | flex-end | center | space-between | space-around;
- align-items:交叉轴对齐方式,flex-start | flex-end | center | baseline | stretch;
- align-content: 多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。flex-start | flexend | center | space-between | space-around | stretch;
项目的属性:
- order:项目的排列顺序,数值越小,排列越靠前,默认为0。
- flex-grow:放大比例,默认为0,指定元素分到的剩余空间的比例。
- flex-shrink:缩小比例,默认为1,指定元素分到的缩减空间的比例。
- flex-basis:分配多余空间之前,项目占据的主轴空间,默认值为auto
- flex:grow, shrink 和 basis的简写,默认值为0 1 auto
- align-self:单个项目不一样的对齐方式,默认值为auto,auto | flex-start | flex-end | center | baseline | stretch;
9. CSS动画
后续敬请期待哦…