文章目录
- 31.data-属性的作用
- 32.如何让Chrome浏览器显示小于12px的文字
- 33.哪些操作会引起页面回流(Reflow)
- 34.CSS预处理器的比较less sass
- 35.如何实现页面每次打开时清除本页缓存
- 36.什么是Virtual DOM,为何要用Virtual DOM
- 37.伪元素和伪类的区别
- 38.http的几种请求方法和区别
- 39.前端需要注意哪些SEO
- 40.的title和alt有什么区别
- 41.从浏览器地址栏输入url到显示页面的步骤
- 42.如何进行网站性能优化
- 43.语义化的理解
- 44.HTML5的离线储存怎么使用,工作原理能不能解释一下?
- 45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
- 46.iframe有那些缺点?
- 47.WEB标准以及W3C标准是什么?
- 48.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
- 49.HTML全局属性(global attribute)有哪些
- 50.Canvas和SVG有什么区别?
- 51.如何在页面上实现一个圆形的可点击区域?
- 52.网页验证码是干嘛的,是为了解决什么安全问题
- 53.请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 54. CSS选择器有哪些?哪些属性可以继承?
- 55.CSS优先级算法如何计算?
- 56.CSS3有哪些新特性?
- 57.请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?
- 58.用纯CSS创建一个三角形的原理是什么?
- 59.常见的兼容性问题?
- 60.为什么要初始化CSS样式
31.data-属性的作用
data-
为H5新增的为前端开发者提供自定义的属性,
这些属性集可以通过对象的 dataset
属性获取,
不支持该属性的浏览器可以通过 getAttribute
方法获取 :
需要注意的是:data-
之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。
即:当没有合适的属性和元素时,自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。
32.如何让Chrome浏览器显示小于12px的文字
为了兼容所有的浏览器,使用缩放方式使字体变小
p{
font-size:10px;-webkit-transform:scale(0.8);}
33.哪些操作会引起页面回流(Reflow)
1、什么是reflow?
reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。
因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。
以下操作会引起回流:
① 改变窗口大小
② font-size大小改变
③ 增加或者移除样式表
④ 内容变化(input中输入文字会导致)
⑤ 激活CSS伪类(:hover)
⑥ 操作class属性,新增或者减少
⑦ js操作dom
⑧ offset相关属性计算
⑨ 设置style的值
…
reflow与repaint是减缓js的几大主要原因,尤其是reflow更是性能杀手,所以我们应该想法避免。
34.CSS预处理器的比较less sass
两者的相同点
首先sass和less都是css的预编译处理语言,
他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等
加快了css开发效率,
当然这两者都可以配合gulp和grunt等前端构建工具使用
两者的区别
less是基于JavaScript的在客户端处理 所以安装的时候用npm
sass是基于ruby所以在服务器处理
两者的优缺点
LESS缺点
因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。
less优点
less 简单,易上手;属于css的基础拓展;less更适合静态界面写样式时
sass的缺点:复杂对于新手比较不友好
sass的优点:功能强大,更加丰富的拓展sass适合游戏或者其他做效果时需要逻辑来更换不同样式
35.如何实现页面每次打开时清除本页缓存
(1) 用HTML标签设置HTTP头信息
<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">
说明: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后面增加一个随机的参数:
增加参数前:url=test/test.jsp
增加参数后:url=test/test.jsp?ranparam=random()
36.什么是Virtual DOM,为何要用Virtual DOM
什么是Virtual DOM
Virtual DOM的概念有很多解释,分别是:一个对象,两个前提,三个步骤。
一个对象指的是Virtual DOM是一个基本的JavaScript对象,也是整个Virtual DOM树的基本。
两个前提分别是JavaScript很快和直接操作DOM很慢,这是Virtual DOM得以实现的两个基本前提。
得益于V8引擎的出现,让JavaScript可以高效地运行,在性能上有了极大的提高。
直接操作DOM的低效和JavaScript的高效相对比,为Virtual DOM的产生提供了大前提。
三个步骤指的是Virtual DOM的三个重要步骤,分别是:生成Virtual DOM树、对比两棵树的差异、更新视图。这三个步骤的具体实现也是本文将简述的一大重点。
1.生成Virtual DOM树
DOM是前端工程师最常接触的内容之一,一个DOM节点包含了很多的内容,但是一个抽象出一个DOM节点却只需要三部分:节点类型,节点属性、子节点。所以围绕这三个部分,我们可以使用JavaScript简单地实现一棵DOM树,然后给节点实现渲染方法,就可以实现虚拟节点到真是DOM的转化。
<