普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。

贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。

Normalize.css

不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，你也可以定制属于自己业务的 reset.css

<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">

简单粗暴法

* { margin: 0; padding: 0; }

本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。

1、浏览器缓存

缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的，让大家有个大概的认知。

浏览器第一次请求时：

Runtime transform 运行时编译es6
入口文件引用作为辅助和内建，自动添加垫片到你的当前代码模块而非全局

这个插件建议放在 library/tool中

注意：
实例方法，例如”foobar”.includes(“foo”)将不能够使用，因为它将修正内置的垫片。

为什么使用它 why
Babel对常用的函数使用非常小的辅助（内置的垫片比较少），例如_extend。默认情况下它将会添加到每个引用的文件。这种重复有时候是非常没必要的。特别是你的应用分散在很多文件中。

这是transform-runtime插件之所以产生的原因：所有的这些辅助（垫片）将会引用babel-runtime来避免编译时重复。runtime将会编译到你的build中。

项目结构

• assets 通用代码块
  • css
  • js
• images
• js
  • module 模块
    • loader.js
    • view.js
      indexjs 游戏主程
• mp3
  index.html

瀑布流布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

.masonry {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
  counter-reset: item-counter;
  padding:10rpx;
}
.item {
  box-sizing: border-box;
  -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
          break-inside: avoid;
  counter-increment: item-counter;
  padding:10rpx;
}
.item__content {
  position: relative;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100rpx;
  font-size: 24rpx;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-all;
  padding:15rpx;
}
<view class="masonry ">
  <view class="item" wx:for="{{list}}" wx:key="id" wx:for-item="item">
    <view class="item__content">
      {{item.content}}
    </view>
  </view>
</view>

浏览器缓存机制

在画布中获取特定颜色的像素数量

下面的函数将返回画布上颜色（RGB格式）为r、g、b的像素数量。如果用户希望像这篇博客文章中在另一个区域绘画，那么这将非常有用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function getpixelamount(canvas, r, g, b) {
  var cx = canvas.getContext('2d');
  var pixels = cx.getImageData(0, 0, canvas.width, canvas.height);
  var all = pixels.data.length;
  var amount = 0;
  for (i = 0; i < all; i += 4) {
    if (pixels.data[i] === r &&
        pixels.data[i + 1] === g &&
        pixels.data[i + 2] === b) {
      amount++;
    }
  }
  return amount;
};

作为一个经常和web打交道的程序员，了解这些协议是必须的，本文就向大家介绍一下这些协议的区别和基本概念，文中可能不局限于前端知识，还包括一些运维，协议方面的知识

1. web始祖HTTP

　　全称：超文本传输协议(HyperText Transfer Protocol)
　　伴随着计算机网络和浏览器的诞生，HTTP1.0也随之而来，处于计算机网络中的应用层。
　　HTTP是建立在TCP协议之上，所以HTTP协议的瓶颈及其优化技巧都是基于TCP协议本身的特性，例如tcp建立连接的3次握手和断开连接的4次挥手以及每次建立连接带来的RTT延迟时间。

2. HTTP与现代化浏览器

　　早在HTTP建立之初，主要就是为了将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。也是说对于前端来说，我们所写的HTML页面将要放在我们的web服务器上，用户端通过浏览器访问url地址来获取网页的显示内容。
　　但是到了WEB2.0以来，我们的页面变得复杂，不仅仅单纯的是一些简单的文字和图片，同时我们的HTML页面有了CSS，Java，来丰富我们的页面展示。
　　当ajax的出现，我们又多了一种向服务器端获取数据的方法，这些其实都是基于HTTP协议的。
　　同样到了移动互联网时代，我们页面可以跑在手机端浏览器里面，但是和PC相比，手机端的网络情况更加复杂，这使得我们开始了不得不对HTTP进行深入理解并不断优化过程中。

一.CSRF是什么？

　　CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

二.CSRF可以做什么？

　　你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账……造成的问题包括：个人隐私泄露以及财产安全。