无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-10-19 08:43 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

大型网站优化技术,基本使用

减少HTTP请求之合并图片详解(大型网站优化技术)

2015/11/26 · HTML5 · HTTP

原文出处: Kelly   

一、相关知识讲解

看过雅虎的前端优化35条建议,都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。

减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢?嗯,确实有鱼和熊掌兼得的办法。

这里我们就拿雅虎的第一条建议:尽量减少HTTP请求数里的减少图片请求数量 进行讲解。

我们都知道,一个网站的一个页面可能有很多小图标,例如一些按钮、箭头等等。当加载html文档时,只要遇到有图片的,都会自动建立起HTTP请求下载,然后将图片下载到页面上,这些小图片可能也就是十几K大甚至1K都不到,假如我们的一个页面有一百个小图标,我们在加载页面时,就要发送100个HTTP请求,如果你的网站访问量很大并发量也很高,假如上百万访问量,那发起的请求就是千万级别了,服务器是有一定的压力的,并且一个用户的一个页面要发起那么多请求,是很耗时的。

所以,我们优化的方案就是:将这些十几K、几K的小图标合并在一张图片里,然后用CSS的background-imagebackground-position属性来定位要显示的部分。

二、代码实现

1、思路:

将一个文件夹里的图标,自动生成在一张图片里面,同时自动生成对应的css文件,我们只要在HTML里的标签中添加相应的属性值就能显示图片了。

2、实现过程:

XHTML

