H5新特性有哪些？
H5拥有6种新特性 1. 语义化标签，例如header，footer，section，article等 语义化标签的作用：提升页面的阅读性(结构性增强)，更有利于SEO，对于使用屏幕阅读器的人来说会更友好(有明显的语气差别，例如strong标签内的内容会重读)； 2. 新增媒体元素，audio、video audio和video标签能够很容易的输出音频或视频流，提供便利的获取文件信息的API 更多详细属性参考 3.用于绘画的canvas...
什么是响应式设计？响应式设计的基本原理是什么？如何做？
简介 我这么理解：响应式布局就是一个网站能够兼容多个设备，可以根据屏幕的大小自动调整页面的展示方式以及布局，我们不用为每一个设备做一个特定的版本。响应式网站的特点： 同时适配PC+平板+手机等 网站的布局会根据视口来调整模块的大小和高度 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理来设置差异化的css样式 一、是什么？ 响应式网站设计（Responsive Web Design）是一种网络页面设计布局，页面的设计与开发...
前端工程化
div居中方法
水平居中 1.行级元素 ：为该行级元素的父元素设置text align:center配合line height样式 2. 块级元素 ：为其自身设置 :auto样式 垂直居中 方法一： display:table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符. display:table cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>） 方法二： 利用f...
js的new操作符到底做了什么
做了什么？ 1、创建了一个空的js对象（即{}） 2、将空对象的原型prototype指向构造函数的原型 3、将空对象作为构造函数的上下文（改变this指向） 4、对构造函数有返回值的判断 怎么实现？ 构造函数返回值的判断 一般情况下构造函数没有返回值，但是作为函数，是可以有返回值的。 那么在构造函数有返回值的情况下，new操作符做了什么？ 先看两个例子： 注意一下上面两个返回值的差异 结论： 在new的时候，会对构造函数的返回值做一些...
介绍一下 CSS 的盒子模型
1\. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border) 2\. 类型： IE 盒子模型、标准 W3C 盒子模型； 3\. 两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content) 4\. 而IE盒模型的宽高是指content+padding+border。 5.设置盒模型的方式是：设置box sizing box sizing:content box 标准盒模型 bo...
前端性能优化 - 用RAIL模型分析性能
RAIL是一个以用户为中心的性能模型，它把用户的体验拆分成几个关键点（例如，tap，scroll，load），并且帮你定义好了每一个的性能指标。 有以下四个方面： Response Animation Idle Load <img width="676" height="245" src="../../ resources/1734894ee7aaf2b6 tplv t2oaga2asx 2e5a8010c5bb40479.webp"/...
前端性能优化-CSS性能优化
一、内联首屏关键CSS 渲染的大概流程： 加载HTML资源 解析HTML 加载CSS资源，同时构建DOM树 解析CSS，同时渲染DOM树 当CSS文件过大，就会停留在第3步，网速慢时，打开网站的时候经常遇到没有样式的情况。 所以我们需要先加载部分CSS（首屏需要用到的CSS），其他优先级比较低的CSS就以异步的方式加载。 将渲染首屏内容所需的关键CSS内联到HTML中，能使CSS更快速地下载。在HTML下载完成之后就能渲染了，页面渲染的...
网站图片加载慢怎么优化
一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？ <a id="t1" </a <a id="1 Sprites 2" </a 1、使用 Sprites 图片技术 它将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用 CSS 技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用 能很好地减少网页的 请求，从而大大的提高页面的性能。...