前端 Web 开发常见问题概述

以下列举的,都是 JS 前端开发中最为常见的问题。知悉这些问题,不懂编程也能冒充前端大牛了。

目录

  1. CSS元素浮动的本质是什么?
  2. 经典三栏式网页布局是如何实现的?
  3. 一般前端网页优化的关键点
  4. 关于CSRF网站攻击


CSS 元素浮动的本质是什么?

浮动是 Html CSS 布局的关键知识点,不识浮动不算懂 CSS,真正了解了浮动,其它概念迎刃而解。

先看一个问题,在 Html 元素的渲染解析中,如何实现图片在文章中靠左显示?就像 Word 排版中的文字环绕效果:

解决方法就是给 HTML 标签添加一个 float CSS 属性,也就是浮动属性。对于容器,浮动让子元素按一个方向排行,例如“float:left”,让子元素按从左到右的顺序排列;对于元素,浮动让元素定位于父容器中的某一边或紧挨在某一个兄弟元素之后。

因浮动自动累加宽度,从而实现自适应大小的容器或按钮,这是浮动的价值。

但在子元素使用了浮动以后,父容器可能因子元素浮动而丧失高度。如下所示:

在上图中,左图像与右文本是有高度的,但因为使用了浮动属性,致使其父容器——即最上面的蓝色 div 的高度为 0。

使用 clear CSS 属性可以解决这个问题。最常见的用法,是在容器的尾部添加空标签,这个标签具有 clear 样式,如下所示:

<style>
.clear {
  clear: both;
}
</style>
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

在上面的代码中,倒数第 2 行即是一个带有clear样式的空标签。也可以使用 <br class="clear"> 或 <hr class="clear">,甚至附有 clear 样式的 ::after 都可以。clear 样式的意义,在于重置浏览器的渲染光标,使原本被忽略计算的浮动元素的高度,重新计算进来。clear 样式最常用的属性值是“clear: both”。

float不但可以从左向右浮动(float:left),还可以从右向左浮动(float:right),以此实现自适应内容的左对齐、或右对齐布局。但如果仅是实现左对齐布局,有另外一个 CSS 样式同样可以达到:display:inline-block。inline-block 的意义是子元素以块元素方式,从左向右依次排列。使用这种方式,不需要使用 clear 清除浮动。

在浏览器布局中最常见的麻烦是浏览器兼容。在 IE6 浏览器中,如果将一个容器标签设置浮动,同时设置了 margin-left、margin-right 为10px,那么实际两边的间隙就是 20px。解决方法也很简单,给容器标签添加“_display:inline”样式。注意,这个带前置下划线的 _display 只有IE可以解析,其它浏览器会忽视。这是 CSS 作为描述性语言的优势,谁听懂谁翻译,听不懂没关系。

经典三栏式布局是如何实现的?

经典三栏布局效果是这样的:

left 与 right 区域是固定宽度,center 区域随浏览器窗口大小而变化,内容自动向下伸拉。这是前端网页开发的入门式布局,实现起来也相当简单。

总体来讲,是以浮动 + 相对定位实现的。以下是 Html 代码:

<div id="header">#header</div>
<div id="container">
  <div id="center" class="column">#center</div>
  <div id="left" class="column">#left</div>
  <div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>

因为 center 区域要随浏览器动态伸拉,所以它的宽度是 100%,给左右两个边栏留出的宽度是靠父容器的 margin-left、margin-right 样式设置的。代码如下所示:

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#center {
  background-color: #e9e9e9;
  width: 100%;
}

实现这个布局效果的最关键代码在于左、右边栏元素的 margin-left、margin-right 属性。如下所示:

#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
  right: 200px;        /* LC width */
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

左边栏元素设置“margin-left: -100%”,相当于在center区域的左边框折返,所以“right: 200px”样式的设置效果,是紧挨 center 左边框向左延伸 200 个像素。右边栏设置“margin-right: -150px”样式的效果,是以 center 右边框向右延伸 150 个像素。

