随笔分类 - 浏览器/html/css面试题
摘要：8 种请求方法 OPTIONS：返回服务器针对特定资源所支持的 HTTP 请求方法，也可以利用其向 web 服务器发送 * 的请求来测试服务器的功能性。 HEAD：向服务器索与 GET 请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应小消息
阅读全文
摘要：伪类和伪元素的具体概念如下： 伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。 例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所
阅读全文
摘要：解决办法为： （1） 用HTML标签设置HTTP头信息 <HEAD> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <META HTTP-EQUIV
阅读全文
摘要：CSS预处理器 1. 基于CSS的另一种语言 2. 通过工具编译成CSS 3. 添加了很多CSS不具备的特性 4. 能提升CSS文件的组织方式 CSS预处理器的作用 1. 帮助更好的组织CSS代码 2. 提高代码复用率 3. 提升可维护性 CSS预处理种类 1. Less 文件后缀名：.less a
阅读全文
摘要：一、前言 偶尔在面试过程中遇到过重汇与回流reflow的问题，毕竟页面优化也是考核一个开发者能力的关键之一，上篇文章聊了下documentfragment也是为了减轻回流问题，那么本篇文章好好介绍下重绘和回流。 二、重绘和回流是什么 怎么去理解这两个概念呢？从字面上理解，重绘，重新绘画，重新上色，较
阅读全文
摘要：在这一年的工作中，我发现很多问题你利用自己的「聪明才智」绕过去了，总有一天它会和你不期而遇，今天我们就来直面一个字体兼容性的小问题：Chrome谷歌浏览器下不支持css字体小于12px。 我们先来看个效果图（chrome下）： 给你看个栗子.png 从上面的图可以很明显地看出Chrome下css设置
阅读全文
摘要：data-用于存储页面或应用程序的私有自定义数据，赋予我们在所有HTML元素上嵌入自定义data属性的能力，存储的数据能被页面的JS利用，以创建更好的用户体验。 1 <div id="box" data-user-name="lily"></div> 2 var box = document.get
阅读全文
摘要：1.文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片 ，可以通过相关工具在线合并，也可以在ps中合并。 2.使用CDN（内容分发网络
阅读全文
摘要：DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。 CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队） 浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。 服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，
阅读全文
摘要：HTTP协议 什么是HTTP HTTP协议规定了浏览器怎样向万维网服务请求万维网文档，以及服务器怎样把文档传送给浏览器。在服务器和浏览器之间的请求和响应的交互，必须按照规定的格式和遵循一定的规则。这些格式和规则就是超文本传送协议HTTP。 HTTP规定在HTTP客户和HTTP服务器之间的每次交互，都
阅读全文
摘要：浮动对页面的影响： 如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0， 下面的元素会自动补位，所以这个时候要进行浮动的清除。 关于清除浮动的方式: 方式一:使用overflow属性来清除浮动 .ovh{ overflow:
阅读全文
摘要：响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。 flex布局 当使用flex布局的时候涉及到两个东西
阅读全文
摘要：一、盒子没有固定的宽和高 方案1、Transforms 变形 这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上 top: 50%; left: 50%; 优点： 1. 内容可变高度 2. 代
阅读全文
摘要：CSS布局的四种定位方式 1、static（静态定位）： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。 2、relative（相对定位）： 定位为relative的元素脱离正常的文档流，但其在文档流中的位
阅读全文
摘要：常见的浏览器端的存储技术有哪些？ 浏览器端: cookie webStorage(localStorage、sessionStorage) userData indexedDB 服务器端： session
阅读全文
摘要：第一种——调用localStorage在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；在另一个标签页里面监听 storage 事件。即可得到 localstorge 存储的值，实现不同标签页之间的通信。 标签页1： <input id="n
阅读全文
摘要：从三个方面就前端性能进行总结：网络方面、DOM操作及渲染方面、数据方面。 1、网络方面 减少http请求：合并js文件/合并css文件/雪碧图的使用(css sprite)/使用base64表示简单的图片 减小资源体积：gzip压缩/js混淆/css压缩/图片压缩 缓存：DNS缓存 /CDN部署与缓
阅读全文
摘要：CSS动画属性会触发整个页面的重排，重绘,box-shadow和gradients的性能杀手 在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。
阅读全文
摘要：1、拖拽释放(Drap and drop) API ondrop 2、自定义属性data-id 3、语义化更好的内容标签(header,nav,footer ,aside, article, section) 4、地理(Geolocation) API 5、表单控件 calendar , date
阅读全文
摘要：前端开发中，如何优化图像？图像格式的区别？ 1、不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。 2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG
阅读全文
浙公网安备 33010602011771号