文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗？
是的
没有找到

canvas入门实战--邀请卡生成与下载

写了很多的javascript和css3的文章，是时候写一篇canvas的了。canvas是html5提供的一个新的功能！至于作用，就是一个画布。然后画笔就是javascript。canvas的用途非常的广，特别是html5游戏以及数据可视化这两个方面。现在canvas给我的感觉就和css3一样，可以不用太厉害，但是必须要会基础的用法。但是以后对canvas的需求，肯定会越来越大。所以canvas很值得学习，而且学好canvas，就是很好的一个加分项。对于这篇文章，我也是以canvas初学者的角度写的，会有很多改善的地方。如果大家觉得我有什么可以改善的，或者建议，欢迎指点迷津！代码已上传github，需要的欢迎star(downloadImg)。

03

页面优化——重绘和回流[通俗易懂]

一、写在前面 页面优化在面试的过程中经常遇到的问题，今天就来总计一下重绘和回流的问题。 二、重绘和回流是什么 我们都知道一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点进行几何布局形成render树(渲染树)，当渲染树构建完成后，页面就根据DOM树开始布局，渲染树也根据设置的样式渲染这些节点。 在这一过程中，比如我们删除DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树也发生变化，那么肯定要重新构建DOm树，而DOM树和渲染树紧密相连，DOM树渲染完了，渲染树也会随之进行渲染，这个过程就称为回流。 在比如说，我们给一个元素修改颜色，这样的行为是不会影响页面的布局的，DOM树不会发生改变，但是颜色变了，渲染树得重新绘制，这就是重绘。 所以说回流一定会触发重绘，重绘不一定触发回流。 题外话： 1、由于display:none的元素不在页面渲染，渲染树的构建不包含这些节点。但是visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流，visibility为hidden虽然看不到，但类似与透明度为0，其实还在文档流中，还是有渲染的过程。 2、尽量避免使用表格布局，当我们不给表格的td设置固定的宽度的时，一列的td的宽度会以最宽的td的宽作为渲染的标准，假设前几行的td在渲染时都渲染好了，结果下面的某行特别宽，table为了统一宽度，前几行的td会回流重新计算宽度，这是一个比较耗时的操作。 三、怎么样减少回流 回流会重构DOM树，渲染树也得重新渲染，比较麻烦，哪些行为可以引发回流，如何去避免呢？ 1、DOM的删除行为 比如删除某个节点，或者给父元素插入子节点，这类操作都会触发回流。如果我们插入多个子节点的话，可以使用documentfragment。 2、几何属性的变化 比如说元素的宽度变了，border变了，字体大小变了，这种直接会引发页面的布局的改变，也会触发回流。如果我们需要改变多个属性，做好的是将这些改变定义在一个class中，直接修改class名，这样只会触发一次回流。 3、元素的位置发生改变 修改一个元素的左右margin，padding之类的操作，所以在元素位移的动画，不要更改margin之类的值，使用定位脱离文档流后进行改变位置。 4、获取文章的偏移量之类的属性 例如我们需要获取scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性的时候，浏览器为了保证值的正确性也会回流进行获取，所以如果你要不多次操作，最好取完进行缓存。 5、页面初次渲染触发回流 页面的初次渲染触发回流这样无法避免。 6、浏览器窗口尺寸的改变 resize事件的发生也会触发回流。

02

HTML学习笔记1

1.2 单标记和双标记 1.单标记：空标记，就是没有结束标记的称之为单标记。 语法：水平线标记：

换行标记:
2.双标记：体标，就是这个标记有开始和结束 语法：和 1.3.文本控制和文本样式标记 1.段落标记

和换行标记
段落标记：段落与段落之间会自动换行 2.文本样式标记内容 常用的属性： face用来描述字体的样式 Size用来描述字体的大小，最大取值为7 Color用来描述字体的颜色，取值三种形式： *用英文单词来表示：red,green,blue *使用十六进制的数据表示:#ff0000 *使用RGB三原色表示：RGB(255,255,0) 3.其他标记 标题标记：

,

----------
字体样式标记:字体加粗字体倾斜字体下划线 4.图像标记： 1.图像标记：在网页上引入图片 语法： 常用的属性：src用来引入图片 width用来描述图片的宽度 height用来描述图片的高度 border用来描述图片的边框 注意：图片的路径分为绝对路径和相对路径（同级目录，上级目录，下级目录） 注释标记：<!—图像标记–>，注释标记的内容不回显示在网页上面 ****html描述网页的语言，并不是很严谨的语言，html标记通过被浏览器解析，展示特定的效果。 5.表格标记： 1.表格的作用：将数据更加有条理的显示出来；用来规划网页 2.语法：

03

随机笔记

​ 表格 ​ 加粗 ​ ​ 倾斜 ​ ​ 删除线 ​ ​ 下划线 ​ ​ 盒子 ​

​ 图像 ​ ​ 超链接 ​ targrt="_blank""_self" ​ <href=""> ​ 属性介绍 ​ 标签属性 ​ <id ="two"> 属性介绍 ​ 注释标签 ​ ​ 字符 ​ 空格符 ​   ​ < ​ < ​ > ​ > ​ & ​ & ​ ￥ ​ ¥ ​ © ​ © ​ ® ​ ® ​ ° ​ ° ​ -+ ​ ± ​ * ​ × ​ ​ 表格标签 ​ ​ ​ 展示/显示 数据 ​ 定义表格的标签 ​ ​ 定义表格行 ​ html表头部分 ​ ​ ​ ​ 定义表格行 ​ 定义单元格/内容 加粗 ​ 定义单元格/内容 ​ ​ </tobdy> ​
……
…………
​ ​ ​ left ​ center ​ right ​ border 边框 ​ 1 ​ "" 默认没有边框 ​ 像素值 ​ cellpadding 默认1像素 <-> ​ cellspacing 默认2像素 >-< ​ width 宽度 ​ height 高度 ​ 合并单元格 ​ rowspan 跨行合并 数量 最上侧 ​ colspan 跨列合并 数量 最左侧 列表标签《布局》 ​ 有序 ​ ​
    ​
  1. ​
    2. ​
  2. ​
    3. ​
​ ​ 无序 ​ ​
    ​
  • ​
    • ​
  • ​

    ​

    ​
    • ​
​

03

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券