阅读 91

html,css,浏览器,网络等重要知识总结

html部分

对HTML语义化的理解

  • 用语义类标签增强了可读性,结构更加清晰,开发者能清晰的看出网页的结构,便于团队的开发与维护。
  • 适合搜索引擎的爬虫爬取有效信息,有利于SEO。
  • 更容易让屏幕阅读器读出网页内容,去掉或样式丢失的时候能让页面呈现清晰的结构。

语义化标签:herader,nav,main,aside,footer等

html5 有那些新特性

  • 新增语义化标签,progress 进度条标签
  • 媒体标签 audio(音频) video(视频)
  • 新增了表单类型,color,email,data,time,number,url等
  • 新增表单属性:placeholder autofocus(自动获取焦点)等
  • 新增了两种客户端存储数据的方式 localStorage和sessionStorage
  • 拖放,画布(canvas),Geolocation(地理定位),websocket(通信协议)

localStorage和sessionStorage cooike的区别

cooike作用: 由于 HTTP 是无状态的协议,不能保存每一次请求的状态,所以需要给客户端增加 Cookie 来保存客 户端的状态。 Cookie 的作用主要用于 用户识别 和 状态管理 。(比如网页常见的记住密码) ckkike.png

html5 离线存储

在线情况下,浏览器发现HTML头部有manifest属性,它会请求manifest文件,如果是第一次访问,那么浏览器就会根据manifest文件的内容下载相应的资源,并进行离线存储。如果已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不会做任何操作,如果文件改变了,那么就会重新下载文件中的资源,并且进行离线存储。

iframe框架有那些优缺点?

优点:

  • 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
  • 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

缺点:

  • 不利于seo,搜索引擎的爬虫程序无法解读这种页面
  • 会阻塞主页面的 onload 事件
  • 会产生很多页面,不容易管理,增加服务器的http请求

css部分

常见设计图源文件的了解

PSD,Sketch,XD(常见设计稿源文件) 蓝湖,Pxcook(标注信息工具) imgcook(智能代码生成平台)

css 选择器和优先级

选择器

