全部文章/前端开发

前端基础个人博客学习笔记

作者WindRunnerMax 仓库WindRunnerMax/EveryDay ↗ 星标★ 2,263 字数143,693 许可MIT 阅读1

GitHub 原文 ↗

摘要版本库中共有`512`篇文章，总计`103598`行，`1267202`字，`3428039`字符。

EveryDay

GitHub ｜ Timeline ｜ Blog ｜ Blog-SSG ｜ English

勤学如春起之苗，不见其增，日有所长；辍学如磨刀之石，不见其损，日有所亏。

如果觉得还不错，点个star吧 😁

版本库中共有512篇文章，总计103598行，1267202字，3428039字符。

这是一个前端小白的学习历程，如果只学习而不记录点什么那基本就等于白学了。这个版本库的名字EveryDay就是希望激励我能够每天学习，下面的文章就是从2020.02.25开始积累的文章，都是参考众多文章归纳整理学习而写的。文章包括了HTML基础、CSS基础、JavaScript基础与拓展、Browser浏览器相关、Vue使用与分析、React使用与分析、Plugin插件相关、RichText富文本、Patterns设计模式、Linux命令、LeetCode题解等类别，内容都是比较基础的，毕竟我也还是个小白。此外基本上每个示例都是本着能够即时运行为目标的，新建一个HTML文件复制之后即可在浏览器运行或者直接可以在console中运行。

如果想按照笔记顺序进行阅读的话可以查看目录，另外如果想更条理地查看的话可以访问我的博客独立站点。博客同时也是本版本库的gh-pages分支，是作为纯静态页面搭建在Git Pages上的，使用jsdelivr以及cloudflare作为缓存缓解国内访问速度问题。后期还在gh-pages-ssg分支上部署了SSG版本的新版博客，并且借助ChatGPT提供了英文翻译版本，分支是部署在Vercel上来缓解国内访问速度问题。在博客中的内容就相对比较多了，除了学习笔记之外还有一些做项目时的记录以及遇到的坑等。HXDM如果觉得还不错，点个star吧，这个对我真的很重要。

HTML

CSS

JavaScript

Browser

Vue

React

Plugin

RichText

LLMs

Patterns

Linux

MiniProgram

App

NvueWeex

PHP

Java

QQ小程序支付

Security

Environment

IMGProcess

LeetCode

Interview

MyLife

Timeline

前端笔记系列共有 455 篇文章，总计 90599 行， 1084640 字， 2928693 字符。

2021-05-10

第 368 题：MVVM模式

2021-04-01

第 367 题：MVP模式

2021-03-05

第 366 题：MVC模式

2021-02-23

第 365 题：React组件复用的方式

2021-02-22

第 364 题：Vue为何采用异步渲染

2021-02-21

第 363 题：top-系统资源监控

2021-02-20

第 362 题：Rollup的基本使用

2021-02-19

第 361 题：curl-网络数据传输

2021-02-18

第 360 题：ip-网络接口管理

2021-02-17

第 359 题：journalctl-系统日志管理

2021-02-16

第 358 题：systemctl-系统服务管理

2021-02-15

第 357 题：kill-终止进程

2021-02-14

第 356 题：route-网络路由管理

2021-02-13

第 355 题：traceroute-网络路由跟踪

2021-02-12

第 354 题：ifconfig-网络接口管理

2021-02-11

第 353 题：netstat-网络状态管理

2021-02-10

第 352 题：ps-进程状态管理

2021-02-09

第 351 题：Vue3.0新特性

2021-02-08

第 350 题：Shadow DOM的理解

2021-02-07

第 349 题：Event对象

2021-02-06

第 348 题：Js中的位操作符

2021-02-05

第 347 题：深入理解Js中的this

2021-02-04

第 346 题：HTMLElement对象

2021-02-03

第 345 题：CSS实现渐隐渐现效果

2021-02-02

第 344 题：替换后的最长重复字符

2021-02-01

第 343 题：实现三栏布局

2021-01-31

第 342 题：Element对象

2021-01-30

第 341 题：React中组件间通信的方式

2021-01-29

第 340 题：CSS实现展开动画

2021-01-28

第 339 题：Vue中组件间通信的方式

2021-01-27

第 338 题：DOM和BOM的区别

2021-01-26

第 337 题：Navigator对象

2021-01-25

第 336 题：expr-表达式计算

2021-01-24

第 335 题：ReactRouter的实现

2021-01-23

第 334 题：History对象

2021-01-22

第 333 题：实现消息提示组件

2021-01-21

第 332 题：实现文字滚动播放

2021-01-20

第 331 题：React中的合成事件

2021-01-19

第 330 题：Node对象

2021-01-18

第 329 题：React中refs的理解

2021-01-17

第 328 题：Js实用小技巧

2021-01-16

第 327 题：函数式编程的理解

2021-01-15

第 326 题：React中的高阶组件

2021-01-14

第 325 题：浏览器本地存储方案

2021-01-13

第 324 题：React中的纯组件

2021-01-12

第 323 题：Widget模式

2021-01-11

第 322 题：异步模块模式

2021-01-10

第 321 题：汇总区间

2021-01-09

第 320 题：受控组件和非受控组件

2021-01-08

第 319 题：同步模块模式

2021-01-07

第 318 题：tr-转换文件内容

2021-01-06

第 317 题：sort-排序文件内容

2021-01-05

第 316 题：sed-脚本处理文件

2021-01-04

第 315 题：pico-文本编辑程序

2021-01-03

第 314 题：有状态和无状态组件

2021-01-02

第 313 题：滑动窗口最大值

2021-01-01

第 312 题：种花问题

2020-12-31

第 311 题：look-查找字典单词

2020-12-30

第 310 题：最后一块石头的重量

2020-12-29

第 309 题：实现加载提示组件

2020-12-28

第 308 题：等待者模式

2020-12-27

第 307 题：Nginx常用配置

2020-12-26

第 306 题：React组件的state和props

2020-12-25

第 305 题：join-合并文件内容

2020-12-24

第 304 题：参与者模式

2020-12-23

第 303 题：字符串中的第一个唯一字符

2020-12-22

第 302 题：Git与SVN对比

2020-12-21

第 301 题：惰性模式

2020-12-20

第 300 题：SSRF服务器端请求伪造

2020-12-19

第 299 题：React中JSX的理解

2020-12-18

第 298 题：aspell-拼写检查

2020-12-17

第 297 题：买卖股票的最佳时机含手续费

2020-12-16

第 296 题：grep-模式搜索匹配

2020-12-15

第 295 题：单调递增的数字

2020-12-14

第 294 题：简单模板模式

2020-12-13

第 293 题：React虚拟DOM的理解

2020-12-12

第 292 题：fold-折叠文件内容

2020-12-11

第 291 题：Dota2参议院

2020-12-10

第 290 题：fmt-格式化输出内容

2020-12-09

第 289 题：不同路径

2020-12-08

第 288 题：Js将字符串转数字的方式

2020-12-07

第 287 题：防抖节流模式

2020-12-06

第 286 题：Location对象

2020-12-05

第 285 题：React生命周期

2020-12-04

第 284 题：fgrep-固定字符串搜索

2020-12-03

第 283 题：数据访问对象模式

2020-12-02

第 282 题：保持城市天际线

2020-12-01

第 281 题：委托模式

2020-11-30

第 280 题：Js中的逻辑运算符

2020-11-29

第 279 题：Document对象

2020-11-28

第 278 题：Vuex中的核心方法

2020-11-27

第 277 题：ex-文本编辑器

2020-11-26

第 276 题：链模式

2020-11-25

第 275 题：上升下降字符串

2020-11-24

第 274 题：Js中Reflect对象

2020-11-23

第 273 题：解释器模式

2020-11-22