浮动是在 columns 类名上设置的:

#container .columns {
  float: left;
  position: relative;
}

每栏都有浮动,并且使用相对定位,所以上面才可以对它们进行 margin 关系定位。

一般前端网页优化的关键点

文件合并

最简单的使用 webpack 打包。webpack 是一个前端开发中普通使用的文件模块化(此模块化与 JS 模块化不是一个概念)打包工具,可以将多个文件打包成一个文件,从而减少网络请求。使用方法也很简单,通过 npm 安装 webpack,然后在项目根目录下创建一个配置文件 webpack.config.js,然后运行 webpack 工具就可以了。配置文件如下所示:

在上面的配置文件中,entry 是入口文件列表,output 是输出配置。

除了可以打包 JS 文件,webpack 还可以打包 css 文件、压缩 Html/JS/CSS 文件内容等。这些功能也是通过在配置文件中添加描述信息实现的。

除了 webpack,glup 也可以合并压缩前端文件。原理与之类似。

CSS 精灵图

在 CSS 中可能会引用很多图片,将这些图片合并成一个图片,就是 CSS 精灵图。原图在二维精灵图平面上都有自己的绝对定位和宽高。在使用时,使用 background-image 指向精灵图,使用 background-position 指定定位就可以了。

使用 webpack,可以将多张图片自动合并成精灵集,并输出一份匹配的 sass 样式文件。webpack 减去了设计师手动合图、排图、编写相应 CSS 样式的麻烦。

关于 sass

sass 是一种设计师使用的 css 编译工具,这种工具处理后缀名为 .sass 的文件,将它们编译为 css 文件。在 sass 文件中,可以使用变量、可以计算属性的值,如下所示:

$side : left;
.rounded {
 border-#{$side}-radius: 5px;
  margin: (14px/2);
}

使用 sass,可以显著提高设计师调试 UI 的效率。

延时加载 JS 文件

HTML 4.01 为 script 标签添加了一个新属性:defer,如下所示:

<script src="test1.js" defer="defer"></script>

有这个属性,代表该脚本不会影响页面的 HTML 构建,浏览器可以等页面解析完之后再来处理这个脚本。

还有一个属性:async,表明当前脚本文件可以异步加载,无需等待。一般用于处理外部网站脚本。如果没有这个属性,当外部网站网速很慢时,会非常影响浏览体验。

动静分离

将静态资源,JS、图片、样式表等统一放在一个二级域名下(一般是 static.xxx.com),而其它动态功能在主站域名下提供,这就是动静分离。这样做方便在静态站点上开启 CDN 加速,另外还可以避免在静态站点上使用 cookie。

避免无效的 404 页面

时间长了,网站越做越大,有些页面原来能访问,后来可能就无法访问的 404 页面了。浏览器并不知道哪个页面是 404 页面,对于曾经是 404 的页面,浏览器也不敢断定以后都是 404 页面。404 页面对用户来讲,体验不好;对搜索引擎来讲,也会因此降低收录权重。

解决的方法是,可以用 Go 语言写一个简单的爬虫工具,定时爬自己的网站,只要 Http 状态码返回 404 就记录下来。然后将 404 列表统一发给后端程序员处理。

除了 404 页面,与此同类需要注意的优化,是 img 标签的 src 属性为空,这也会造成浏览器发送空请求至服务器。也可以使用同样的检测工具,检测页面中哪些 src 属性没有值。这些 src 空值的情况,可能出现于某些动态页面的动态变量绑定中。

设置 Html 页面缓存(cache-control 与 expires)

cache-control 控制页面的缓存行为。expires 用于定义缓存过期时间,它接受一个 GMT 时间(格林尼治时间)。如果缓存未过期,浏览器将从本地缓存中拉取内容。

对于 cache-control 的值,no-cache 表示从来缓存,no-store 表示从不保存缓存或保存于浏览器临时文件夹中,public 表示任何情况下都可以缓存该资源,private 表示当前内容有用户权限缓存分别,max-age 表示希望接收一个不大于设定时间的资源。

