页面重构技能-内容篇

喜欢ヅ旅行 2021-06-26 16:06 310阅读 0赞

专业的页面重构师手下出产的页面应该是标准、合理、高效，易扩展，易维护的。为尽早奔向这一NB的方向，吾等前赴后继的前端码农们，升级所需的必要天赋之一：载入更快，更省带宽！

## 少叙闲言 ##

结合网上大量关于`Yahoo`的高性能网站构建的黄金守则，说下自己眼中的守则。  
守则分为7大类34条，包括内容、服务器、`cookie、CSS、Javascript`、图片、移动应用。

## 1、尽量减少`HTTP`请求 ##

当用户载入你的页面时候，有`80%`的时间是用来下载页面里各个项目，包括图片、样式、脚本、`FLash`等。所以减少`HTTP`请求就可以提高响应速度。例如：`baidu`、`google`，就一个条条在那里…

像大家都知道的合并文件，`CSS Sprite`等，我想说的是：并不是一味的追求减少请求，而是要权衡这么做之后，对于其他因素的影响。  
合并文件：耦合大，无法一眼辨别各个功能模块。  
`CSS Sprite`：大量整合的图片对于改版这样的维护，难度会几何增长。  
　　　　　　另外超大的整合图片下载完之前，用到它的地方都会不显示。

## 2、减少DNS查找次数 ##

每一个独立域名都会有一个对应的IP地址，也就是说，当你输入`www.baidu.com`时候，服务器不会知道你要找的是“baidu”，而是解析成对应的IP地址，然后再访问。类似你查找电话本一样，这个解析的过程，浏览器就在那傻等着，一般会花费20到120毫秒时间。  
`DNS`查找次数也就是你下载`CSS、JS、图片`等所访问的不同域名的总数，包括子域名。和主域名不同的外域名会消耗更多的时间。  
解决办法：`CSS`去解决一些图片样式，及`JS`动画（`CSS3`的`NB`地方）。  
　　　　　将可移植的外域资源放在子域名下。

## 3、避免跳转 ##

跳转是使用`301`和`302`代码实现的，例如下面的`HTTP`请求头中：

HTTP/1.1 301 Moved Permanently
    Location: http://example.com/newuri
    Content-Type: text/html

浏览器会把用户指向到`Location`中指定的`URL`下，其中如需缓存需要指定`Expires`或`Cache-Control`  
虽然`JS`可以实现跳转，但是为了保证后退按钮好使，还是老实用`3XX`状态码这种方式。  
这一部分好像对纯前端没啥关系或是接触不太多，但是为了成长成真正`NB`的前端，早晚这些都得掌握。

## 4、可缓存AJAX ##

缓存对于用户来说的意义大家都懂的，所以`ajax`里必然少不了缓存的功能。  
但我想说的是要根据需求来确定是否缓存。  
其中IE自动添加缓存，而`chrome`却不是。  
下面罗列一下常用清除缓存的办法：

在服务器端header("Cache-Control:no-cache,must-revalidate");
    在ajax发送请求前加上xmlhttpObj.setRequestHeader("If-Modified-Since","0");
    在ajax发送请求前加上xmlhttpObj.setRequestHeader("Cache-Control","no-cache");
    再ajax的URL参数后面加上?t="Math.random()";

## 5、推迟加载内容 ##

网页的表现和行为要分开，先表现，后行为。所以，第一要务是迅速将页面呈现出来，然后一些必要的功能交互，再然后是一些动画或是提升体验的花哨效果。

## 6、预加载 ##

预加载的目标：利用异步或是浏览器空闲时间，加载即将使用到的内容，达到迅速响应用户操作的目的。  
例如：  
页游中，空闲时间加载下一场景的所需图片。  
页面中的`JS`，利用`img`对象预加载`js`，然后按需执行。

## 7、减少`DOM`元素个数 ##