第 272 题：Vuex和普通全局对象

2020-11-21

第 271 题：供暖器

2020-11-20

第 270 题：egrep-正则模式搜索

2020-11-19

第 269 题：Js中Proxy对象

2020-11-18

第 268 题：迭代器模式

2020-11-17

第 267 题：ed-文本编辑器

2020-11-16

第 266 题：根据身高重建队列

2020-11-15

第 265 题：备忘录模式

2020-11-14

第 264 题：Vue常用性能优化

2020-11-13

第 263 题：csplit-分割文件

2020-11-12

第 262 题：按奇偶排序数组II

2020-11-11

第 261 题：Git常用命令

2020-11-10

第 260 题：中介者模式

2020-11-09

第 259 题：最接近原点的K个点

2020-11-08

第 258 题：常见的内存泄漏场景

2020-11-07

第 257 题：服务端渲染SSR的理解

2020-11-06

第 256 题：comm-对比文件内容

2020-11-05

第 255 题：子集II

2020-11-04

第 254 题：Js模块化开发的理解

2020-11-03

第 253 题：访问者模式

2020-11-02

第 252 题：两个数组的交集

2020-11-01

第 251 题：VueRouter导航守卫

2020-10-31

第 250 题：colrm-删除文件内容列

2020-10-30

第 249 题：col-过滤控制字符

2020-10-29

第 248 题：命令模式

2020-10-28

第 247 题：独一无二的出现次数

2020-10-27

第 246 题：valueOf与toString

2020-10-26

第 245 题：责任链模式

2020-10-25

第 244 题：Js中Symbol对象

2020-10-24

第 243 题：Vue路由懒加载

2020-10-23

第 242 题：updatedb-更新文件数据库

2020-10-22

第 241 题：策略模式

2020-10-21

第 240 题：长按键入

2020-10-20

第 239 题：状态模式

2020-10-19

第 238 题：观察者模式

2020-10-18

第 237 题：Js中Date对象

2020-10-17

第 236 题：v-model数据绑定分析

2020-10-16

第 235 题：Js中Currying的应用

2020-10-15

第 234 题：read-读取用户输入

2020-10-14

第 233 题：模板方法模式

2020-10-13

第 232 题：两两交换链表中的节点

2020-10-12

第 231 题：享元模式

2020-10-11

第 230 题：Js中Array对象

2020-10-10

第 229 题：Vue路由History模式分析

2020-10-09

第 228 题：awk-文本处理工具

2020-10-08

第 227 题：反转字符串

2020-10-07

第 226 题：Js中数组空位问题

2020-10-06

第 225 题：组合模式

2020-10-05

第 224 题：桥接模式

2020-10-04

第 223 题：Vue路由Hash模式分析

2020-10-03

第 222 题：scp-安全拷贝文件

2020-10-02

第 221 题：宝石与石头

2020-10-01

第 220 题：Js中Math对象

2020-09-30

第 219 题：装饰器模式

2020-09-29

第 218 题：whereis-查找二进制文件

2020-09-28

第 217 题：Js中Number对象

2020-09-27

第 216 题：代理模式

2020-09-26

第 215 题：Vue中computed分析

2020-09-25

第 214 题：适配器模式

2020-09-24

第 213 题：二叉搜索树中的众数

2020-09-23

第 212 题：cp-复制文件

2020-09-22

第 211 题：外观模式

2020-09-21

第 210 题：domReady的理解

2020-09-20

第 209 题：子集

2020-09-19

第 208 题：Vue父子组件生命周期

2020-09-18

第 207 题：Js中String对象

2020-09-17

第 206 题：单例模式

2020-09-16

第 205 题：翻转二叉树

2020-09-15

第 204 题：原型模式

2020-09-14

第 203 题：建造者模式

2020-09-13

第 202 题：which-输出命令路径

2020-09-12

第 201 题：Vue中数组变动监听

2020-09-11

第 200 题：抽象工厂模式

2020-09-10

第 199 题：工厂方法模式

2020-09-09

第 198 题：简单工厂模式

2020-09-08

第 197 题：组合

2020-09-07

第 196 题：Vue事件绑定原理

2020-09-06

第 195 题：二叉树的层次遍历 II

2020-09-05

第 194 题：umask-设置文件权限掩码

2020-09-04

第 193 题：二叉树的所有路径

2020-09-03

第 192 题：CDN缓存的理解

2020-09-02

第 191 题：Js中RegExp对象

2020-09-01

第 190 题：SPA单页应用的优缺点

2020-08-31

第 189 题：CSS实现图形效果

2020-08-30

第 188 题：实现拼图滑动验证码

2020-08-29

第 187 题：touch-创建新文件

2020-08-28

第 186 题：tmpwatch-删除未访问文件

2020-08-27

第 185 题：使括号有效的最少添加

2020-08-26

第 184 题：电话号码的字母组合

2020-08-25

第 183 题：平衡二叉树

2020-08-24

第 182 题：tee-文件内容分流

2020-08-23

第 181 题：对keep-alive组件的理解

2020-08-22

第 180 题：split-分割文件

2020-08-21

第 179 题：二叉树的最小深度

2020-08-20

第 178 题：rm-删除文件

2020-08-19

第 177 题：叶子相似的树

2020-08-18

第 176 题：rcp-远程文件拷贝

2020-08-17

第 175 题：patch-修补生成文件

2020-08-16

第 174 题：$router和$route的区别

2020-08-15

第 173 题：提莫攻击

2020-08-14

第 172 题：paste-合并文件内容

2020-08-13

第 171 题：数组中的第K个最大元素

2020-08-12

第 170 题：od-读取文件内容

2020-08-11

第 169 题：被围绕的区域

2020-08-10

第 168 题：mv-移动文件

2020-08-09

第 167 题：Vue中diff算法的理解

2020-08-08

第 166 题：一次编辑

2020-08-07

第 165 题：more-分页输出文件内容

2020-08-06

第 164 题：mktemp-创建临时文件

2020-08-05

第 163 题：有效的括号字符串

2020-08-04

第 162 题：mc-文件管理器

2020-08-03

第 161 题：字符串相加

2020-08-02

第 160 题：Vue中虚拟DOM的理解

2020-08-01

第 159 题：chattr-更改文件属性

2020-07-31

第 158 题：lsattr-显示文件属性

2020-07-30

第 157 题：locate-快速查找文件

2020-07-29

第 156 题：环形数组循环

2020-07-28

第 155 题：less-分页输出文件内容

2020-07-27

第 154 题：ln-创建文件链接

2020-07-26

第 153 题：Vue中$refs的理解

2020-07-25

第 152 题：cut-截取文件内容

2020-07-24

第 151 题：除数博弈

2020-07-23

第 150 题：find-查找文件

2020-07-22

第 149 题：file-探测文件类型

2020-07-21

第 148 题：最长公共前缀

2020-07-20

第 147 题：diffstat-文件差异计量

2020-07-19

第 146 题：v-if与v-show的区别

2020-07-18

第 145 题：插入、删除和获取元素

2020-07-17

第 144 题：diff-对比文件差异

2020-07-16

第 143 题：cmp-文件差异状态

2020-07-15

第 142 题：全排列II

2020-07-14

第 141 题：chown-更改文件所有者

2020-07-13

第 140 题：两个数组的交集II

2020-07-12

第 139 题：MVVM模式的理解

2020-07-11

第 138 题：chmod-更改文件权限

2020-07-10

第 137 题：路径总和

2020-07-09

第 136 题：cat-输出文件内容

2020-07-08

第 135 题：跳水板

2020-07-07

第 134 题：Js创建对象的方式

2020-07-06

第 133 题：实现毛玻璃效果

2020-07-05

第 132 题：Attribute和Property的区别

2020-07-04

第 131 题：字母移位

2020-07-03

