Nginx 开启 gzip 压缩

配置文件在 nginx 目录 nginx.conf

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
# gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";

服务器301跳转

301重定向:页面永久性移走(301重定向)是一种非常重要的“自动转向”技术。网址重定向最为可行的一种办法。当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header)中的状态码的一种,表示本网页永久性转移到另一个地址。

将 test.baidu.com 重定向到 baidu.com 上

  1. Apache
1
2
3
RewriteEngine on
RewriteCond %{HTTP_HOST} test.baidu.com$ [NC]
RewriteRule ^(.*)$ http://baidu.com/$1 [R=301,L]
  1. Nginx
1
2
3
if ($host != 'test.baidu.com' ) {
rewrite ^/(.*)$ http://baidu.com/$1 permanent;
}

CSS box/flex 区别

display: box 是 CSS 2009 年的语法,已经过时,需加上对应前缀

display: flex 是 2012 年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本

兼容性的代码,大致如下:

1
2
3
4
5
6
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

聊聊浏览器的渲染机制

几个概念

  1. DOM:Document Object Model,浏览器将 HTML 解析成树形的数据结构,简称 DOM。

  2. CSSOM:CSS Object Model,浏览器将 CSS 代码解析成树形的数据结构。

  3. DOM 和 CSSOM 都是以 Bytes → characters → tokens →nodes → object model.这样的方式生成最终的数据。如下图所示:

前端兼容问题解析

1. Android 4.x placeholder line-height 对齐问题

input 中的 placeholder 在 iOS 等设置 line-height 等于 height 的值即可保证垂直居中,而在 Android 4.x 中则会偏上。

使用 ::-webkit-input-placeholder 只能更改颜色,并不能修改 line-height, 解决办法是讲 input 的 line-height 设置成 normal 即可垂直居中。

MDN: line-height

  1. -webkit-overflow-scrolling: touch; (ios5+);