[Web前端][w3c][布局][性能优化][抓包][兼容][W
本文包括：w3c标准、布局方式、前端性能优化、调试抓包工具、浏览器兼容*、Web三大标准、安全问题
- w3c标准
- 布局方式
- 前端性能优化
- 调试抓包工具
- 浏览器兼容
- Web三大标准 -- 可用性、可维护性、可访问性
- 八大前端安全问题
【W3C标准】
W3C(World Wide Web Consortium), 万维网联盟由 Tim Berners-Lee 于1994年10月创建。是一个对 Web 进行标准化的会员组织，主要分为三个部分：结构、表现和行为。
-- 结构化标准语言包括XHTML和XML。
-- 表现标准语言主要包括CSS（层叠样式表）。
-- 行为标准语言主要包括对象模型（比如DOM和ECMAScript）
使用实例
当顶部为： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
需注意以下情况：（所用前提都是在顶部基础上而言！）
1、所有标签用小写。
2、头文件meta、link标签。
3、JS调用：<script src="/wl_inc/main.js" type="text/javascript"></script>
4、表格<table>高度 ：不要使用如height="101"
……
【Web网页布局的主要方式】
- 静态布局（static layout）
- 流式布局（Liquid Layout）
- 自适应布局（Adaptive Layout）
- 响应式布局（Responsive Layout）
- 弹性布局（rem/em布局）
| 布局方式 | 屏幕分辨率变化时 | 优点 | 缺点 | 设计方法 |
|---|---|---|---|---|
| 静态 | 网页布局始终按照最初写代码时的布局来显示 | 编写简单，没有兼容性问题 | 不能根据用户的屏幕尺寸做出不同的表现 | 设置了min-width，小于或大于会出现滚动条/添加背景 |
| 流式 | 页面里元素的大小会变化，布局不变（栅栏系统--网格系统） | 如果屏幕太大或者太小都会导致元素无法正常显示 | 使用%百分比定义宽度，高度用px来固定住 | |
| 自适应 | 页面里面元素的位置会变化(切换不同的静态布局)，大小不变 | 使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式 | ||
| 响应式 | 页面里面元素位置和大小都会变 | 适应pc和移动端 | （1）媒体查询有限 （2）要匹配足够多的屏幕大小，工作量大 |
媒体查询+流式布局 |
| 弹性 | 见详解 |
结论
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
详解：Web网页布局的主要方式
https://juejin.im/post/59f706a8f265da43094471a7
【性能优化主要方式】
前端优化的目的
- 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
- 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
优化手段
1. 页面级优化
- 减少 HTTP请求数
一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。- 从设计实现层面简化页面
- 合理设置 HTTP缓存
- 资源合并与压缩: 尽可能的将外部的脚本、样式进行合并
- CSS Sprites: 合并 CSS图片
- Inline Images: 将图片嵌入到页面或 CSS中
- Lazy Load Images
- 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
- 异步执行 inline脚本
- Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）
- 将 CSS放在 HEAD中
- 异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
- 减少不必要的 HTTP跳转
- 避免重复的资源请求
2. 代码级优化
- javascript优化
(1)将JavaScript脚本放在页面的底部。
(2)将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。
(3)缩小JavaScript和CSS
(4)删除重复的脚本
(5)最小化DOM的访问：使用JavaScript访问DOM元素比较慢。
(6)开发智能的事件处理程序
(7)javascript代码注意：谨慎使用with,避免使用eval Function函数,减少作用域链查找。
- CSS优化
(1)将CSS代码放在HTML页面的顶部
(2)避免使用CSS表达式
(3)使用<link>来代替@import
(4)避免使用Filters
- HTML
(1)使用HTML 来构造页面结构，CSS修饰页面呈现，JavaScript实现页面功能。
(2)如果能用CSS或JavaScript实现就少用HTML代码。
(3)将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。
- 图像优化
(1)优化图片大小
(2)通过CSS Sprites优化图片
(3)不要在HTML中使用缩放图片
(4)favicon.ico要小而且可缓存
【调试抓包工具】
什么是抓包？
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。
在做接口测试的时候，经常需要验证发送的消息是否正确，或者在出现问题的时候，查看手机客户端发送给server端的包内容是否正确，就需要用到抓包工具。
常用工具
- Fiddler：在windows上运行的程序，专门用来捕获HTTP，HTTPS的。使用 C# 语言开发
- wireshark：能获取HTTP，也能获取HTTPS，但是不能解密HTTPS，所以wireshark看不懂HTTPS中的内容。
- Charles：可以在 Mac 平台使用， Java 语言开发
【浏览器兼容】
浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。
1. 样式兼容性（css）方面
image
2. 交互兼容性（javascript）
image
3. 浏览器 hack
判断 IE 浏览器版本/Safari 浏览器/ Chrome 浏览器
image
/* IE */
<!--[if IE 8]> ie8 <![endif]-->
<!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->
/* Safari */
var isSafari = /a/.__proto__=='//';
/* Chrome */
var isChrome = Boolean(window.chrome);
【Web标准】
1. 可用性
产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。
2. 可维护性
一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。可维护性和可复用性、可扩展性等有交叉的地方。构建可维护性好的代码，对企业的长期发展非常重要。
3. 可访问性
可访问性就是对所有人一视同仁，无论他们是否有残障。
四个可访问性标准：
- 可感知：人们可以通过适合自己的媒体来获知网页内容。比如应当让盲人得以收听页面内容。例如，图像应该有文本对应体。
- 可操作：人们可以与 web 应用程序或内容进行交互。例如，用户应该可以不用鼠标也能与某个网站进行交互，并且可以通过屏幕阅读器来进行导航。
- 可理解：使用者可以弄懂页面内容和用户界面。例如，正文不应该比它需要的更加复杂，且网站应以可预测的方式来运行。
- 健壮性：所提供的一切服务都应当不受平台或操作系统的限制。这样就可以避免人们提供一些不太完善的服务，这些服务会因为硬件/软件的限制而导致大多数人都无法使用。例如，不同设备上的浏览器能够一起使用网站，且导航应该是一致的。
参考文章：
https://www.cnblogs.com/uedt/articles/1809126.html
https://www.cnblogs.com/radom/archive/2011/03/26/1996093.html
【八大前端安全问题】
-
XSS (Cross Site Script)）
浏览器错误的将攻击者提供的用户输入数据当做JavaScript脚本给执行了。 -
CSRF（Cross-Site Request Forgery）
攻击者可以盗用你的登陆信息，以你的身份模拟发送各种请求。 -
SQL 注入漏洞（SQL Injection）
可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。 -
命令行注入漏洞
指的是攻击者能够通过 HTTP 请求直接侵入主机，执行攻击者预设的 shell 命令。 -
DDoS（Distributed Denial of Service）
分布式拒绝服务，利用大量的请求造成资源过载，导致服务不可用。 -
流量劫持
分为DNS 劫持和HTTP 劫持，目的都是一样的，就是当用户访问某网站的时候，给你展示的并不是或者不完全是网站提供的 “内容”。 -
DNS 劫持
域名劫持。如果当用户通过某一个域名访问一个站点的时候，被篡改的 DNS 服务器返回的是一个恶意的钓鱼站点的 IP，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。 -
HTTP劫持
当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 HTTP 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面，轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私。