第 130 题：Vue中$nextTick的理解

2020-07-02

第 129 题：GET和POST的区别

2020-07-01

第 128 题：null和undefined的区别

2020-06-30

第 127 题：CSS常用单位

2020-06-29

第 126 题：常见的兼容性问题

2020-06-28

第 125 题：长度最小的子数组

2020-06-27

第 124 题：data为何以函数形式返回

2020-06-26

第 123 题：栈排序

2020-06-25

第 122 题：矩阵置零

2020-06-24

第 121 题：顶端迭代器

2020-06-23

第 120 题：二进制求和

2020-06-22

第 119 题：括号生成

2020-06-21

第 118 题：全排列

2020-06-20

第 117 题：async/await剖析

2020-06-19

第 116 题：Thunk函数的使用

2020-06-18

第 115 题：display的值及作用

2020-06-17

第 114 题：HTML与XHTML区别

2020-06-16

第 113 题：Vue数据双向绑定

2020-06-15

第 112 题：模板语法的简单实现

2020-06-14

第 111 题：强缓存与协商缓存

2020-06-13

第 110 题：深入理解Js数组

2020-06-12

第 109 题：如何避免FOUC

2020-06-11

第 108 题：CSS隐藏元素的方法

2020-06-10

第 107 题：可替换元素和非替换元素

2020-06-09

第 106 题：Vue中key的作用

2020-06-08

第 105 题：DNS解析过程

2020-06-07

第 104 题：Js文件异步加载

2020-06-06

第 103 题：文本溢出截断省略

2020-06-05

第 102 题：默认行为及阻止

2020-06-04

第 101 题：Vue生命周期

2020-06-03

第 100 题：XML和JSON的比较

2020-06-02

第 99 题：300ms点击延迟

2020-06-01

第 98 题：Js中fetch方法

2020-05-31

第 97 题：Js捕获异常的方法

2020-05-30

第 96 题：Object对象

2020-05-29

第 95 题：SSO单点登录

2020-05-28

第 94 题：Set与WeakSet

2020-05-27

第 93 题：Web Worker

2020-05-26

第 92 题：Map与WeakMap

2020-05-25

第 91 题：OAUTH开放授权

2020-05-24

第 90 题：实现浅拷贝与深拷贝

2020-05-23

第 89 题：Float浮动

2020-05-22

第 88 题：Position定位

2020-05-21

第 87 题：实现图片懒加载

2020-05-20

第 86 题：Js的GC机制

2020-05-19

第 85 题：防抖与节流

2020-05-18

第 84 题：Js中的堆栈

2020-05-17

第 83 题：浏览器窗口间通信

2020-05-16

第 82 题：块级格式化上下文

2020-05-15

第 81 题：实现瀑布流布局

2020-05-14

第 80 题：getter与setter

2020-05-13

第 79 题：Js实现链表操作

2020-05-12

第 78 题：defineProperty

2020-05-11

第 77 题：Js实现数组排序

2020-05-10

第 76 题：OSI七层模型

2020-05-09

第 75 题：图片等比例缩放方案

2020-05-08

第 74 题：手动实现Promise

2020-05-07

第 73 题：Window对象

2020-05-06

第 72 题：Js获取数据类型

2020-05-05

第 71 题：响应式布局的实现

2020-05-04

第 70 题：行内元素和块级元素

2020-05-03

第 69 题：Js遍历对象总结

2020-05-02

第 68 题：微信小程序实现原理

2020-05-01

第 67 题：手动实现apply call bind

2020-04-30

第 66 题：HTTP协议发展历程

2020-04-29

第 65 题：Js箭头函数

2020-04-28

第 64 题：RESTful架构与RPC架构

2020-04-27

第 63 题：CSS3新特性

2020-04-26

第 62 题：HTML5新特性

2020-04-25

第 61 题：Js严格模式

2020-04-24

第 60 题：浏览器页面呈现过程

2020-04-23

第 59 题：Function与Object

2020-04-22

第 58 题：前端性能优化方案

2020-04-21

第 57 题：CSS引入方式

2020-04-20

第 56 题：浏览器事件

2020-04-19

第 55 题：Js继承的实现方式

2020-04-18

第 54 题：Js数组操作

2020-04-17

第 53 题：TCP与UDP异同

2020-04-16

第 52 题：Js异步机制

2020-04-15

第 51 题：Canvas基础

2020-04-14

第 50 题：SVG基础

2020-04-13

第 49 题：作用域与作用域链

2020-04-12

第 48 题：TCP三次握手

2020-04-11

第 47 题：let与const

2020-04-10

第 46 题：Js模块化导入导出

2020-04-09

第 45 题：分布式SESSION一致性

2020-04-08

第 44 题：Json Web Token

2020-04-07

第 43 题：Table布局

2020-04-06

第 42 题：Grid布局

2020-04-05

第 41 题：手动实现轮播图

2020-04-04

第 40 题：Flex布局

2020-04-03

第 39 题：JavaScript选择器

2020-04-02

第 38 题：Js中==与===

2020-04-01

第 37 题：Generator函数

2020-03-31

第 36 题：async/await

2020-03-30

第 35 题：Promise对象

2020-03-29

第 34 题：对称加密与非对称加密

2020-03-28

第 33 题：Js遍历数组总结

2020-03-27

第 32 题：HTTPS加密传输过程

2020-03-26

第 31 题：HTML节点操作

2020-03-25

第 30 题：new运算符

2020-03-24

第 29 题：CSS劫持攻击

2020-03-23

第 28 题：HTTP协议概述

2020-03-22

第 27 题：JS中this的指向

2020-03-21

第 26 题：函数声明与函数表达式

2020-03-20

第 25 题：CSS样式优先级

2020-03-19

第 24 题：Iframe框架及优缺点

2020-03-18

第 23 题：JS事件流模型

2020-03-17

第 22 题：事件冒泡及阻止

2020-03-16

第 21 题：浏览器重绘与回流

2020-03-15

第 20 题：浏览器渲染与内核

2020-03-14

第 19 题：apply、call、bind

2020-03-13

第 18 题：匿名函数与自执行函数

2020-03-12

第 17 题：JS变量提升

2020-03-11

第 16 题：JavaScript闭包

2020-03-10

第 15 题：LocalStorage与SessionStorage

2020-03-09

第 14 题：Cookie与Session

2020-03-08

第 13 题：CSS选择器

2020-03-07

第 12 题：原型与原型链

2020-03-06

第 11 题：CSS盒子模型

2020-03-05

第 10 题：SQL注入攻击

2020-03-04

第 9 题：CSRF跨站请求伪造

2020-03-03

第 8 题：XSS跨站脚本攻击

2020-03-02

第 7 题：ES6新特性

2020-03-01

第 6 题：CSS伪类与伪元素

2020-02-29

第 5 题：HTML语义化

2020-02-28

第 4 题：跨域问题与解决方案

2020-02-27

第 3 题：手动实现一个简单的AJAX

2020-02-26

第 2 题：CSS实现一个垂直居中布局

2020-02-25

第 1 题：HTML声明的DOCTYPE

DOCTYPE

DOCTYPE是document type(文档类型)的简写，在web设计中用来说明使用的XHTML或者HTML是什么版本。 HTML5 不基于 SGML，所以不需要引用 DTD。

<!DOCTYPE html>声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

    </body>
</html>

在HTML 4.01中，<!DOCTYPE>声明引用DTD，因为HTML 4.01基于SGML。 DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

其中的DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据定义的DTD来解释你页面的标识，并展现出来。

要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择

过渡的Transitional：要求非常宽松的DTD，它允许继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格的Strict：要求严格的DTD，不能使用任何表现层的标识和属性，例如<br>，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的Frameset：专门针对框架页面设计使用的DTD，如果页面中包含有框架，需要采用这种DTD，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

