整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
览器解析HTML文件的过程是网页呈现的关键步骤之一。具体介绍如下：
HTML文档的接收和预处理
解析为DOM树
CSS解析与CSSOM树构建
JavaScript加载与执行
渲染树的构建
布局计算（Layout）
绘制（Paint）
因此，我们开发中要注意以下几点：
综上所述，浏览器解析HTML文件是一个复杂而高度优化的过程，涉及从网络获取HTML文档到最终将其渲染到屏幕上的多个步骤。开发者需要深入理解这些步骤，以优化网页性能和用户体验。通过合理组织HTML结构、优化资源加载顺序、减少不必要的DOM操作和合理安排CSS和JavaScript的加载与执行，可以显著提升页面加载速度和运行效率。
ss章节，本文仅列出笔者任务相对重要的知识点，且介绍上，针对重点。当然，遗漏很正常，希望能收到你的意见。
盒子模型，个人的理解，就是一个来装html标签的容器,包装的内容包括content+padding+border+margin。由这四个组成我们的"盒子"。
我们日常可能会遇到不同的浏览器，元素的高宽不一致。除了可能是浏览器内置的margin跟padding不同之外，也可能是IE跟w3c的盒子模型组成不同。
以下是两种不同盒子的分类：
简单的个人理解，block formatting context，块级格式化上下文。产生了BFC的，形成了独立容器，他的特性就是不会在布局中影响到外边的元素。
他的特性：
触发的条件是：
此外，除了BFC，还有IFC、GFC、FFC的概念。我们简单了解一下。
水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。inline-block的元素的内部是一个BFC，但是它本身可以和其它inline元素一起形成IFC。
flex，即弹性布局。一个由css3引入，为我们的盒子属性带来灵活性的一种布局方式。一旦父级采用了flex布局，里边的子控件将收flex布局限制，部分原本的样式（如float:left）也会失效。
基本api不做讲解，不熟悉可以看看：www.ruanyifeng.com/blog/2015/0…
特别注意：flex:0 0 30%的意义：等于flex-grow=0（默认不放大）+flex-shrink=0（不缩小）+flex-basis=30%（ 项目占据主轴的空间）
前端的图片分类格式,其实是性能优化的很大部分。选择好图片的类型，对前端的性能影响非常大。
而前端对图片的精髓，一方面是对图片大小的评估，一方面是对图片的类型选择。
他的大小可以这样判断：
比如一张200*200的图片大小，这时候，他的像素点有40000个。每个像素有 4 个通道， 所以一共有160000个字节,所以，我们评估该图片的大小大概为：160000/1024 约等于 156（KB）， 如果大很多，说明图片大小有优化控件。如果小很多，说明此时是模糊的。
列举一下笔者所知道的适配方式：
这个问题本次只列举了几个常见的，非全部列出。如需具体，可另查资料。
1）间距差异是否大，导致文本换行，或者间隔太大。原因：每个浏览器的margin和padding的默认值不同。解决方案：全局文件设置统一默认margin和padding。
2）图片默认有间距 原因：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用） 解决方案：使用float属性为img布局
3）较小的高度（小于10px），时，ie可能会超出高度 原因：IE有一个默认的行高的高度 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
为min-height本身就是一个不兼容的CSS属性
4）透明度兼容设置 原因：不同浏览器各自透明度关键字不统一。解决方案：filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
5）IE的hover图片会闪烁 原因：IE6的每次触发 hover 的时候都会重新加载 解决方案：提前缓存文件。document.execCommand("BackgroundImageCache", false, true);
该回复只给予思路，没有具体写法。因为我觉得大家都应该懂。
已知宽高：1.margin 自己算高宽 2.定位 + margin-top + margin-left 3.定位 + margin:auto
未知宽高：1.transform 但有IE兼容的问题 2.flex 布局 3.display: table-cell
首先你可能需要了解一下物理像素跟独立像素的区别。
物理像素：一个物理像素是显示器（手机屏幕）上最小的物理显示单元，如：iPhone6上就有7501334个物理像素颗粒。独立像素：逻辑像素，程序使用的虚拟像素。如：iPhone6上就有375677个独立像素。
那么如何实现1px呢：1.利用 transfrom 的 scale 缩放来实现 2.利用 background 的 line-gradient 线性渐变来实现 3.meta viewport修改成1比0.5。这样整个屏幕的大小缩小了0.5。4.利用box-shadow
该回复只给思路
1.CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right
2.绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right
3.flex布局
初步聊聊个人的样式优化方案如下：
1.避免css层级太深。有兴趣了解一下css tree如何跟html tree融合成dom tree。2.首屏（特别是缓冲效果图）可适当使用内联元素。这样有利于更快的显示。3.异步加载CSS。非首次重要引入的css文件，不放在head里边。这样会引起阻塞。4.减少 回流 的属性。如display:none可以考虑使用visibility 5.适当使用GPU渲染。如tranfrom等。6.css动画的性能，是远远的大于js动画性能。7.利用工具压缩，去重。
伪类和伪元素的根本区别在于：它们是否创造了新的元素
伪类，指可以通过元素选择器，就可以实现的效果，如frist-child，active等。而伪元素，是指需要通过创元素，才可以实现的效果，如first-letter,before，after等。
具体元素跟写法有兴趣，可参考：blog.csdn.net/qq_27674439…
喜欢的老铁，加个关注！今后会分享更多的前端干货，欢迎点赞转发关注[比心][比心][比心]
来源 https://juejin.im/post/6867715946941775885
中1, 2, 3, 4 表示优先级
选择器 | 格式 | 优先级权重 |
!important | 10000 | |
内联样式 | 1000 | |
id 选择器 | #id | 100 |
类选择器 | #classname | 10 |
属性选择器 | a[ref=“eee”] | 10 |
伪类选择器 | li:last-child | 10 |
标签选择器 | div | 1 |
伪元素选择器 | li::after | 1 |
相邻兄弟选择器 | h1+p | 0 |
子选择器 | ul>li | 0 |
后代选择器 | li a | 0 |
通配符选择器 | * | 0 |
注意事项：
可继承：
字体系列 font-family font-weight font-size
文本系列 color text-align line-height
可见系列 如 visibility
由于属性太多，这里只列举常见的可继承的属性
属性值 | 作用 |
none | 元素不显示，并且会从文档流中移除。 |
block | 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 |
inline | 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 |
inline-block | 默认宽度为内容宽度，可以设置宽高，同行显示。 |
list-item | 像块类型元素一样显示，并添加样式列表标记。 |
table | 此元素会作为块级表格来显示。 |
inherit | 规定应该从父元素继承 display 属性的值。 |
block：
*请认真填写需求信息，我们会在24小时内与您取得联系。
