![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
xj-L
哈哈哈哈哈哈
展开
-
圣杯布局、双飞翼布局、flex布局
在面试中,我们经常会遇到CSS中两端宽度固定大小,中间自适应问题问题: 编写CSS,实现三栏水平布局,其中left、right分别位于左右两侧,left宽度为100px,right宽度为200px,main处在中间,宽度自适应解决方法:圣杯布局页面DOM结构如图:设置外层div内边距,使中间div宽度为100%,将所有节点设置浮动方向为left,利用margin-l...原创 2018-07-18 11:08:08 · 261 阅读 · 0 评论 -
CSS渐变实现进度条、立体小球
进度条 设置 div 元素属性 background-image 为 linear-gradient (渐变)来实现倾斜的进度条,在使用 animation 动画来让进度条动起来,就能达到想要的效果啦HTML 代码:<div id="loader"></div>CSS 代码:@keyframes loader{ 0% { } ...原创 2018-11-29 16:05:05 · 1748 阅读 · 0 评论 -
位图与矢量图
位图与矢量图位图(BitMap)矢量图位图(BitMap)位图又叫像素图,其构成最小单位是像素,在缩放过程中会失真。位图是一个 HTML 元素,其中的图形不会单独创建 DOM 元素。因此我们不能通过 JavaScript 操控位图内单独的图形,不能对其中的具体图形进行监控。位图每次更改位图设置都会重新绘制,位图相对矢量图能达到更好的视觉效果,效果越复杂需要的像素越多,图像文件内存占比也越大矢...原创 2018-11-29 09:45:43 · 1131 阅读 · 0 评论 -
页面中绘制圆周运动的 dom
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> * { margin: 0;原创 2018-09-08 22:12:42 · 293 阅读 · 0 评论 -
HTML 中 src 与 href 的区别
hrefhref 这个属性指定 web 资源的位置,从而定义当前元素(如锚点 a )或当前文档(如链接)与目标锚点或目标资源之间的联系。这表示链接目标的 URL 或 URL 片段。<link href="style.css" rel="stylesheer" /><a href="www.xxx.com"></a>上面的两个栗子,都是指定建立标签..原创 2018-09-05 13:22:36 · 303 阅读 · 0 评论 -
浏览器渲染过程及重绘重排
浏览器渲染过程HTML代码转化成DOM CSS代码转化成CSSOM(CSS Object Model) 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息) 生成布局(layout),即将所有渲染树的所有节点进行平面合成 将布局绘制(paint)在屏幕上详情可以思考下面两张图: 重排和重绘(重新布局、重新绘制)修改DOM 修改样式表 用户事件(比如...原创 2018-08-01 11:30:21 · 1161 阅读 · 0 评论 -
面试题--如何渲染几万条数据并不卡住界面
根据题意,如果我们一次性渲染刷新几万条数据,页面会卡顿,因此只能分批渲染,既然知道原理我们就可以使用setInterval和setTimeout、requestAnimationFrame来实现定时分批渲染,实现每16 ms 刷新一次requestAnimationFrame跟setTimeout/setInterval差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于se...原创 2018-07-22 17:50:55 · 10762 阅读 · 0 评论 -
前端性能优化
HTML语义化HTML:可以使代码简洁清晰,支持不同设备,便于团队开发,对搜索引擎和用户更加友好; 减少DOM节点:加速页面渲染; 给图片加上正确的宽高值:减少页面重绘,同时防止图片缩放; 避免src属性和link的href属性为空:当值为空时浏览器很可能会把当前页面当成其属性值加载; 正确的闭合标签;CSS合并css文件 使用link 合写css(通过少些css属性来达...原创 2018-07-22 15:13:56 · 225 阅读 · 0 评论 -
CSS预编译---SASS
声明变量($name:10px;) 计算功能(font-size:10px-2px;) 嵌套#idName { .className { color: red; }}注释(标准的CSS注释 /* comment */ ,会保留到编译后的文件。 单行注释 // comment,只保留在SASS源文件中,编译后被省略。 在/*后面加一个感叹号,表示这是...原创 2018-07-22 15:08:15 · 291 阅读 · 0 评论 -
javascript中stopImmediatePropagation函数和stopPropagation函数的区别
1、stopImmediatePropagation方法: stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上,目的是在执行完当前事件处理程序之后,停止当前节点以及所有后续节点的事件处理程序的运行2、stopPropagation方法 stopPropagation方法作用在后续节点上,目的在执行完绑定到当前元素上的所有事件处理程序之后,...原创 2018-07-20 17:37:24 · 788 阅读 · 0 评论 -
面试题:js拍平多维数组
在面试中我们常常会被问到如何用原生js实现拍平多维数组let array = [1, [2], [3, [4, [5]]]]function flat(arr) { //在此处实现代码}console.log(flat(array)) //[1, 2, 3, 4, 5]原始方法:let array = [1, [2], [3, [4, [5]]]]function ...原创 2018-07-20 11:25:38 · 3957 阅读 · 0 评论 -
MessageChannel API
MessageChannel接口允许我们创建一个新的消息通道,并通过它的两个MessagePort 属性发送数据,返回的两个属性为只读属性MessageChannel API在Web Worker中同样可以使用使用:let channel = new MessageChannel();channel.port1; //只读channel.port2; //只读返回两...原创 2018-07-24 20:54:45 · 1858 阅读 · 0 评论 -
HTML5-History路由
现今框架(Vue、React等)内置路由(Router)默认一般为Hash路由,包括我自己搭建的博客路由也使用Hash路由今天主要记录H5的新增API--History,可以实现不刷新操作页面,通过其中API操作浏览器历史记录history.pushState(state, title, url);/* state通常作为页面数据状态值* title即页面标题,一般都为null* ...原创 2018-07-24 11:42:20 · 2973 阅读 · 0 评论 -
怪异模式与标准模式
什么是怪异模式与标准模式:浏览器一般都有两种解析渲染模式:标准模式和怪异模式。在标准模式下,浏览器按照HTML与CSS标准对文档进行解析和渲染;而在怪异模式下,浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。而浏览器解析渲染时采取什么模式是由什么决定呢?答案是DOCTYPE声明DOCTYPE声明:告知浏览器如何解析和渲染文档 DTD:文档类型定义//H5中DOCTYPE...原创 2018-07-24 11:11:43 · 716 阅读 · 0 评论 -
Canvas 绘制线条、与鼠标交互的线条
canvas入门,跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习,完成一个简单的 canvas 线条 demo,监听文档 document 的几个事件 mousemove、mouseleave、blur 来与背景线条交互, 当线条与鼠标相交时,停止线条运动下面是代码,操作解释都有注释:<!DOCTYPE html><html lang="en">...原创 2018-12-01 17:23:59 · 2661 阅读 · 1 评论