每日一题

https://github.com/WindrunnerMax/EveryDay

HTML语义化

语义化可以总结为根据内容选择标签，用最恰当的标签来标记内容。例如网页中的标题使用<h1>~<h6>这样的标签，而不是使用<div>+css。

语义化好处

使HTML结构变得清晰，有利于维护代码和添加样式。
通常语义化HTML会使代码变的更少，使页面加载更快。
即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构。
便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫可以依赖于标签来确定上下文和各个关键字的权重。

注意语义化编写

尽可能少的使用无语义的标签<div>和<span>。
不要使用纯样式标签，如<b>是纯样式标签，而<strong>的语义为加粗。
在<lable>标签中设置for来让说明文本和相对应的<input>关联起来。
表单域要用<fieldset>标签包起来，并用<legend>标签说明表单的用途。
需要强调的文本，可以包含在strong或者em标签中，<strong>默认样式是加粗，<em>是斜体。
使用表格时，标题要用<caption>，表头用<thead>，主体部分用<tbody>包围，尾部用<tfoot>包围。表头和一般单元格要区分开，表头用<th>，单元格用<td>。

常用语义化标签

<h1>~<h6> 定义页面的标题，<h1>-<h6>元素等级依次降低。
<header> 页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav> 提供当前文档内或其他文档的导航链接，导航部分的常见示例是菜单，目录和索引。
<main> 主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。
<article> 专注于单个主题的博客文章，报纸文章或网页文章。
<address> 提供了一个或多个人员或组织的联系信息。
<section> 定义文档中的节，表示HTML文档中包含的独立部分。
<aside> 表示文档的一部分，其内容仅与文档的主要内容间接相关,通常显示为侧边栏。
<footer> 定义文档的底部区域，通常包含文档的作者，著作权信息，联系信息等。
<hgroup> 表示文档部分的多级标题，它对一组<h1>~<h6>元素进行分组。
<ul> 表示项目的无序列表，通常呈现为项目符号列表。
<ol> 表示项目的有序列表，通常呈现为编号列表。
<li> 表示列表中的项目。
<strong> 表示强调突出重点内容，浏览器通常以粗体显示内容。
<em> 标记强调重点的文本，可以嵌套<em>元素，嵌套的每个级别都表示强调程度更高。
<small> 代表旁注和小字体，例如版权和法律文本，独立于其样式表示。
<abbr> 表示缩写或首字母缩写词。
<cite> 用于描述对引用的创意作品的引用，并且必须包括该作品的标题。
<figure> 表示独立的内容，可能带有可选的标题，该标题使用<figcaption>元素指定。
<figcaption> 表示说明其父<figure>元素的其余内容的标题或图例。
<blockquote> 定义块引用，可以使用<cite>元素提供文本表示
<mark> 表示被标记或突出显示以供参考或标记目的的文本。
<time> 表示特定的时间。
<date> 表示特定的日期。
<dfn> 用于表示在定义短语或句子的上下文中定义的术语。
<code> 计算机代码的简短片段的方式显示其内容的样式。
<samp> 输出的示例或引用的内联文本或样本文本。
<kbd> 表示文本是从键盘上键入的，它经常用在与计算机相关的文档或手册中。
<del> 表示已从文档中删除的文本范围。
<ins> 表示已添加到文档中的文本范围。
<menu> 表示用户可以执行或激活的一组命令，例如上下文菜单等。
<dialog> 表示对话框或其他交互式组件，例如检查器或子窗口。
<summary> 元素为<details>元素的显示框指定摘要，标题或图例。
<details> 描述文档或文档某个部分的细节。
<bdi>: 允许设置一段文本，使其脱离其父元素的文本方向设置。
<progress>: 定义任何类型的任务的进度。
<ruby>: 定义ruby注释（中文注音或字符）。
<rt>: 定义字符（中文注音或字符）的解释或发音。
<rp>: 在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容。
<wbr>: 规定在文本中的何处适合添加换行符。
<meter>: 定义度量衡，仅用于已知最大和最小值的度量。

弃用的HTML元素

这些是旧的HTML元素，已弃用，不应继续使用。不要在新项目中使用它们，应尽快在旧项目替换它们，即使它们现在依然可以使用。

<acronym>、<applet>、<basefont>、<bgsound>、<big>、<blink>、<center>、<command>、<content>、<dir>、<element>、<font>、<frame>、<frameset>、<image>、<isindex>、<keygen>、<listing>、<marquee>、<menuitem>、<multicol>、<nextid>、<nobr>、<noembed>、<noframes>、<plaintext>、<shadow>、<spacer>、<strike>、<tt>、<xmp>。

每日一题

https://github.com/WindrunnerMax/EveryDay

Cookie与Session

会话跟踪是Web程序中常用的技术，HTTP协议是无状态的，确定用户身份就需要跟踪用户的整个会话。最常用的会话跟踪是使用Cookie与Session，简单来说Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。

由于HTTP协议是无状态的，一旦数据交换完毕，此次链接就会关闭，再次交换数据就需要重新连接，意味着服务器无法从链接上跟踪会话。假如A与B同时购买了一件商品，不进行会话跟踪的话服务器就无法判断究竟是谁购买了此商品。服务端为进行会话跟踪，给每个客户端颁发一个通行证，每个人访问必须携带通行证，这样服务端就能区别用户身份了。 Cookie实际上是一小段的文本信息，服务端将需要通行证信息Cookie发送到浏览器，浏览器将通行证存储起来，并且对于同源的每个请求都会自动携带通行证信息(CSRF跨站请求伪造基于此策略)，于是服务端就可以判断用户身份。

Session

Session是服务器端使用的一种记录客户端状态的机制，相应的也增加了服务器的存储压力。对于客户端的每个会话，都有一个唯一的SESSION ID与其对应，服务端将用户数据存储进SESSION ID对应的文件或者是内存中，只要客户端每次请求将SESSION ID交予服务端，服务端就能区别用户进行会话跟踪。

实例

仅使用Cookie

仅使用cookie而不使用session进行用户身份跟踪，服务端将所有的用户数据信息告知浏览器，浏览器进行存储，每次请求将数据发送到服务端。此种方式理论上可行，但是相对并不安全，尤其是在用户数据信息未加密的情况下，若是被中间人攻击则用户的数据信息将全部被泄露，或者用户自身将浏览器数据进行修改进行请求伪造，伪造他人身份访问服务器等，此外不同浏览器对于同一域Cookie的大小(一般为4KB左右)与数量都有限制，将用户数据都存储于Cookie可能会有空间或数量不够的情况。

仅使用Session

仅使用session而不使用Cookie进行用户身份跟踪，由于使用Session在客户端仅需要一个SESSION ID传输到服务端就能进行会话跟踪，所以实现比较简单，可以通过对所有的URL后拼接一个SESSION ID或者对于每个表单设置一个隐藏的input用以存储SESSION ID进行提交，服务器就可以进行会话跟踪，由于数据是存储在服务端，相对比较安全，且存储量大小完全取决于服务端，可以较好控制。

结合使用

现在普遍使用的方式就是将COOKIE与SESSION结合使用，直接将SESSION ID存储于COOKIE中，浏览器自动将同源的COOKIE携带在请求头中，进行会话跟踪，这样既不需要在COOKIE中存储大量信息，也不需要对每次请求都需要操作附带SESSION ID。浏览请求头中Cookie字段的JSESSION ID=XXXXXXXXXXXXXXXXXXX就是Java默认的SESSION ID，PHPSESSID=XXXXXXXXXXXXXXXXXXXXXXXXXX就是PHP默认的SESSION ID。

差异

存储位置

Cookie将数据存储在浏览器，Session则将数据存储在服务端。

类型

Cookie是存储的String类型，Session在服务端则是Object类型。

