随笔分类 - Web技术
摘要：写在前面 在讨论回流与重绘之前，我们要知道： 浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上
阅读全文
摘要：Base64编码由来 为什么会有Base64编码呢？因为有些网络传送渠道并不支持所有的字节，例如传统的邮件只支持可见字符的传送，像ASCII码的控制字符就不能通过邮件传送。这样用途就受到了很大的限制，比如图片二进制流的每个字节不可能全部是可见字符，所以就传送不了。最好的方法就是在不改变传统协议的情况
阅读全文
摘要：前言 我们在开发网站的时候，通常会把常用的图标合并成css sprite(雪碧图)，可以有效的减少站点的http请求数量，从而提高网站性能。 下面让我们一起来学习一下如何使用webpack合并sprite图。 准备 webpack webpack-spritesmith插件 file-loader
阅读全文
摘要：根据CSS3规范,视口单位主要包括以下4个: vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为
阅读全文
摘要：一、懒加载 1.什么是懒加载 懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。 用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。 在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景
阅读全文
摘要：this 的指向 在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象。 记住这句话，this 你已经了解一半了。 例 1： var name = "windowsName"; function a() { var name = "Cherry"; con
阅读全文
摘要：transition、animation和transform是CSS3中三个制作动画的重要属性。 一、transition transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 tr
阅读全文
摘要：优点 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、 有利于不同设备的解析（屏幕阅读器，盲人阅读器等）。 有利于构建清晰的机构，有利于团队的开发、维护。 大厂做法 看一下大厂的操作，打开淘宝的页面查看它首页的源码发现，全局只有一个h1标签就是他的LOGO。 再往下看主题分栏的标题
阅读全文
摘要：cookie 和 session cookie 和 session 都是普遍用来跟踪浏览用户身份的会话方式。 cookie 和 session 区别 cookie 数据存放在客户端，session 数据放在服务器端。 cookie 本身并不安全，考虑到安全应当使用 session。 session
阅读全文
摘要：XSS XSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。 XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏
阅读全文
摘要：三角形 实现一个三角形 <!DOCTYPE html> <html> <head> <title>三角形</title> <style type="text/css"> .box1, .box2, .box3, .box4 { height: 0px; width: 0px; float: left
阅读全文
摘要：导读 移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们
阅读全文
摘要：reduce() 方法接受一个数组作为输入值并返回一个值。这点挺有趣的。reduce 接受一个回调函数，回调函数参数包括一个累计器（数组每一段的累加值，它会像雪球一样增长），当前值，和索引。reduce 也接受一个初始值作为第二个参数： 来写一个炒菜函数和一个作料清单： // our list of
阅读全文
摘要：CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，弹性布局flex和网格布局grid。 本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的
阅读全文
摘要：数组去重 双循环去重 双重for（或while）循环是比较笨拙的方法，它实现的原理很简单： 先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对。 如果不重复则添加到新数组中，最后返回新数组；因为它的时间复杂度是O(n^2)，如果数组长度很大，
阅读全文
摘要：寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。 记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐。 然而很快就失望的发现 CSS 中并不存在 float:
阅读全文
摘要：什么是 HTTPS HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。 即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 现在
阅读全文
摘要：强缓存和协商缓存 在介绍缓存的时候，我们习惯将缓存分为强缓存和协商缓存两种。两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效。 顾名思义，协商缓存，就是需要和服务器进行协商，最终确定是否使用本地缓存。 两种缓存方案的问题点 强缓存 我们知道，强缓存主要是通过http请求头
阅读全文
摘要：一、文本对话--从请求到响应 我们在浏览器中输入一个 URL，回车之后便会在浏览器中观察到页面内容。实际上这个过程是： （1）浏览器向网站所在的服务器发送了一个 Request（请求） （2）网站服务器接收到这个Request之后进行处理和解析 （3）然后返回对应的一个Response（响应）给浏览
阅读全文
摘要：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素。在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫C
阅读全文