<?php //自己定义一个根目录 define('ROOT', $_SERVER['DOCUMENT_ROOT'].'iconwww'); //这个是图片的目录 define('RES_BASE_URL', ''); /** * 生成背景图的函数 */ function generateIcon() { //网站根目录 $webRoot = rtrim(ROOT, '/'); //背景图目录 $root = "$webRoot/img/bg"; //Php-SPL库中 的 目录文件遍历器 $iterator = new DirectoryIterator($root); //开始遍历该背景图目录下的目录,我们是把想生成背景图的目录,放在bg目录中以各个模块的目录分类存放 foreach ($iterator as $file) { //遇到目录遍历 if (!$file->isDot() && $file->isDir()) { //取得文件名 $fileName = $file->getFilename(); generateIconCallback("$root/$fileName", "$webRoot/img/$fileName", "$webRoot/css/$fileName.css"); } } } /** * 用户生成合并的背景图和css文件的函数 * @param string $dir 生成背景图的图标所在的目录路径 * @param string $bgSavePath 背景图所保存的路径 * @param string $cssSavePath css保存的路径 */ function generateIconCallback($dir, $bgSavePath, $cssSavePath) { $shortDir = str_replace('\', '/', substr($dir, strlen(ROOT-1))); //返回文件路径信息 $pathInfo = pathinfo($bgSavePath.'.png'); $bgSaveDir = $pathInfo['dirname']; //确保目录可写 ensure_writable_dir($bgSaveDir); //背景图名字 $bgName = $pathInfo['filename']; //调用generateIconCallback_GetFileMap()函数生成每一个图标所需要的数据结构 $fileMap = array('a' => generateIconCallback_GetFileMap($dir)); $iterator = new DirectoryIterator($dir); foreach ($iterator as $file) { if ($file->isDot()) continue; if ($file->isDir()) { //二级目录也要处理 $fileMap['b-'.$file->getFilename()] = generateIconCallback_GetFileMap($file->getRealPath()); } } ksort($fileMap); //分析一边fileMap,计算整个背景图的大小和每一个图标的offset //初始化偏移量和背景图 $offsetX = $offsetY = $bgWidth = 0; //设定每个小图标之间的距离 $spaceX =$spaceY = 5; //图片最大宽度 $maxWidth = 800; $fileMd5List =array(); //这里需要打印下$fileMap就知道它的数据结构了 foreach ($fileMap as $k1 => $innerMap) { foreach ($innerMap as $k2 => $itemList) { //行高姐X轴偏移量初始化 $offsetX = $lineHeight = 0; foreach ($itemList as $k3 => $item) { //变量分别是:图标的宽度,高度,类型,文件名,路径,MD5加密字符串 list($imageWidth, $imageHeight, $imageType, $fileName, $filePathname, $fileMd5) = $item; $fileMd5List []= $fileMd5; //如果图片的宽度 偏移量 > 最大宽度(800) 那就换行 if ($offsetX !== 0 && $imageWidth $offsetX > $maxWidth) { $offsetY = $spaceY $lineHeight; $offsetX = $lineHeight = 0; } //如果图片高度 > 当前行高 那就讲图片高度付给行高我们这的 if ($imageHeight > $lineHeight) $lineHeight = $imageHeight; $fileMap[$k1][$k2][$k3] = array($imageWidth, $imageHeight, $offsetX, $offsetY, $imageType, $fileName, $filePathname); //X轴偏移量的计算 $offsetX = $imageWidth $spaceX; if ($offsetX > $bgWidth) $bgWidth = $offsetX; } //Y轴偏移量的计算 $offsetY = $lineHeight $spaceY; } } //把右下两边多加了的空白距离给干掉 $bgWidth -= $spaceX; $bgHeight = $offsetY - $spaceY; $fileMd5List = implode("n", $fileMd5List); //生成背景图和 css文件 //资源路径 $resBaseUrl = RES_BASE_URL; $suffix = base_convert(abs(crc32($fileMd5List)), 10, 36); $writeHandle = fopen($cssSavePath, 'w'); fwrite($writeHandle, "/** bg in dir: $shortDir/ */n[icon-$bgName]{background:url({$resBaseUrl}/$bgName.png?$suffix) no-repeat;display:inline-block;}"); //做图片,这些函数具体可以查看PHP手册 $destResource = imagecreatetruecolor($bgWidth, $bgHeight); imagealphablending($destResource, false); imagesavealpha($destResource, false); $color = imagecolorallocatealpha($destResource, 255, 255, 255, 127); imagefill($destResource, 0, 0, $color); //对每一张小图片进行处理,生成在大背景图里,并生成css文件 foreach ($fileMap as $innerMap) { foreach ($innerMap as $itemList) { foreach ($itemList as $item) { list($imageWidth, $imageHeight, $offsetX, $offsetY, $imageType, $fileName, $filePathname) = $item; if ($imageType === IMAGETYPE_PNG) { $srcResource = imagecreatefrompng($filePathname); } else if ($imageType === IMAGETYPE_JPEG) { $srcResource = imagecreatefromjpeg($filePathname); } imagecopy($destResource, $srcResource, $offsetX, $offsetY, 0, 0, $imageWidth, $imageHeight); imagedestroy($srcResource); //写入css $posX = $offsetX === 0 ? 0 : "-{$offsetX}px"; $posY = $offsetY === 0 ? 0 : "-{$offsetY}px"; fwrite($writeHandle, "n[icon-$bgName="$fileName"]{width:{$imageWidth}px;height:{$imageHeight}px;background-position:$posX $posY;}"); } } } //压缩级别 7 imagepng($destResource, "$bgSavePath.png", 7); imagedestroy($destResource); fclose($writeHandle); $shortCssSavePath = substr($cssSavePath, strlen(ROOT)); } /** * 将图片的信息处理成我们想要的数据结构 * @param [type] $dir [description] * @return [type] [description] */ function generateIconCallback_GetFileMap($dir) { $map = $sort = array(); $iterator = new DirectoryIterator($dir); foreach($iterator as $file) { if(!$file->isFile()) continue; $filePathname = str_replace("\", '/', $file->getRealPath()); //这些函数可以查看PHP手册 $imageInfo = getimagesize($filePathname); $imageWidth = $imageInfo[0]; $imageHeight = $imageInfo[1]; $imageType = $imageInfo[2]; if(!in_array($imageType, array(IMAGETYPE_JPEG, IMAGETYPE_PNG))) { $fileShortName = substr($filePathname, strlen(ROOT) - 1); echo "<p> $fileShortName 图片被忽略: 因为图片类型不是png|jpg.</p>"; continue; } //这是我们的图片规格,行高分别有 16 32 64 128 256 99999 foreach(array(16, 32, 64, 128, 256, 99999) as $height) { if($imageHeight <= $height) { $mapKey = $height; break; } } if(!isset($map[$mapKey])) $map[$mapKey] = array(); $filePathInfo = pathinfo($filePathname); $map[$mapKey] []= array($imageWidth, $imageHeight, $imageType, $filePathInfo['filename'], $filePathname, md5_file($filePathname)); $sort[$mapKey] []= str_pad($imageHeight, 4, '0', STR_PAD_LEFT) . $filePathInfo['filename']; } foreach($map as $k => $v) array_multisort($map[$k], SORT_ASC, SORT_NUMERIC, $sort[$k]); ksort($map, SORT_NUMERIC); return $map; } /** * 判断目录是否可写 * @param string $dir 目录路径 */ function ensure_writable_dir($dir) { if(!file_exists($dir)) { mkdir($dir, 0766, true); @chmod($dir, 0766); @chmod($dir, 0777); } else if(!is_writable($dir)) { @chmod($dir, 0766); @chmod($dir, 0777); if(!@is_writable($dir)) { throw new BusinessLogicException("目录不可写", $dir); } } } generateIcon(); ?> <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/Pink.css"> <title></title> </head> <body> <div>我们直接引入所生成的css文件,并测试一下是否成功</div> <br> <div>这里在span标签 添加属性 icon-Pink ,值为About-40,正常显示图片</div> <span icon-Pink="About-40"></span> </body> </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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<?php
    //自己定义一个根目录
    define('ROOT', $_SERVER['DOCUMENT_ROOT'].'iconwww');
    //这个是图片的目录
    define('RES_BASE_URL', 'http://localhost:8080/iconwww/img');
 
    /**
     * 生成背景图的函数
     */
    function generateIcon() {
        //网站根目录
        $webRoot = rtrim(ROOT, '/');
        //背景图目录
        $root = "$webRoot/img/bg";
        //Php-SPL库中 的 目录文件遍历器
        $iterator = new DirectoryIterator($root);
        //开始遍历该背景图目录下的目录,我们是把想生成背景图的目录,放在bg目录中以各个模块的目录分类存放
        foreach ($iterator as $file) {
            //遇到目录遍历
            if (!$file->isDot() && $file->isDir()) {
                //取得文件名
                $fileName = $file->getFilename();
                generateIconCallback("$root/$fileName", "$webRoot/img/$fileName", "$webRoot/css/$fileName.css");
            }
        }
    }
 
    /**
     * 用户生成合并的背景图和css文件的函数
     * @param  string $dir         生成背景图的图标所在的目录路径
     * @param  string $bgSavePath  背景图所保存的路径
     * @param  string $cssSavePath css保存的路径
     */
    function generateIconCallback($dir, $bgSavePath, $cssSavePath) {
        $shortDir = str_replace('\', '/', substr($dir, strlen(ROOT-1)));
        //返回文件路径信息
        $pathInfo = pathinfo($bgSavePath.'.png');
 
        $bgSaveDir = $pathInfo['dirname'];
        //确保目录可写
        ensure_writable_dir($bgSaveDir);
        //背景图名字
        $bgName = $pathInfo['filename'];
        //调用generateIconCallback_GetFileMap()函数生成每一个图标所需要的数据结构
        $fileMap = array('a' => generateIconCallback_GetFileMap($dir));
 
        $iterator = new DirectoryIterator($dir);
        foreach ($iterator as $file) {
            if ($file->isDot()) continue;
            if ($file->isDir()) {
                //二级目录也要处理
                $fileMap['b-'.$file->getFilename()] = generateIconCallback_GetFileMap($file->getRealPath());
            }
        }
        ksort($fileMap);
 
        //分析一边fileMap,计算整个背景图的大小和每一个图标的offset
        //初始化偏移量和背景图    
        $offsetX = $offsetY = $bgWidth = 0;
        //设定每个小图标之间的距离
        $spaceX =$spaceY = 5;
        //图片最大宽度
        $maxWidth = 800;
        $fileMd5List =array();
        //这里需要打印下$fileMap就知道它的数据结构了
        foreach ($fileMap as $k1 => $innerMap) {
            foreach ($innerMap as $k2 => $itemList) {
                //行高姐X轴偏移量初始化
                $offsetX = $lineHeight = 0;
                foreach ($itemList as $k3 => $item) {
                    //变量分别是:图标的宽度,高度,类型,文件名,路径,MD5加密字符串
                    list($imageWidth, $imageHeight, $imageType, $fileName, $filePathname, $fileMd5) = $item;
                    $fileMd5List []= $fileMd5;
                    //如果图片的宽度 偏移量 > 最大宽度(800) 那就换行
                    if ($offsetX !== 0 && $imageWidth $offsetX > $maxWidth) {
                        $offsetY = $spaceY $lineHeight;
                        $offsetX = $lineHeight = 0;
                    }
                    //如果图片高度 > 当前行高  那就讲图片高度付给行高我们这的
                    if ($imageHeight > $lineHeight) $lineHeight = $imageHeight;
                    $fileMap[$k1][$k2][$k3] = array($imageWidth, $imageHeight, $offsetX, $offsetY, $imageType, $fileName, $filePathname);
                    //X轴偏移量的计算
                    $offsetX = $imageWidth $spaceX;
                    if ($offsetX > $bgWidth) $bgWidth = $offsetX;
                }
                //Y轴偏移量的计算
                $offsetY =  $lineHeight $spaceY;
            }
        }
        //把右下两边多加了的空白距离给干掉
        $bgWidth -= $spaceX;
        $bgHeight = $offsetY - $spaceY;
        $fileMd5List = implode("n", $fileMd5List);
 
        //生成背景图和 css文件
 
        //资源路径
        $resBaseUrl = RES_BASE_URL;
        $suffix = base_convert(abs(crc32($fileMd5List)), 10, 36);
        $writeHandle = fopen($cssSavePath, 'w');
        fwrite($writeHandle, "/** bg in dir: $shortDir/ */n[icon-$bgName]{background:url({$resBaseUrl}/$bgName.png?$suffix) no-repeat;display:inline-block;}");
 
        //做图片,这些函数具体可以查看PHP手册
        $destResource = imagecreatetruecolor($bgWidth, $bgHeight);
        imagealphablending($destResource, false);
        imagesavealpha($destResource, false);
        $color = imagecolorallocatealpha($destResource, 255, 255, 255, 127);
 
        imagefill($destResource, 0, 0, $color);
 
        //对每一张小图片进行处理,生成在大背景图里,并生成css文件
        foreach ($fileMap as $innerMap) {
            foreach ($innerMap as $itemList) {
                foreach ($itemList as $item) {
                     list($imageWidth, $imageHeight, $offsetX, $offsetY, $imageType, $fileName, $filePathname) = $item;
                     if ($imageType === IMAGETYPE_PNG) {
                        $srcResource = imagecreatefrompng($filePathname);
                     } else if ($imageType === IMAGETYPE_JPEG) {
                        $srcResource = imagecreatefromjpeg($filePathname);
                     }
                     imagecopy($destResource, $srcResource, $offsetX, $offsetY, 0, 0, $imageWidth, $imageHeight);
                     imagedestroy($srcResource);
 
                     //写入css
                     $posX = $offsetX === 0 ? 0 : "-{$offsetX}px";
                     $posY = $offsetY === 0 ? 0 : "-{$offsetY}px";
                     fwrite($writeHandle, "n[icon-$bgName="$fileName"]{width:{$imageWidth}px;height:{$imageHeight}px;background-position:$posX $posY;}");
                 }
            }
        }
 
        //压缩级别 7
        imagepng($destResource, "$bgSavePath.png", 7);
        imagedestroy($destResource);
        fclose($writeHandle);
 
        $shortCssSavePath = substr($cssSavePath, strlen(ROOT));
    }
 
    /**
     * 将图片的信息处理成我们想要的数据结构
     * @param  [type] $dir [description]
     * @return [type]      [description]
     */
    function generateIconCallback_GetFileMap($dir) {
        $map = $sort = array();
        $iterator = new DirectoryIterator($dir);
        foreach($iterator as $file) {
            if(!$file->isFile()) continue;
            $filePathname = str_replace("\", '/', $file->getRealPath());
            //这些函数可以查看PHP手册
            $imageInfo = getimagesize($filePathname);
            $imageWidth = $imageInfo[0];
            $imageHeight = $imageInfo[1];
            $imageType = $imageInfo[2];
 
            if(!in_array($imageType, array(IMAGETYPE_JPEG, IMAGETYPE_PNG))) {
                $fileShortName = substr($filePathname, strlen(ROOT) - 1);
                echo "<p> $fileShortName 图片被忽略: 因为图片类型不是png|jpg.</p>";
                continue;
            }
 
            //这是我们的图片规格,行高分别有 16 32 64 128 256 99999
            foreach(array(16, 32, 64, 128, 256, 99999) as $height) {
                if($imageHeight <= $height) {
                    $mapKey = $height;
                    break;
                }
            }
            if(!isset($map[$mapKey])) $map[$mapKey] = array();
            $filePathInfo = pathinfo($filePathname);
            $map[$mapKey] []= array($imageWidth, $imageHeight, $imageType, $filePathInfo['filename'], $filePathname, md5_file($filePathname));
            $sort[$mapKey] []= str_pad($imageHeight, 4, '0', STR_PAD_LEFT) . $filePathInfo['filename'];
        }
        foreach($map as $k => $v) array_multisort($map[$k], SORT_ASC, SORT_NUMERIC, $sort[$k]);
        ksort($map, SORT_NUMERIC);
        return $map;
    }
 
    /**
     * 判断目录是否可写
     * @param  string $dir 目录路径
     */
    function ensure_writable_dir($dir) {
        if(!file_exists($dir)) {
            mkdir($dir, 0766, true);
            @chmod($dir, 0766);
            @chmod($dir, 0777);
        }
        else if(!is_writable($dir)) {
            @chmod($dir, 0766);
            @chmod($dir, 0777);
            if(!@is_writable($dir)) {
                throw new BusinessLogicException("目录不可写", $dir);
            }
        }
    }
 
    generateIcon();
?>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/Pink.css">
    <title></title>
 
</head>
<body>
<div>我们直接引入所生成的css文件,并测试一下是否成功</div>
<br>
<div>这里在span标签 添加属性 icon-Pink ,值为About-40,正常显示图片</div>
<span icon-Pink="About-40"></span>
</body>
</html>

调用以上代码,我们的浏览器是这样显示的:

图片 1

然后css目录生成了Pink.css文件:

图片 2

img目录下生成了Pink.png文件:

图片 3

看看生成的背景图是长啥样子:

图片 4

 

接下来我们再看一下所生成的图片大小与Pink文件夹里所有小图片总和的大小,对它们做个比较:

图片 5

 

图片 6

从上图可以看出,我们生成的图片的大小明显小于文件夹所有图片的大小,所以在将100个小图标下载下来的速度 会明显小于 将背景图下载下来和将CSS下载下来的速度。

当访问量大时,或者小图片的量大时,会起到很明显的优化效果!!!

代码中的每一个点都基本上有注释,很方便大家去理解,只要大家用心去看,肯定能将这一网站优化技术用到自己的项目中。

本次博文就写到这!!!

如果此博文中有哪里讲得让人难以理解,欢迎留言交流,若有讲解错的地方欢迎指出。

如果您觉得您能在此博文学到了新知识,请为我顶一个,如文章中有解释错的地方,欢迎指出。

  互相学习,共同进步!

2 赞 3 收藏 评论

图片 7

indexedDB 基本使用

2017/12/14 · 基础技术 · 1 评论 · IndexedDB

原文出处: 党黎明   


indexedDB简介:

indexedDB 是一种使用浏览器存储大量数据的方法.它创造的数据可以被查询,并且可以离线使用.

 

indexedDB 有以下特点:

  1. indexedDBWebSQL 数据库的取代品
  2. indexedDB遵循同源协议(只能访问同域中存储的数据,而不能访问其他域的)
  3. API包含异步API同步API两种:多数情况下使用异步API; 同步API必须同 WebWorkers 一起使用, 目前没有浏览器支持同步API
  4. indexedDB 是事务模式的数据库, 使用 key-value 键值对储存数据
  5. indexedDB 不使用结构化查询语言(SQL). 它通过索引(index)所产生的指针(cursor)来完成查询操作

浅谈Web自适应

2016/07/28 · 基础技术 · 自适应

原文出处: 卖烧烤夫斯基   

一、使用indexedDB的基本模式

  1. 打开数据库并且开始一个事务。
  2. 创建一个 objecStore
  3. 构建一个请求来执行一些数据库操作,像增加或提取数据等。
  4. 通过监听正确类型的 DOM 事件以等待操作完成。
  5. 在操作结果上进行一些操作(可以在 request 对象中找到)

前言

图片 8

随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难,适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图,结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验,希望有益于诸君。

特别说明:在开始这一切之前,请开发移动界面的工程师们在头部加上下面这条meta:

XHTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

二、创建、打开数据库

indexedDB 存在于全局对象window上, 它最重要的一个方法就是open方法, 该方法接收两个参数:

  • dbName // 数据库名称 [string]
  • version // 数据库版本 [整型number]

var DB_NAME = 'indexedDB-test', VERSION = 1, db; var request = indexedDB.open(DB_NAME, VERSION); request.onsuccess = function(event) { db = event.target.result; // console.log(event.target === request); // true db.onsuccess = function(event) { console.log('数据库操作成功!'); }; db.onerror = function(event) { console.error('数据库操作发生错误!', event.target.errorCode); }; console.log('打开数据库成功!'); }; request.onerror = function(event) { console.error('创建数据库出错'); console.error('error code:', event.target.errorCode); }; request.onupgradeneeded = function(event) { // 更新对象存储空间和索引 .... };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var DB_NAME = 'indexedDB-test', VERSION = 1, db;
var request = indexedDB.open(DB_NAME, VERSION);
request.onsuccess = function(event) {
    db = event.target.result;
    // console.log(event.target === request); // true
    db.onsuccess = function(event) {
        console.log('数据库操作成功!');
    };
    db.onerror = function(event) {
        console.error('数据库操作发生错误!', event.target.errorCode);
    };
    console.log('打开数据库成功!');
};
request.onerror = function(event) {
    console.error('创建数据库出错');
    console.error('error code:', event.target.errorCode);
};
request.onupgradeneeded = function(event) {
   // 更新对象存储空间和索引 ....
};

若是本域下不存在名为DB_NAME的数据库,则上述代码会创建一个名为DB_NAME、版本号为VERSION的数据库; 触发的事件依次为: upgradeneededsuccess.

若是已存在名为DB_NAME的数据库, 则上述代码会打开该数据库; 只触发success/error事件,不会触发upgradeneeded事件. db是对该数据库的引用.

简单事情简单做-宽度自适应

所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界面时候需要用到全屏布局时采用的就是此种布局方式。它的实现方式也比较简单,将外层容器元素按照百分比铺满地方式,里面的子元素固定或者左右浮动。

CSS

.div { width:100%; height:100px; } .child { float: left; } .child { float:right; }

1
2
3
4
5
6
7
8
9
.div {
  width:100%; height:100px;
}
.child {
  float: left;
}
.child {
  float:right;
}

由于父级元素采用百分比的布局方式,随着屏幕的拉伸,它的宽度会无限的拉伸。而子元素由于采用了浮动,那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的方法,随着弹性布局的普及,它经常被flex或者box这样的伸缩性布局方式替代,变得越来越“弹性”十足。需要了解弹性布局,请前往Flex布局教程和卤煮box布局教程比较。

三、创建对象存储空间和索引

在关系型数据库(如mysql)中,一个数据库中会有多张表,每张表有各自的主键、索引等;

key-value型数据库(如indexedDB)中, 一个数据库会有多个对象存储空间,每个存储空间有自己的主键、索引等;

创建对象存储空间的操作一般放在创建数据库成功回调里:

request.onupgradeneeded = function(event) { // 更新对象存储空间和索引 .... var database = event.target.result; var objectStore = database.createObjectStore("movies", { keyPath: "id" }); objectStore.createIndex('alt', 'alt', { unique: true }); objectStore.createIndex('title', 'title', { unique: false }); };

1
2
3
4
5
6
request.onupgradeneeded = function(event) { // 更新对象存储空间和索引 ....
    var database = event.target.result;
    var objectStore = database.createObjectStore("movies", { keyPath: "id" });
    objectStore.createIndex('alt', 'alt', { unique: true });
    objectStore.createIndex('title', 'title', { unique: false });
};

图片 9

onupgradeneeded 是我们唯一可以修改数据库结构的地方。在这里面,我们可以创建和删除对象存储空间以及构建和删除索引。

在数据库对象database上,有以下方法可供调用:

  1. createObjectStore(storeName, configObj) 创建一个对象存储空间
    • storeName // 对象存储空间的名称 [string]
    • configObj // 该对象存储空间的配置 [object] (其中的keyPath属性值,标志对象的该属性值唯一)
  2. createIndex(indexName, objAttr, configObj) 创建一个索引
    • indexName // 索引名称 [string]
    • objAttr // 对象的属性名 [string]
    • configObj // 该索引的配置对象 [object]

大小之辨-完全自适应

“完全自适应式”是卤煮对越此方案的叫法,由于卤煮现在找不到官方名称,所以暂时就这样叫它。这种解决方案相对前一种来说进步不少,不仅仅宽度实现了自适应,而且界面所有的元素大小和高度都会根据不同分辨率和屏幕宽度的设备来调整元素、字体、图片、高度等属性的值。简单来说就是在不同的屏幕下,你看到的字体和元素高宽度的大小是不一样的。在这里,有人就会说利用的是媒体查询熟悉,根据不同的屏幕宽度,调整样式。卤煮之前也是这样想的,但是你需要考虑到界面上的许多元素需要设置字体,如果用media query为每个元素在不同的设备下都设置不同的属性的话,那么有多少种屏幕我们的css就会增加多少倍。实际上在这里,我们采用的是js和css熟悉rem来解决这个问题的。

REM属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。

CSS

html { font-size: 10px; } div { font-size: 1rem; height: 2rem; width: 3rem; border: .1rem solid #000; }

1
2
3
4
5
6
7
8
9
10
html {
font-size: 10px;
}
div {
font-size: 1rem;
height: 2rem;
width: 3rem;
border: .1rem solid #000;
}

采用以上写法,div继承到了html节点的font-size,为本身定义了一系列样式属性,此时1em计算为10px,即根节点的font-size值。所以,这时div的高度就是20px,宽度是30px,边框是1px,字体大小则是10px;一旦有了这样的方法,我们自然可以根据不同的屏幕宽度设置不同的根节点字体大小。假设我们现在设计的标准是iphone5s,iphone5系列的屏幕分辨率是640。为了统一规范,我们将iphone5 分辨率下的根元素font-size设置为100px;

CSS

<!--iphone5--> html { font-size: 100px; }

1
2
3
4
<!--iphone5-->
html {
font-size: 100px;
}

那么以此为基准,可以计算出一个比例值6.4。我们可以得知其他手机分辨率的设备下根元素字体大小:

JavaScript

/* 数据计算公式 640/100 = device-width / x 可以设置其他设备根元素字体大小 ihone5: 640 : 100 iphone6: 750 : 117 iphone6s: 1240 : 194 */ var deviceWidth = window.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px';

1
2
3
4
5
6
7
8
/*
数据计算公式 640/100 = device-width / x  可以设置其他设备根元素字体大小
ihone5: 640  : 100
iphone6: 750 : 117
iphone6s: 1240 : 194
*/
var deviceWidth = window.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px';

在head中,我们将以上代码加入,动态地改变根节点的font-size值,得到如下结果:

图片 10

图片 11

图片 12

接下来我们可以根据根元素的字体大小用rem设置各种属性的相对值。当然,如果是移动设备,屏幕会有一个上下限制,我们可以控制分辨率在某个范围内,超过了该范围,我们就不再增加根元素的字体大小了:

JavaScript

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px';

1
2
var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px';

一般的情况下,你是不需要考虑屏幕动态地拉伸和收缩。当然,假如用户开启了转屏设置,在网页加载之后改变了屏幕的宽度,那么我们就要考虑这个问题了。解决此问题也很简单,监听屏幕的变化就可以做到动态切换元素样式:

JavaScript

window.onresize = function(){ var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px'; };

1
2
3
4
window.onresize = function(){
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px';
};

为了提高性能,让代码开起来更加完美,可以为它加上节流阀函数:

JavaScript

window.onresize = _.debounce(function() { var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px'; }, 50);

1
2
3
4
window.onresize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px';
}, 50);

顺带解决高保真标注与实际开发值比例问题

如果你们设计稿标准是iphone5,那么拿到设计稿的时候一定会发现,完全不能按照高保真上的标注来写css,而是将各个值取半,这是因为移动设备分辨率不一样。设计师们是在真实的iphone5机器上做的标注,而iphone5系列的分辨率是640,实际上我们在开发只需要按照320的标准来。为了节省时间,不至于每次都需要将标注取半,我们可以将整个网页缩放比例,模拟提高分辨率。这个做法很简单,为不同的设备设置不同的meta即可:

JavaScript

var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' scale ', maximum-scale=' scale ', minimum-scale=' scale ', user-scalable=no');

1
2
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' scale ', maximum-scale=' scale ', minimum-scale=' scale ', user-scalable=no');

这样设置同样可以解决在安卓机器下1px像素看起来过粗的问题,因为在像素为1px的安卓下机器下,边框的1px被压缩成了0.5px了。总之是一劳永逸!淘宝和网易新闻的手机web端就是采用以上这种方式,自适应各种设备屏幕的,大家有兴趣可以去参考参考。下面是完整的代码:

XHTML

<!DOCTYPE html> <html> <head> <title>测试</title> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <script type="text/javascript"> (function() { // deicePixelRatio :设备像素 var scale = 1 / devicePixelRatio; //设置meta 压缩界面 模拟设备的高分辨率 document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' scale ', maximum-scale=' scale ', minimum-scale=' scale ', user-scalable=no'); //debounce 为节流函数,自己实现。或者引入underscoure即可。 var reSize = _.debounce(function() { var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; //按照640像素下字体为100px的标准来,得到一个字体缩放比例值 6.4 document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px'; }, 50); window.onresize = reSize; })(); </script> <style type="text/css"> html { height: 100%; width: 100%; overflow: hidden; font-size: 16px; } div { height: 0.5rem; widows: 0.5rem; border: 0.01rem solid #19a39e; } ........ </style> <body> <div> </div> </body> </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
<!DOCTYPE html>
<html>
<head>
  <title>测试</title>
  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
  <script type="text/javascript">
(function() {
  // deicePixelRatio :设备像素
  var scale = 1 / devicePixelRatio;
  //设置meta 压缩界面 模拟设备的高分辨率
  document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' scale ', maximum-scale=' scale ', minimum-scale=' scale ', user-scalable=no');
  //debounce 为节流函数,自己实现。或者引入underscoure即可。
  var reSize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      //按照640像素下字体为100px的标准来,得到一个字体缩放比例值 6.4
      document.documentElement.style.fontSize = (deviceWidth / 6.4) 'px';
  }, 50);
  window.onresize = reSize;
})();
  </script>
  <style type="text/css">
    html {
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-size: 16px;
    }
    div {
      height: 0.5rem;
      widows: 0.5rem;
      border: 0.01rem solid #19a39e;
    }
    ........
  </style>
  <body>
    <div>
    </div>
  </body>
</html>

四、增加和删除数据

对数据库的操作(增删查改等)都需要通过事务来完成,事务具有三种模式:

  • readonly 只读(可以并发进行,优先使用)
  • readwrite 读写
  • versionchange 版本变更

让元素飞起来-媒体查询

运用css新属性media query 特性也可以实现我们上说到过的布局样式。为尺寸设置根元素字体大小:

CSS

@media screen and (device-width: 640px) { /*iphone4/iphon5*/ html { font-size: 100px; } } @media screen and (device-width: 750px) { /*iphone6*/ html { font-size: 117.188px; } } @media screen and (device-width: 1240px) { /*iphone6s*/ html { font-size: 194.063px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@media screen and (device-width: 640px) { /*iphone4/iphon5*/
      html {
        font-size: 100px;
      }
    }
@media screen and (device-width: 750px) { /*iphone6*/
      html {
        font-size: 117.188px;
      }
    }
@media screen and (device-width: 1240px) { /*iphone6s*/
      html {
        font-size: 194.063px;
      }
    }

这种方式也是可行的,缺点是灵活性不高,取每个设备的精确值需要自己去计算,所以只能取范围值。考虑设备屏幕众多,分辨率也参差不齐,把每一种机型的css代码写出来是不太可能的。但是它也有优点,就是无需监听浏览器的窗口变化,它会跟随屏幕动态变化。媒体查询的用法当然不仅仅像在此处这么简单,相对于第二种自适应来说有很多地方是前者所远远不及的。最明显的就是它可以根据不同设备显示不同的布局样式!请注意,这里已经不是改变字体和高度那么简单了,它直接改变的是布局样式!

CSS

@media screen and (min-width: 320px) and (max-width: 650px) { /*手机*/ .class { float: left; } } @media screen and (min-width: 650px) and (max-width: 980px) { /*pad*/ .class { float: right; } } @media screen and (min-width: 980px) and (max-width: 1240px) { /*pc*/ .class { float: clear; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media screen and (min-width: 320px) and (max-width: 650px) { /*手机*/
  .class {
    float: left;
  }
}
@media screen and (min-width: 650px) and (max-width: 980px) { /*pad*/
  .class {
    float: right;
  }
}
@media screen and (min-width: 980px)  and (max-width: 1240px) { /*pc*/
  .class {
    float: clear;
  }
}

此种自适应布局一般常用在兼容PC和手机设备,由于屏幕跨度很大,界面的元素以及远远不是改改大小所能满足的。这时候需要重新设计整界面的布局和排版了:

如果屏幕宽度大于1300像素

图片 13

如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

图片 14

如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

图片 15

许多css框架经常用到这样的多端解决方案,著名的bootstrap就是采用此种方式进行栅格布局的。

向数据库中增加数据

前面提到,增加数据需要通过事务事务的使用方式如下:

var transaction = db.transaction(['movies'], 'readwrite'); transaction.oncomplete = function(event) { console.log('事务完成!'); }; transaction.onerror = function(event) { console.log('事务失败!', event.target.errorCode); }; transaction.onabort = function(event) { console.log('事务回滚!'); };

1
2
3
4
5
6
7
8
9
10
var transaction = db.transaction(['movies'], 'readwrite');
transaction.oncomplete = function(event) {
    console.log('事务完成!');
};
transaction.onerror = function(event) {
    console.log('事务失败!', event.target.errorCode);
};
transaction.onabort = function(event) {
    console.log('事务回滚!');
};

图片 16数据库对象的transaction()方法接收两个参数:

  • storeNames // 对象存储空间,可以是对象存储空间名称的数组,也可以是单个对象存储空间名称,必传 [array|string]
  • mode // 事务模式,上面提到的三种之一,可选,默认值是readonly [string]

这样,我们得到一个事务对象transaction, 有三种事件可能会被触发: complete, error, abort. 现在,我们通过事务向数据库indexedDB-test的 对象存储空间movies中插入数据:

var objectStore = transaction.objectStore('movies'); // 指定对象存储空间 var data = [{ "title": "寻梦环游记", "year": "2017", "alt": "", "id": "20495023" }, { "title": "你在哪", "year": "2016", "alt": "", "id": "26639033" }, { "title": "笔仙咒怨", "year": "2017", "alt": "", "id": "27054612" }]; data.forEach(function(item, index){ var request = objectStore.add(item); request.onsuccess = function(event) { console.log('插入成功!', index); console.log(event.target.result, item.id); // add()方法调用成功后result是被添加的值的键(id) }; });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var objectStore = transaction.objectStore('movies');  // 指定对象存储空间
var data = [{
  "title": "寻梦环游记",
  "year": "2017",
  "alt": "https://movie.douban.com/subject/20495023/",
  "id": "20495023"
}, {
  "title": "你在哪",
  "year": "2016",
  "alt": "https://movie.douban.com/subject/26639033/",
  "id": "26639033"
}, {
  "title": "笔仙咒怨",
  "year": "2017",
  "alt": "https://movie.douban.com/subject/27054612/",
  "id": "27054612"
}];
data.forEach(function(item, index){
    var request = objectStore.add(item);
    request.onsuccess = function(event) {
        console.log('插入成功!', index);
        console.log(event.target.result, item.id); // add()方法调用成功后result是被添加的值的键(id)
    };
});

图片 17

通过事务对象transaction,在objectStore()方法中指定对象存储空间,就得到了可以对该对象存储空间进行操作的对象objectStore.

向数据库中增加数据,add()方法增加的对象,若是数据库中已存在相同的主键,或者唯一性索引的键值重复,则该条数据不会插入进去;

增加数据还有一个方法: put(), 使用方法和add()不同之处在于,数据库中若存在相同主键或者唯一性索引重复,则会更新该条数据,否则插入新数据。

总结

不管哪一种自适应方式,我们的目的是使得开发网页在各种屏幕下变得好看:如果你的项目定位的用户群仅仅是使用某种机型的人,那么可以采用第一种自适应方式。如果你的客户主要是移动端,但是客户的设备类型庞杂,建议采用第二种方式。如果你雄心勃勃地需要建立一套兼容PC、PAD、mobile多端的一体化web应用,那么第三种选择显然是最适合你的。每种方式都有自己的利弊,根据需求权衡利害,合理地实现自适应布局,需要不停的实践和摸索。路漫漫其修远兮,吾将上下而求索。

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:大型网站优化技术,基本使用

关键词: