前端系列之----补充问题集合

最新推荐文章于 2024-07-10 14:03:37 发布

zzmxz

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量482

点赞数

文章标签：前端面试

本文链接：https://blog.csdn.net/zzmxz/article/details/77823852

版权

Background-position

background-position定义background-image图片的位置，不受padding影响，相对于盒子模型的边框border定位。


可以修改默认值。

可以使用left right  top bottom来定义；

也可以使用%来定义；

也可以使用像素来定义。比如
left bottom 表示左下角，如果仅定义了一个关键词，另一个center；
x% y% 第一个是水平位置；第二个是垂直位置

SASS

sass是一种CSS预处理器

sass定义了一种专门的编程语言，为CSS增加一些编程特性，比如在CSS中使用变量、简单的逻辑程序、函数等，然后进行页面样式设计的时候

，编译生成正常的CSS文件。

sass为CSS定义了许多编程的特性，函数，变量，嵌套等等，但是需要将css文件转化成sass文件。比较麻烦。

CSS预处理器，好处：变量、mixin、函数、规则嵌套、颜色处理等，坏处：css的文件体积和复杂度不可控、调试难度增加、成本等

Doctype 严格模式与混杂模式的区别在哪里

严格模式是浏览器根据web规范去显示页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
；混杂模式是以一种向后兼容的方式去显示，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。

渐进增强和优雅降级

渐进增强：针对低版本浏览器构建页面，保证最基本的功能，然后再对高版本浏览器改进，追加功能达到好的用户体验。从被所有浏览器支持的基本功能开始，逐渐添加新浏览器才支持的功能，当新浏览器支持时，自动呈现出来。

优雅降级：一开始就构建全面的功能，然后再对低版本浏览器兼容。页面在新式浏览器能够正常显示，如果用户使用老式浏览器，则检查能否正常工作。

逐渐增强是从基本功能开始，不断扩充新的需要；优雅降价是从复杂的现状开始。逐渐减少用户体验的需要

COOKIES sessionStorage localStorage

Cookies是存储在本地的一种会话控制信息，大小通常不超过4KB，电源关了依然存在在，设置的cookies过期时间之前一直有效。。携带中http请求中，在服务器和客户端之间传递。

sessionStorage 本地存储会话数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。大小大得多5M级别

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。大小大得多5M

行级块级

行级元素：不能设置宽高，和其他元素呆在一行，a span strong em u

块级元素：能设置宽高，独占一行不和其他元素呆在一行 div p h1-h6 ul li

盒子模型块级元素相当于一个盒子，有外边距margin 边框border 内填充padding 内容content组成。

前端优化

原则就是多使用缓存，多使用内存；少进行CPU计算，少进行网络请求；

加载资源优化：

1. 静态资源压缩合并比如JS合并 JScompress ；CSS合并；

2. 静态资源缓存

3. 使用CDN让资源加载更快些 CDN服务器根据网络负载情况，把你的请求重定向到一个最有节点上。

4. 使用SSR进行后端渲染数据直接输出到HTML

渲染优化：

1. CSS放到前面，JS放后面

2. 懒加载，图片懒加载，下拉加载更多

3. 减少DOM查询，设置DOM查询缓存

4. 减少DOM操作，多次DOM操作合并到一起

5. 事件节流

6. 今早执行操作 window.onload所有加载完成，静态文件啊图片啊、和document.DOMcontentLoaded区别

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。

缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等

请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

请求带宽：压缩文件，开启GZIP，

代码层面的优化

用 hash-table 来优化查找
少用全局变量
用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能
用 setTimeout 来避免页面失去响应
缓存DOM节点查找的结果
避免使用CSS Expression
避免全局查询
避免使用with(with会创建自己的作用域，会增加作用域链长度)
多个变量声明合并
避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
尽量避免写在HTML标签中写Style属性

移动端性能优化

尽量使用css3动画，开启硬件加速。
适当使用 touch 事件代替 click 事件。
避免使用 css3 渐变阴影效果。
可以用 transform: translateZ(0) 来开启硬件加速。（见下面的详细解释）
不滥用Float。Float在渲染时计算量比较大，尽量减少使用
不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
合理使用requestAnimationFrame动画代替setTimeout
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
PC端的在移动端同样适用