一个复杂的页面意味着需要下载更多数据，同时也意味着`JavaScript`遍历`DOM`的效率越慢。  
解决办法：深入理解各个标签的语义，减少为了布局而大量罗列的`DIV`。

## 8、根据域名划分页面内容 ##

一个页面加载的时候会下载很多外部资源，例如`CSS、JS、IMG`等，然而把他们或按分类，分布在不同的子域名下会提高`DNS`并行的下载效率。  
因为浏览器所允许的最多连接数和每个服务器所允许的最大连接数是有一定限制的

## 9、避免404 ##

`HTTP`的消耗是巨大，让它来请求一个响应一个`404`是完全没有必要的。  
例外，对站点的`SEO`也不利，有些网站的`rabots.txt`即使没有限制，也应该上传一个空文件，如果没有，会让引擎爬虫记录下你站点的一个`404`，从而降低你站点的权重。

--------------------

# 页面重构css技巧总结篇 #

**1.如何让文字在容器内垂直居中？**

(1)方法：为容器添加`line-height`属性，使得`line-height`的值等于容器的`height`。

(2)代码

<!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style type="text/css"> .container{ width: 300px; height: 500px; margin: 50px; background: blue; line-height: 500px; text-align: center; } .text{ color: white; } </style>
        </head>
        <body>
        	<div class="container">
        		<p class="text">我是文字</p>
        	</div>
        </body>
        </html>

(3)原理  
首先应该明确`line-height`的含义。`line-height`属性的含义是设置行间的距离，简称叫行高。而文字的特点就是会以中线为基准进行显示。也就是说，我们可以做如下实现：设定一个容器`div`，不为其制定高度，内部的文字为其指定行高，在`chrome`中变换行高，我们会发现文字一直是在容器中垂直居中显示的。（这里的容器大小完全是被文本撑开的，准确的说是其`line-height`撑开的）

所以如果外部的`div`大小确定，将其内部的文字设置`line-height`为容器高度，从视觉效果上看就实现了文字的垂直居中。但还是应该注意并不是二者配合才生成的这种效果，而是文字本身的显示是围绕中线居中的。

**2.如何实现三列布局，两侧固定宽度中间自适应？**

(1)方法：利用浮动，分别对左右两侧的`div`设置向左右两侧浮动，再为中间的`div`设置相应的`margin`

(2)代码

<!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style type="text/css"> .container{ margin: 50px; height: 500px; width: 100%; border:1px solid blue; } .box{ height: 100%; border: 1px solid red; } .left{ width: 150px; float: left; } .right{ width: 150px; float: right; } .middle{ background: green; margin-left: 150px; margin-right: 150px; } </style>
        </head>
        <body>
        	<div class="container">
        		<div class="box left"></div>
        		<div class="box right"></div>
        		<div class="box middle"></div>
        	</div>
        </body>
        </html>

(3)原理  
这里利用了默认宽度的方法。一个`div`，如果不为它设定宽度，那么它的宽度默认值就是`100%`。也就是说如果父元素宽度是当我们在此基础上为其设定`margin-left`和`margin-right`属性值，就会让这个`div`的宽度相应缩小。

注意，`height`的默认值是`0`。

**3.如何让一个`div`铺满整个屏幕**

(1)方法：将背景图宽度和高度设置为`100%`，并且设定`position`为`fixed`。

(2)代码

<!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style type="text/css"> *{ margin: 0; padding: 0; } .container{ width:100%; height: 100%; position: fixed; background: black; } </style>
        </head>
        <body>
        	<div class="container">
        	</div>
        </body>
        </html>

(3)原理

如果只设定`width`和`height`为`100%`，那么宽度可以达到`100%`，但是高度并不会发生变化。设置了`position:fixed`，其含义为生成绝对定位的元素，并且相对于浏览器窗口进行定位。因此，这样设定后，整个`container`元素都是依据窗口进行设定的，高度的`100%`也就是相对于当前窗口大小的`100%`了。