安全

Cookie在客户端用户可以进行修改伪造，Session在服务端用户无法进行直接的修改伪造。

作用域

Cookie由于浏览器的同源策略，只有同源的情况下才会发送，Session在服务端理论上可以进行多域共享。

存储大小

Cookie大小由浏览器限制，一般不超过4KB，Session在服务端大小可以灵活控制。

每日一题

https://github.com/WindrunnerMax/EveryDay

LocalStorage与SessionStorage

localStorage与sessionStorage

localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案。

相同点

都与HTTP无关，是HTML5提供的标准，当发起HTTP请求时不会与Cookie一样自动携带。
都是以键值对的形式存在，即Key-Value形式，常用的Api也相同。
存储类型都是String类型，当进行存储时，会调用toString()方法转为String类型。
对于每个域容量是有限的，不同浏览器不一样，大部分存储为5M左右。

不同点

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
SessionStorage会在用户关闭浏览器后，即会话结束后，数据失效；SessionStorage与服务端Session无关。

常用操作

储存数据

localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
/**
 * 由于存储数据会调用 toString() 方法
 * Object 类型会存储为 [object Object] 字符串
 * 所以进行存储时需调用 JSON.stringify() 转化为字符串
 * 取出时调用 JSON.parse() 将字符串转回对象
 */

读取数据

localStorage.getItem('key');
sessionStorage.getItem('key');

删除数据

localStorage.removeItem('key');
sessionStorage.removeItem('key');

清空数据

localStorage.clear();
sessionStorage.clear();

每日一题

https://github.com/WindrunnerMax/EveryDay

Iframe框架及优缺点

iframe框架及优缺点

HTML5不再支持使用frame，关于frame与iframe的区别，可以参阅 iframe与frame的区别。

基本使用

src：规定在iframe中显示的文档的URL。
frameborder：规定是否显示框架周围的边框。
scrolling：规定是否在iframe中显示滚动条。
width：规定iframe的宽度，建议使用CSS替代。
height：规定iframe的高度，建议使用CSS替代。
sandbox：启用一系列对iframe中内容的额外限制。
marginwidth：定义iframe的左侧和右侧的边距。
marginheight：定义iframe的顶部和底部的边距。
srcdoc：规定在iframe中显示的页面的HTML内容。
align：规定如何根据周围的元素来对齐此框架，建议使用样式替代。

使用场景

加载其他域的网页

`是允许跨域请求资源的，但是不能够修改，由此可以在网页中嵌套其他网页，如需要跨域通信的话，需要考虑document.domain、window.name、window.postMessage`。

典型系统结构

典型的系统结构，左侧是功能树，上部为个人信息，右侧就是实际功能，使用iframe将功能单独分离出来，当然也可以使用vue和react进行实现。

实现Ajax

可以使用iframe进行实现异步请求发送，来模拟Ajax的请求操作，Ajax的异步请求完成操作为XHR.readyState === 4执行callback，iframe使用iframe.onload执行callback，还可以实现一个轮询长连接。

加载广告

广告是与原文无关的，假如硬编码进去，会造成网页布局的紊乱,而且这样势必需要引入额外的css和js文件，极大的降低了网页的安全性，使用iframe便可以解决这些问题。

提交表单

可以使用iframe提交表单来避免整个页面的刷新，还可以实现无刷新文件上传的操作。

优缺点

优点

可以跨域请求其他网站，并将网站完整展示出来。
典型系统结构可以提高代码的复用性。
创建一个全新的独立的宿主环境，可以隔离或者访问原生接口及对象。
模块分离，若多个页面引用同一个iframe，则便于修改操作。
实现广告展示的一个解决方案。
若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面。

缺点

iframes阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件，动态设置src可解决这个问题。
加载了新页面，增加了css与js文件的请求，即额外增加了HTTP请求，增加了服务器负担。
有时iframe由于页面挤占空间的原因出现滚动条，造成布局混乱。
不利于SEO，搜索引擎的爬虫无法解读iframe的页面。
有些小型的移动设备如手机等无法完全显示框架，兼容性较差。
iframe与主页面是共享链接池的，若iframe加载时用光了链接池，则会造成主页面加载阻塞。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.zhihu.com/question/20653055
https://www.cnblogs.com/hq233/p/9849939.html
https://blog.csdn.net/baxiadsy_csdn/article/details/86245809

HTML节点操作

HTML节点的基本操作，添加节点，替换节点，删除节点，绑定事件，访问子节点，访问父节点，访问兄弟节点。文档对象模型Document Object Model，简称DOM，是W3C组织推荐的处理可扩展标记语言XML的标准编程接口，是一种与平台和语言无关的应用程序接口API。根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。HTML DOM将HTML文档视作树结构。这种结构被称为节点树：HTML DOM Tree实例。

添加节点

    <div id="t1"></div>

替换节点

    <div id="t2">
        <div>被替换的节点</div>
    </div>

删除节点

    <div id="t3">
        <div>下边的兄弟被删除了</div>
        <div>我要被删除了</div>
    </div>

绑定事件

    <div id="t4" style="color: red;">点我</div>

    

<!-- 事件流模型见 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/JS%E4%BA%8B%E4%BB%B6%E6%B5%81%E6%A8%A1%E5%9E%8B.md#dom0%E7%BA%A7%E6%A8%A1%E5%9E%8B -->

访问子节点

    <div id="t5" style="color: grey;">
        <div>1</div>
        <div>2</div>
    </div>

访问父节点

    <div style="color: yellow;">
        <div id="t6">1</div>
    </div>

访问兄弟节点

    <div style="color: brown;"><div>1</div><div id="t7">2</div><div>3</div></div>

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>HTML节点操作</title>
    
</head>
<body>

    <div id="t1"></div>

    



    <div id="t2">
        <div>被替换的节点</div>
    </div>

    



    <div id="t3">
        <div>下边的兄弟被删除了</div>
        <div>我要被删除了</div>
    </div>

    



    <div id="t4" style="color: red;">点我</div>

    
    <!-- 事件流模型见 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/JS%E4%BA%8B%E4%BB%B6%E6%B5%81%E6%A8%A1%E5%9E%8B.md#dom0%E7%BA%A7%E6%A8%A1%E5%9E%8B -->



    <div id="t5" style="color: grey;">
        <div>1</div>
        <div>2</div>
    </div>

    



    <div style="color: yellow;">
        <div id="t6">1</div>
    </div>

    



    <div style="color: brown;"><div>1</div><div id="t7">2</div><div>3</div></div>

    
</body>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

手动实现轮播图功能

手动实现轮播图

使用纯HTML、CSS、JavaScript实现轮播图功能。

position

使用position的绝对定位与相对定位实现轮播图，首先将图片全部拼接成为一行，使用overflow: hidden;将其他图片隐藏，将这一行图片加入定时任务不断进行左移，从而只显示中间的图片，对于边缘特殊处理，将第一张轮播图追加到一行图片之后，当切换到最后一张轮播图时，下一张即播放第一张图，当此图轮播完成后，将所有图片归位，提供两个DEMO，第一个是单纯的轮播不存在任何控制按钮，第二个则比较完善。

实例

<!-- 
    简单DEMO，未实现任何控制，单纯图片轮播 
-->

<!DOCTYPE html>
<html>
<head>
    <title>轮播图</title>
    
    
</head>

<body>
    <!-- 轮播图容器 -->
    <div id="carousel">
        <ul> <!-- 图片容器 -->
            <li>
                <img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
            </li>
            <li>
                <img src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
            </li>
            <li>
                <img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
            </li>
            <li>
                <img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
            </li>
        </ul>
    </div>
</body>
    
</html>

<!-- 
    加入控制按钮，上一张与下一张，直接切换按钮
    将第一张图片的边缘化进行处理
    对浏览器页面显隐与鼠标移入移出事件的支持
-->

<!DOCTYPE html>
<html>
<head>
    <title>轮播图</title>
    
    
</head>


<body>
    <!-- 轮播图容器 -->
    <div id="carousel">
        <ul> <!-- 图片容器 -->
            <li>
                <img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
            </li>
            <li>
                <img src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
            </li>
            <li>
                <img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
            </li>
            <li>
                <img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
            </li>
        </ul>
        <!-- 按钮组 -->
        <div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->        
        <div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 --> 
        <div id="sliderBtn"></div> <!-- 切换按钮组 -->
    </div>
</body>
    
</html>

opacity

首先通过对图片绝对定位来使图片堆叠，通过使用opacity来控制图片的显示与隐藏，即不使用Js控制轮播图的切换动画，而使用CSS动画来完成，由于是堆叠完成的，使用z-index也是可行的方案。

实例

<!DOCTYPE html>
<html>
<head>
    <title>轮播图</title>
    
    
</head>


<body>
    <!-- 轮播图容器 -->
    <div id="carousel">
        <img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
        <img src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
        <img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
        <img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
        <!-- 按钮组 -->
        <div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->        
        <div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 --> 
        <div id="sliderBtn"></div> <!-- 切换按钮组 -->
    </div>
</body>
    
</html>

CSS

纯CSS实现轮播图，完全使用CSS3动画完成轮播，主要使用animation属性与@keyframes规则，使用left控制距离，也可以使用opacity，为每个图片设置动画属性即可。

实例

<!DOCTYPE html>
<html>
<head>
    <title>轮播图</title>
    
    
</head>


<body>
    <!-- 轮播图容器 -->
    <div id="carousel">
        <ul> <!-- 图片容器 -->
            <li>
                <img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
            </li>
            <li>
                <img src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
            </li>
            <li>
                <img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
            </li>
            <li>
                <img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
            </li>
        </ul>
    </div>
</body>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

Canvas基础

HTML5中引入<canvas>标签，用于图形的绘制，<canvas>为图形的绘制提供了画布，是图形容器，具体的图形绘制由JavaScript来完成。

实例

<!-- 绘制冒泡效果 -->
<!DOCTYPE html>
<html>
<head>
    <title>Canvas</title>
</head>

<body>
    <canvas id="canvas" width="500" height="300" ></canvas>
    <!-- 不建议使用css控制常宽，因为如果设置的宽高与初始比例 300:150 不同，有可能出现扭曲的现象 -->
    <!-- 假如浏览器不支持canvas可以直接 <canvas>您的浏览器不支持canvas</canvas> 浏览器会渲染替代内容 -->
</body>

</html>

CANVAS与SVG

svg

不依赖分辨率。
支持事件处理器。
不适合游戏应用。
SVG是使用XML来描述图形。
最合适带有大型渲染区域的应用程序，如谷歌地图等。
复杂度高会减慢渲染的速度，任何过度使用DOM的应用都不快。
以单个文件的形式独立存在，后缀名.svg，可以直接在html中引入。
SVG是基于XML的，这也就是说SVG DOM中的每个元素都是可用的，可以为某个元素附加JavaScript事件处理器。
在SVG中，每个被绘制过的图形均视为对象，如果SVG对象的属性发生变化，那么浏览器可以自行重现图形。

canvas

依赖分辨率。
文本渲染力弱。
不支持事件处理器。
Canvas是逐像素进行渲染的。
Canvas是通过JavaScript来绘制图形。
能够以.png或.jpg的格式保存结果图形。
最合适图像密集型的游戏，其中许多的对象会被频繁的重绘。
Canvas中一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生变化，那么就需要重新来绘制图形，其中包括任何或已经被图形覆盖的对象。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.runoob.com/tags/ref-canvas.html
https://www.runoob.com/w3cnote/html5-canvas-intro.html

前端性能优化方案

前端资源比较庞大，包括HTML、CSS、JavaScript、Image、Flash、Media、Font、Doc等等，前端优化相对比较复杂，对于各种资源的优化都有不同的方式.按粒度大致可以分为两类，第一类是页面级别的优化，例如减小HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等，第二类则是代码级别的优化，例如JavaScript中的DOM操作优化、图片优化以及HTML结构优化等等。在用户角度前端优化可以让页面加载得更快，对用户的操作响应得更及时，能够给用户提供更为友好的体验，在服务商角度前端优化能够减少页面请求数，减小请求所占带宽，能够节省服务器资源。

减少HTTP请求

加载前端的大部分时间在于下载各种资源，浏览器对于同一个服务器的HTTP请求连接池数量也是有限的，对于过多的请求需要排队等候。最小化HTTP请求减少请求次数可以防止HTTP连接池被占满，同时也能避免过多HTTP链接时的TCP握手造成的时间消耗。

CSS Sprite

CSS Sprite也就是俗称的雪碧图，将多张图片合并到一张图片中，可以减少图片的数量，此外由于合并图片相对分开的图片减少了存储信息的开销如颜色表和格式信息等，合并图片后的大小比分开的图片的大小的总和要趋于更小。

当然如果合并图片时有大量空白来分隔原来的单个图片那么其大小会趋于更大。使用雪碧图，需要使用CSS的background-image和background-position属性显示所需的图像段。

Image maps

假如网站有很多带链接的图片例如地图应用等，那么图片映射image maps将是一个很好的选择，image maps允许在单张图片上有很多带链接的图片，通过<map>与<area>来将一张完整的图片映射分割为多个区域来制作不同的链接，同样是可以减少图片的HTTP请求链接数量。

Inline images

通过使用data:URL方案来直接将图像数据嵌入到页面或者CSS中，虽然这会增加文档或者是CSS文件的大小。但同样这确实是一个减少HTTP请求数量的方案，对于data:URL的格式为data:[<mediatype>][;base64],<data>。

Font icon

使用字体图标来代替图标，将多个图标合成为字体图标不仅可以减少对于图片的HTTP请求数量与图标大小，还作为矢量图对于放大缩小等操作不会失真。此外字体图标的优点还包括其很容易改变颜色、产生阴影、透明效果等，可以得到CSS的很好的支持从而制作各种样式、旋转和动画效果等。

Combined files

Combined files也就是合并文件，将多个CSS文件或者JavaScript文件合并成一个CSS文件或者JavaScript文件，可以有效减少HTTP请求数量，并且可以通过压缩算法减小文件的大小。当脚本和样式表在页面之间变化时，组合文件可能会变得难以阅读和修改，但是将其作为发布过程的一部分可以缩短响应时间。

利用缓存机制

缓存控制

通过服务器端设置响应头的Expires与Cache-Control来设置资源组件过期时间以及过期策略，对于静态资源可以通过设置Expires为一个长期时间来实现永不过期策略，对于动态组件通过Cache-Control指定缓存机制来辅助浏览器处理条件请求。

外部引用

将JavaScript与CSS设置为外部文件引入而不是直接嵌入到HTML中，由于浏览器的缓存机制，外部文件可以通过浏览器的缓存引入而不需要每次请求重复请求同一个资源文件，这样就使得浏览器在第二次打开页面的速度会快得多，当然全部由外部文件引入的方式会增加HTTP请求数量。

所以外部引用的关键问题就在于如何权衡相对于HTML文档数量而言，缓存外部JavaScript与CSS文件的数量，尽管难以量化，但可以使用各种度量标准来衡量此因素，网站上的用户每个会话具有多个页面视图，并且许多页面都重复使用相同的脚本和样式表，则缓存的外部文件会带来更大的潜在利益。

优化资源加载

样式表位置

根据浏览器渲染的顺序，将CSS在<head>中引入或者嵌入，相对于将CSS放到<body>或者页面底部来说，可以使页面渲染速度加快，这对于页面内容比较丰富的网站或者网络链接较慢时相当重要。

假如将样式表放置于底部，就会导致浏览器还未加载样式表就开始渲染页面，无法渐进式渲染页面而直接从无样式状态立即跳转到有样式状态，用户体验较差。此外有些浏览器可能会在CSS下载完成后才开始渲染页面，样式表放在下方会导致页面渲染推迟。

脚本位置

浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外部引入JavaScript脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载，原因之一是Js可能会改变页面或者改变Js间的依赖关系，例如A.js中用document.write改变页面，B.js依赖A.js。

因此要严格保证顺序，不能并行下载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。此外当浏览器发现Js脚本时浏览器会立即开始解析脚本，并停止解析文档，因为脚本有可能会改动DOM与CSS，继续解析会浪费资源。解决这些问题的方法有很多例如异步加载脚本等，而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载与页面渲染的影响。

优化代码方案

避免CSS表达式

CSS表达式通过expression方法来接受JavaScript表达式，是一种动态设置CSS的强大的方式，但同样也是非常危险的方式，CSS表达式的问题在于其会进行频繁的计算，CSS计算的频率要远远超出我们的想象，不仅在页面显示和缩放时会进行计算，在页面滚动或者移动鼠标都会重新计算一次，从而影响到页面的性能。

可以通过使用Js将属性进行一次算来并赋值给样式属性，也就是一次性表达式，如果必须在页面的整个生命周期中动态设置样式属性，则可以使用事件处理程序代替CSS表达式。如果必须使用CSS表达式，需要注意它们可能会被计算数千次，并且很可能会影响页面的性能。

避免重定向

尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验。如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向。因为如果使用302，则每一次访问http，都会被重定向到https的页面，而永久重定向，在第一次从http重定向到https之后就会被浏览器记住，每次访问http，会直接返回https的页面。

最小化操作DOM

JavaScript操作DOM无可避免的会触发浏览器的重绘或者回流，由于重绘和回流可能代价比较昂贵，因此最好就是可以减少它的发生次数，为了减少发生次数，我们可以合并多次对DOM和样式的修改，然后一次处理掉，或者将样式事先设计好，动态去改变class。

或者采用离线修改DOM的方案，使用documentFragment对象在内存里操作DOM，在内存中的DOM修改就是让元素脱离文档流，当然是不会触发重绘的，将对DOM的所有修改批量完成，想怎么改就怎么改，然后将节点再放入文档流中，只触发一次回流。

压缩资源文件

Gzip

从HTTP / 1.1开始，客户端可以通过使用HTTP请求中的Accept-Encoding: gzip, deflate来指示对压缩的支持。如果服务器在请求中看到此标头，则可以使用客户端列出的方法之一压缩响应，服务器通过响应中的Content-Encoding: gzip通知客户端采用gzip压缩。Gzip的压缩率很高，是目前最流行，最有效的压缩方法，它由GNU项目开发，并由RFC 1952标准化。

压缩外部文件

压缩JavaScript和CSS文件，从代码中删除不必要的字符以减小其大小，从而缩短加载时间，当代码最小化时，所有注释以及不需要的空白字符都将被删除，由于减小了下载文件的大小，因此可以提高响应时间性能。

优化网络请求

CDN

CDN的全称是Content Delivery Network，即内容分发网络，CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

当用户处于跨地域的多个位置时，对于服务器响应速度的感知是有差别的，用户访问网站的绝大部分时间都是处于下载静态资源状态的，将这些静态资源首先分发到CDN各服务器，可以大大缩短响应时间，CDN可以根据用户网络状态信息来选择网络跳数最少的服务器或响应最快的服务器来就近交予用户资源。

DNS预解析

当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址。

DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度。若是提前解析DNS，由于其是并行的，不会堵塞页面渲染，这样可以缩短资源加载的时间。

配置ETag

实体标签ETag是Web服务器和浏览器用来确定浏览器缓存中的资源是否与原始服务器上的资源匹配的一种机制，添加了ETag，以提供一种比上次修改日期更灵活的验证实体的机制。ETag是唯一标识组件特定版本的字符串，唯一的格式限制是用引号引起来，原始服务器使用ETag响应头指定组件的ETag。

尽早释放缓冲

当用户请求页面时，后端服务器将HTML页面拼接在一起可能需要200到500毫秒的时间，在这段时间内，浏览器在等待数据到达时处于空闲状态，这段时间则可以将服务端部分已经处理好的数据发送到前端，使浏览器先开始加载外部资源。

例如使用PHP，则可以使用函数flush()将部分就绪的HTML响应发送到浏览器，以便浏览器可以在后端忙于处理HTML页面的其余部分时开始获取资源，好处主要体现在繁忙的后端或轻量级前端。

每日一题

参考

HTML5新特性

HTML5是下一代HTML标准，是HTML最新的修订版本，2014年10月由万维网联盟W3C完成标准制定，HTML5将HTML从用于构造一个文档的一个简单标记，到一个完整的应用程序开发平台，HTML5还包括新元素和用于增强存储、多媒体和硬件访问的JavaScript APIs。

新增语义化标签

<header>: 页眉通常包括网站标志、主导航、全站链接以及搜索框。
<footer>: 定义文档的底部区域，通常包含文档的作者，著作权信息，联系信息等。
<nav>: 提供当前文档内或其他文档的导航链接，导航部分的常见示例是菜单，目录和索引。
<section>: 定义文档中的节，表示HTML文档中包含的独立部分。
<article>: 专注于单个主题的博客文章，报纸文章或网页文章。
<aside>: 表示文档的一部分，其内容仅与文档的主要内容间接相关,通常显示为侧边栏。
<details>: 描述文档或文档某个部分的细节。
<summary>: 元素为<details>元素的显示框指定摘要，标题或图例。
<dialog>: 表示对话框或其他交互式组件，例如检查器或子窗口。
<figure>: 表示独立的内容，可能带有可选的标题，该标题使用<figcaption>元素指定。
<figcaption>: 表示说明其父<figure>元素的其余内容的标题或图例。
<main>: 主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。
<mark>: 表示被标记或突出显示以供参考或标记目的的文本。
<time>: 表示特定的时间。
<data>: 表示特定的日期。
<hgroup>: 表示文档部分的多级标题，它对一组<h1>~<h6>元素进行分组。
<bdi>: 允许设置一段文本，使其脱离其父元素的文本方向设置。
<command>: 定义命令按钮，比如单选按钮、复选框或按钮。
<progress>: 定义任何类型的任务的进度。
<ruby>: 定义ruby注释（中文注音或字符）。
<rt>: 定义字符（中文注音或字符）的解释或发音。
<rp>: 在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容。
<wbr>: 规定在文本中的何处适合添加换行符。
<meter>: 定义度量衡，仅用于已知最大和最小值的度量。

表单增强

Input类型

week: 选择周和年。
search: 用于搜索域。
time: 选择一个时间。
month: 选择一个月份。
url: url地址的输入域。
color: 主要用于选取颜色。
tel: 定义输入电话号码和字段。
email: 包含e-mail地址的输入域。
range: 一个范围内数字值的输入域。
datetime: 选取一个日期，UTC时间。
date: 从一个日期选择器选择一个日期。
datetime-local: 选择一个日期和时间 (无时区)。
number: 数值的输入域，并使用max与min属性控制范围。

表单元素

<datalist>: 定义选项列表，与input元素配合使用该元素。
<keygen>: 规定用于表单的密钥对生成器字段。
<output>: 定义不同类型的输出，比如计算或脚本的输出。

表单属性