Cache-Control 在使用时允许自由组合,例如:

Cache-Control: max-age=3600, must-revalidate

其中 must-revalidate 表示当前资源一定是向原服务器发去的请求,而非代理服务器上的缓存。

在 nginx 中,可以使用 expires 统一设置站点静态资源的缓存时间:

location  ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
  expires  3d;
}

开启 nginx gzip 压缩

在 nginx.conf 中使用如下信息开启 gzip 压缩功能:

gzip on;
gzip_disable "MSIE [1-6].";
gzip_types text/plain application/x-javascript text/css text/javascript image/jpeg image/gif image/png;

以上配置,可对静态页面、JS 文件、样式表文件、图片资源进行压缩。其中 gzip_disable 设置 IE6 不启用 gzip,因为 IE6 对gzip解包支持不好,会造成页面假死,影响用户体验。

在 nginx 中开启 Etag 设置

在 nginx 中开启 Etag,只需要一行代码:

http{
 etag  on;
}

使用 nginx -s reload 重启即可生效。开启 Etag 可以显著提高网站性能,但是这背后的机理是什么呢?

当浏览器向服务器第一次请求某网页时,服务器会返回一个 HTTP 状态 200,同时返回该页面的上次修改时间,格式如下:

Last-Modified: Fri, 12 May 2006 18:53:33 GMT

第二次访问同一个网页时,浏览器会自动向服务器访问,在该时间之后页面有没有改动,格式如下:

If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT

如果没有改动,服务器会返回一个 HTTP 状态码 304(代表页面无变化)及一个空报文,避免重复加载。

但是服务器端判断 If-Modified-Since 的最小单位是秒,如果间隔小于1秒,服务器会误报;有时候服务器也不能精确取得文件的修改时间,致使误报等等,基于这些情况,HTTP/1.1 协议引入了 Etag。这可以理解为是一个网页文件的版本号,格式如下:

ETag: "50b1c1d4f775c61:df3"

浏览器第一次某网页时,服务器会返回一个 Etag。浏览器在第二次向服务器重复加载同一个网页时,会同时询问:

If-None-Match: W/"50b1c1d4f775c61:df3"

如果文件没有变化,服务器直接返回304状态码。

尽量减少 cookie

cookie 出现在每次网页请求的请求头中,适当控制可以有效降低报文大小。

路由跟踪测试

在 windows 上使用 tracert,在 mac 上使用 traceroute,用于检测从当前电脑端到达指定服务器经过哪些节点,观察哪些节点影响了页面加载速度,有针对性地优化。在 mac 上 trace 某度的截图如下:

关于 CSRF 网站攻击

CSRF 是 Cross Site Request Forgery 的简称,学名跨站请求伪造,主要通过伪造登陆用户的 cookie 取得非法权限。用户登陆网站后会在本地留下 cookie,如果在未退出网站之前访问了一些非法站点,这些 cookie 信息可能就被不法分子利用干一些坏事情。有时候爬虫工具也会伪造 cookie,以便抓取只有登陆用户才能抓取的页面信息。

防范 CSRF 最普通的手段是使用 HTTPS 通讯协议,并在请求头 Header 中放置一个自定义的验证字符串。当用户登陆网站时,服务器生成 token、将 token 保存至数据库并返回给客户端,客户端在本地保存并在下一次发出网络请求时在报文中带上该 token。如果超时,或者收到的 token 与库中不一致,服务器视为请求无效。

该验证手段在 App 开发、小程序开发中也经常用到。

2019年1月21日于北京


参考资料

  • HTTP缓存控制小结
  • 性能优化:使用GZIP来压缩网页
  • CMD 路由追踪tracert命令
  • web前端攻击技术与防范——XSS、CSRF、网络劫持、控制台注入、钓鱼
  • 理解HTTP响应的ETag
  • Nginx配置启用ETag提高访问速度

原文发布于微信公众号 - 艺述思维(yishulun2005)

原文发表时间:2019-01-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券