id(#id)

  • 类选择器(.className)
  • 属性选择器( p[class="a"])
  • 伪类选择器(li:last-child)
  • 元素选择器(div)
  • 通配符选择器(*) 等

总结排序:

!important > 行内样式 > ID选择器 > 类选择器,属性,伪类 > 元素 > 通配符 > 继承 > 浏览器默认属性

注意事项

  • !important声明的样式的优先级最高;

  • 如果优先级相同,则最后出现的样式生效;

  • 继承得到的样式的优先级最低;

  • 样式表的来源不同时,优先级顺序为:内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

CSS中可继承与不可继承属性有哪些

不可继承属性

  • 背景属性

background background-color等

  • 定位属性

float position min-height、max-width z-index

  • 盒子模型属性

width、height、margin 、margin-top、margin-right等

可继承属性

  • 字体系列属性

font-family font-weight font-size font-style

  • 文字系列属性

text-align line-height

  • 其他

color cursor(光标形状等)

行内元素和块级元素

行内元素(设置为行内元素 display:'inline')

  • 与其他行内元素并排
  • 不能设置宽高,默认的宽度就是文字的宽度

span a b i 等

块级元素(设置为行内元素 display:'block')

  • 霸占一行,不能与其他任何元素并列。
  • 能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。

div p h1 li table等

行内快元素(设置为行内元素 display:'inline-block')

  • 可以与其他行内元素并排
  • 可以设置宽高等

input img

隐藏元素的方法

display:none

不会渲染元素,不会在页面中占据位置

visibility:hidden

会渲染元素,元素在页面中仍占据空间,只是内容不可见。

opacity: 0

将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间

z-index:负值

来使其他元素遮盖住该元素,以此来实现隐藏。

伪元素和伪类

伪元素

在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。它们只在外部显示可见,但不会在文档的源代码中找到它们,因此,称为“伪”元素。例如:

p::before {content:"第一章:";} 
p::after {content:"Hot!";}
复制代码

伪类

将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素。例如:

a:hover {color: #FF00FF}
p:first-child {color: red}
复制代码

盒模型

css3中盒模型有以下两种:标准盒子模型、IE盒子模型

image.png

image.png 盒模型都是由四个部分组成的,分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同:

  • 标准盒模型的width和height属性的范围只包含了content,
  • IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型:

  • box-sizeing: content-box表示标准盒模型(默认值)
  • box-sizeing: border-box表示IE盒模型(怪异盒模型)

flex相关属性

display:flex

六个属性

flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向)

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
-   `row`(默认值):主轴为水平方向,起点在左端。
-   `row-reverse`:主轴为水平方向,起点在右端。
-   `column`:主轴为垂直方向,起点在上沿。
-   `column-reverse`:主轴为垂直方向,起点在下沿。
复制代码

flex-wrap

是否换行

flex-wrap: nowrap | wrap | wrap-reverse;
复制代码

justify-content

justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;
复制代码

align-items

align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;
复制代码

css3 有哪些新特性

  • 圆角 (border-radius:8px)

  • 多列布局 (multi-column layout)

  • 阴影 (Shadoweflect)

  • 文字特效 (text-shadow)

  • 文字渲染 (Text-decoration)

  • 线性渐变 (gradient)

  • 旋转 (transform)

  • 增加了旋转,缩放,定位,倾斜,动画,

margin重叠问题

两个块级元素的上外边距和下外边距可能会合并(折叠)为一个外边距,其大小会取其中外边距值大的那个,这种行为就是外边距折叠。需要注意的是,浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向

计算原则

  • 如果两者都是正数,那么就去最大者
  • 如果是一正一负,就会正值减去负值的绝对值
  • 两个都是负值时,用0减去两个中绝对值大的那个

清除浮动的方式

  • 给父级div定义height属性
  • 浮动元素的父级标签添加overflow:hidden
  • 使用:after伪元素
.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
复制代码

css优化和提高性能的方法

  • css压缩:将写好的css进行打包压缩,可以减小文件体积。
  • 减少使用@import,建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载。
  • 避免使用通配规则,如*{}计算次数惊人,只对需要用到的元素进行选择。
  • 慎重使用高性能属性:浮动、定位。

为什么要使用css预处理器

  • css预处理器为css增加一些编程特性,无需考虑浏览器的兼容问题
  • 增加了css代码的复用性。层级,mixin, 变量,循环, 函数等对编写以及开发UI组件都极为方便。
  • css更加的简洁,增加适应性以及可读性,可维护性等

网络和浏览器部分

http状态码

code.png

get和post的区别

  • get 请求参数放在url上,参数会保留在浏览器历史中,所以不安全,传输数据量有限(url长度限制),数据类型只支持ASCII 字符,可缓存。

  • post 安全性更高,参数不会显示在url上,传输数据量更大,数据类型没有限制,不可缓存。

浏览器输入google.com 按下回车发生了什么

  • 1.Dns域名解析
  • 2.与服务器简历tcp连接(tcp三次握手)
  • 3.发送http请求
  • 4.服务器处理请求
  • 5.返回数据
  • 6.关闭tcp连接(四次挥手)
  • 7.渲染页面

浏览器渲染过程

  • 1.html 解析出Dom Tree
  • 2.css 解析出style Rules
  • 3.两者关联生成Render Tree
  • 4.Layout(布局)根据Render Tree 计算每个节点的信息
  • 5.渲染整个页面

浏览器的同源策略以及解决办法

  • 同源策略是一个重要的安全策略,为了安全,减少被攻击的媒介。
  • 同源的定义:域名,协议,端口相同。任何一个不同,就不是同源
  • 跨域问题其实就是浏览器的同源策略所导致的。

解决办法:

  • 1.跨域资源共享([CORS])

node中的express中 主要是把Access-Control-Allow-Origin 设置为"*"

res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'Authorization,X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method' )
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PATCH, PUT, DELETE')
res.header('Allow', 'GET, POST, PATCH, OPTIONS, PUT, DELETE')
复制代码
  • 2.nginx 反向代理
  • 3.react解决跨域问题 proxy代理配置和http-proxy-middleware

回流和重绘

回流:

当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。

重绘:

当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

区别

回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流 当页面布局和几何属性改变时就需要回流
比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变等 1.批量修改dom

http 协议与https协议的原理及区别

http 超文本传输协议

  • 1.信息明文传输,不安全
  • 2.连接很简单,是无状态的
  • 3.默认端口80

https

  • 1.需要ca证书,需要一定的费用
  • 2.HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。
  • 3.默认端口443

各个浏览器的内核

IE Trident
chrome Blink
firfox Gecko
Safari webkit

强缓存和协商缓存,为什么需要浏览器缓存

强缓存:

使用强缓存策略时,如果缓存资源有效,则直接使用缓存资源,不必再向服务器发起请求。

协商缓存:

如果命中强制缓存,我们无需发起新的请求,直接使用缓存内容,如果没有命中强制缓存,如果设置了协商缓存,这个时候协商缓存就会发挥作用了。 使用协商缓存策略时,会先向服务器发送一个请求,如果资源没有发生修改,则返回一个 304 状态,让浏览器使用本地的缓存副本。如果资源发生了修改,则返回修改后的资源。

为什么需要浏览器缓存

对于浏览器的缓存,主要针对的是前端的静态资源,最好的效果就是,在发起请求之后,拉取相应的静态资源,并保存在本地。如果服务器的静态资源没有更新,那么在下次请求的时候,就直接从本地读取即可,如果服务器的静态资源已经更新,那么我们再次请求的时候,就到服务器拉取新的资源,并保存在本地。这样就大大的减少了请求的次数,提高了网站的性能。这就要用到浏览器的缓存策略了。

优点:

  • 减少了服务器的负担,提高了网站的性能
  • 加快了客户端网页的加载速度
  • 减少了多余网络数据传输

简单说下webSocket

1.支持双向通信,实时性更强
2.没有同源策略的限制,客户端可以与任意服务器通信
3.性能开销小,通信高效

文章分类
前端
文章标签