autocomplete: 规定form或input域应该拥有自动完成功能，作用在<form>。
novalidate: 规定在提交表单时不应该验证form或input域，作用在<form>。
autofocus: 在页面加载时，域自动地获得焦点，作用在<input>。
form: 规定输入域所属的一个或多个表单，作用在<input>。
placehoder: 输入框默认提示文字，作用在<input>。
formaction: 用于描述表单提交的URL地址，作用在<input>。
formenctype: 描述表单提交到服务器的数据编码，作用在<input>。
formmethod: 定义了表单提交的方式，作用在<input>。
novalidate: 描述了<input>元素在表单提交时无需被验证，作用在<input>。
formtarget: 指定一个名称或一个关键字来指明表单提交数据接收后的展示，作用在<input>。
height、width: 属性规定用image类型的<input>标签的图像高度和宽度，作用在<input>。
list: 规定输入域的datalist，datalist是输入域的选项列表，作用在<input>。
min、max: 用于为包含数字或日期的input类型规定限定与约束，作用在<input>。
multiple: 规定<input>元素中可选择多个值，适用于email与file类型的<input>，作用在<input>。
pattern: 描述了一个正则表达式用于验证<input>元素的值，作用在<input>。
placeholder: 提供一种提示hint，提示会在用户输入值前会显示在输入域上，作用在<input>。
required: 规定必须在提交之前填写输入域，即不能为空，作用在<input>。
step: 为输入域规定合法的数字间隔，作用在<input>。

多媒体支持

多媒体标签

<audio>: 定义音频内容。
<video>: 定义视频内容。
<source>: 定义多媒体资源路径。
``: 定义嵌入的内容，比如插件。
<track>: 定义引入字幕文件或其他包含文本的文件。

示例

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

Canvas绘图

HTML5中引入<canvas>标签，用于图形的绘制，<canvas>为图形的绘制提供了画布，是图形容器，具体的图形绘制由JavaScript来完成。

示例

<canvas id="canvas" width="500" height="300" ></canvas>

内联SVG

HTML5支持内联SVG，SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，SVG于2003年成为W3C推荐标准。

示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="200" cy="40" r="40" stroke="#FFB800" stroke-width="1" fill="#FF5722" />
  <rect width="200" height="80" y="80" x="100" style="fill:#4C98F7;stroke-width:1;stroke:#FFF;"/>
</svg>

MathML

HTML5可以在文档中使用MathML元素，对应的标签是<math>，MathML是数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言。

示例

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <msup><mi>a</mi><mn>2</mn></msup>
        <mo>+</mo>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>=</mo>
        <msup><mi>c</mi><mn>2</mn></msup>
    </mrow>
</math>

拖放API

拖放是一种常见的特性，即捉取对象以后拖到另一个位置，在HTML5中，拖放是标准的一部分，任何元素都能够拖放。

示例

<div draggable="true">Drag</div>

事件

ondrag: 当拖动元素或选中的文本时触发。
ondragend: 当拖拽操作结束时触发，例如松开鼠标按键或敲Esc键。
ondragenter: 当拖动元素或选中的文本到一个可释放目标时触发。
ondragexit: 当元素变得不再是拖动操作的选中目标时触发。
ondragleave: 当拖动元素或选中的文本离开一个可释放目标时触发。
ondragover: 当元素或选中的文本被拖到一个可释放目标上时触发，每100毫秒触发一次。
ondragstart: 当用户开始拖动一个元素或选中的文本时触发。
ondrop: 当元素或选中的文本在可释放目标上被释放时触发。

地理位置

HTML5 Geolocation API用于获得用户的地理位置，获取位置信息需要用户同意操作。

示例

window.navigator.geolocation.getCurrentPosition(
    function(pos){
      console.log('定位时间：',pos.timestamp);
      console.log('经度：',pos.coords.longitude);
      console.log('纬度：',pos.coords.latitude);
      console.log('海拔：',pos.coords.altitude);
      console.log('速度：',pos.coords.speed);
    },
    function(err){ 
         console.log(err);
    }
)

Web Worker

Web Worker能够把JavaScript计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。

示例

var worker = new Worker('worker.js');

/*
  workers和主线程间的数据传递通过这样的消息机制进行——双方都使用postMessage()方法发送各自的消息，
  使用onmessage事件处理函数来响应消息（消息被包含在Message事件的data属性中）,
  这个过程中数据并不是被共享而是被复制。
 */

Web Storage

使用HTML5可以在本地存储用户的浏览数据，localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案。

// 储存数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

// 读取数据
localStorage.getItem('key');
sessionStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');

// 清空数据
localStorage.clear();
sessionStorage.clear();

WebSocket

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。

握手阶段采用HTTP协议，在普通HTTP报文中包含了一些附加头信息，其中附加头信息Upgrade: WebSocket表明这是一个申请协议升级的HTTP请求。
建立在TCP协议基础之上，和HTTP协议同属于应用层。
可以发送文本，也可以发送二进制数据。
数据格式比较轻量，性能开销小，通信高效。
没有同源限制，客户端可以与任意服务器通信。
协议头标识符是ws，如果加密传输则为wss。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.runoob.com/html/html5-intro.html
https://www.cnblogs.com/vicky1018/p/7705223.html
https://www.cnblogs.com/binguo666/p/10928907.html
https://blog.csdn.net/gane_cheng/article/details/52819118
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

行内元素和块级元素

HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过CSS的display属性相互转换。

行内元素

行内元素对应的CSS样式设置为display: inline;。

特点

元素排在一行。
封闭后不会自动换行。
不能指定高度与宽度。
可以使用line-height来指定高度。
外边距对于水平方向有效，垂直方向无效。
内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。

示例

<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->

常见行内元素

<a>、<span>、<b>、<big>、<i>、<small>、<tt>、<abbr>、<acronym>、<cite>、<code>、<dfn>、<em>、<kbd>、<strong>、<samp>、<var>、<bdo>、<br>、 <img>、`、、、、


## 每日一题

https://github.com/WindrunnerMax/EveryDay


## 参考

https://www.cnblogs.com/imgss/p/11072266.html https://blog.csdn.net/weixin_44135121/article/details/98629830



---

## 实现图片懒加载

# 实现图片懒加载
图片懒加载就是当页面需要展示较多图片时，首先只加载显示在当前屏幕位置的图片，在页面向下滚动时，再加载其他需要显示在当前屏幕位置的图片，这样可以防止一次性对服务器发送大量请求，并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗。

## 实例

html 图片懒加载


## 每日一题

https://github.com/WindrunnerMax/EveryDay ```

本文由 GitVP 从 GitHub 收录并在站内全文呈现，版权归原作者所有（MIT）。

← 回到全部文章

前端基础 个人博客 学习笔记

EveryDay

HTML

CSS

JavaScript

Browser

Vue

React

Plugin

RichText

LLMs

Patterns

Linux

MiniProgram

App

PHP

Java

Security

Environment

IMGProcess

LeetCode

Interview

MyLife

Timeline

Timeline

2026-06-14

2026-05-05

2026-04-18

2026-03-22

2026-02-07

2026-01-17

2025-12-19

2025-11-22

2025-10-18

2025-09-21

2025-09-07

2025-09-06

2025-08-10

2025-08-09

2025-06-14

2025-05-31

2025-05-17

2025-05-10

2025-05-03

2025-04-26

2025-04-19

2025-04-12

2025-03-15

2025-03-08

2025-03-01

2025-02-22

2025-02-16

2025-02-15

2025-02-08

2025-02-01

2025-01-25

2025-01-18

2025-01-11

2025-01-05

2024-12-28

2024-12-21

2024-12-15

2024-11-19

2024-10-31

2024-09-09

2024-08-06

2024-07-01

2024-06-04

2024-05-14

2024-04-10

2024-03-30

2024-02-20

2024-01-01

2023-12-02

2023-11-03

2023-10-15

2023-09-09

2023-08-11

2023-07-16

2023-06-24

前端基础个人博客学习笔记