抓之前最好先清一下dns缓存

1
2
3
4
5
6

# windows
$ ipconfig /displaydns  #查看本地缓存的DNS信息
$ ipconfig /flushdns  #清除本地缓存的DNS信息

# linux
$ /etc/rc.d/init.d/nscd restar

域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求，浏览器得到html代码 –> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） –> 浏览器对页面进行渲染呈现给用户

##

使用命令 wget www.baidu.com 来请求，发现直接使用chrome浏览器请求时，干扰请求比较多，所以就使用wget命令来请求，不过使用wget命令只能把index.html请求回来，并不会对index.html中包含的静态资源（js、css等文件）进行请求。

待看

https://www.cnblogs.com/engeng/articles/5959335.html

简介

常见后端框架

• java
  • spring
• PHP
  • thinkphp
    -
• node
  -

对比

VS 前端框架

VS 后端模板

#

安全

XSS攻击

XSS注入防护重要的是呈现任何内容的时候进行HTML编码，例如<>。

问题

知乎怎样做到的禁用js注入？

• 知乎的编辑器根本就不允许用户自定义样式、格式，更别说自定义HTML代码了，危险系数极低。
• XSS攻击可以在任何用户可定制内容的地方进行，例如图片引用，在知乎上发表站外图片的引用，知乎会在服务器自动下载转换为自己的图片。
• 作为一个UGC网站，知乎提供的内容输入的功能可说是简陋至极，没有太多的XSS攻击需要考虑。

github怎样做到的？

• markdown起码能支持 等标签吧

discuss也做了吧
-

自己的网站如何做建议xss防护？

• 可以把comments托管到gist，经审核后再放行
• 把comments托管到discuss

兴趣图谱（Open Graph）
兴趣图谱帮助用户在使用应用时，快捷分享关于兴趣、生活的交互故事。他是一套标准化、结构化的信息传播方法，为开发者提供了将其应用或网站，深入连接到微博的途径。

通过直接编写 JavaScript、CSS、HTML 开发 Web 应用的方式已经无法应对当前 Web 应用的发展。
近年来前端社区涌现出许多新思想与框架

新框架

在 Web 应用变得庞大复杂时，采用直接操作 DOM 的方式去开发将会使代码变得复杂和难以维护， 许多新思想被引入到网页开发中以减少开发难度、提升开发效率。

React

React 框架引入 JSX 语法到 JavaScript 语言层面中，以更灵活地控制视图的渲染逻辑。

1
2

let has = true;
render(has ? <h1>hello,react</h1> : <div>404</div>);

Vue

Vue 框架把一个组件相关的 HTML 模版、JavaScript 逻辑代码、CSS 样式代码都写在一个文件里，这非常直观。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!--HTML 模版-->
<template>
  <div class="example">{{ msg }}</div>
</template>

<!--JavaScript 组件逻辑-->
<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<!--CSS 样式-->
<style>
.example {
  font-weight: bold;
}
</style>

Angular2

Angular2 推崇采用 TypeScript 语言去开发应用，并且可以通过注解的语法描述组件的各种属性。

新语言

• ES6
• TypeScript：除了支持 ES6 的所有功能，还提供了静态类型检查。
• Flow
• SCSS：用程序员的方式写 CSS。它是一种 CSS 预处理器，基本思想是用和 CSS 相似的编程语言写完后再编译成正常的 CSS 文件。采用 SCSS 去写 CSS 的好处在于可以方便地管理代码，抽离公共的部分，通过逻辑写出更灵活的代码。 和 SCSS 类似的 CSS 预处理器还有 LESS 等。

Echo.js – 简单易用的图片延迟加载插件
Lazyr.js – 延迟加载图片（Lazy Loading）

阿里云龙 https://github.com/fouber

如何动态加载js

1
2
3

var newScript = document.createElement("script");
newScript.src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML";
document.getElementsByTagName('head')[0].appendChild(newScript);

同步加载
wScript);
`

同步加载

Angular的适用领域相对窄一些，React可以拓展到服务端，移动端Native部分，而Vue因为比较轻量

分类

• css框架
  • Bootstrap: 一套ui皮肤+少量js组成的框架，属于封装度偏低的框架

• js框架
  诸如AngularJS、Ember.js、Meteor.js、ExtJS和React等面向网页浏览器的JavaScript框架采纳了单页应用（SPA）原则。

  • AngularJS是一个全面的客户端侧框架。其模板基于双向UI数据绑定。数据绑定是一种自动方法，在模型改变时更新视图，以及在视图改变时更新模型。其HTML模板在浏览器中编译。编译步骤创建纯HTML，浏览器将其重新渲染到实时视图。该步骤会在随后的页面浏览中重复。在传统的服务器端HTML编程中，控制器和模型等概念在服务器进程中进行交互以产生新的HTML视图。在AngularJS框架中，控制器和模型状态在客户端的浏览器中维护，从而使生成新页面不依赖与服务器的交互。
  • Ember.js是基于模型-视图-控制器（MVC）软件架构模型的客户端侧JavaScript Web应用程序框架。它允许开发人员在一个框架中通过常用的习惯用语和最佳实践来创建可伸缩的单页面应用程序。该框架提供丰富的对象模型、声明性双向数据绑定、计算属性，Handlebars.js提供的自动更新模板，以及一个路由器管理应用程序状态。
  • Meteor.js是一个专门为单页应用设计的全栈（客户端-服务器）JavaScript框架。它具有比Angular、Ember或ReactJS更简单的数据绑定特性[6]，并且使用Distributed Data Protocol[7]和一个发布/订阅来自动将数据更改传播到客户端，无需开发人员编写任何同步代码。全栈反应确保从数据库到模板的所有层都可以在必要时自动更新。诸如服务器端渲染[8]等生态系统包则解决搜索引擎优化（SEO）等问题。
  • Aurelia是一个适用于移动设备、桌面和网页的JavaScript客户端框架。它类似AngularJS，但更新、更匹配标准，并采用模块化举措。Aurelia使用下一代ECMAScript编写。[来源请求]
  • Vue.js（通常称为Vue）是一个用于构建用户界面的开源渐进式JavaScript框架。
  • React（通常写为React.js或ReactJS）是一个构建用户界面的JavaScript库。它由Facebook、Instagram和个人开发者以及企业社区维护。React最大的优势是易于使用——基本上任何熟悉HTML的开发人员都可以创建React应用程序。另一个所称的优势是可能使用相同的技术堆栈来同时创建Web与移动应用程序。有多家公司使用React和Redux库来让开发人员创建复杂但可扩展的Web应用程序。[9]
    Fulcro是一个全栈库，它采用Netflix的Falcor，Facebook的Relay和Om Next对反应性，功能性，数据驱动软件进行改编的数据驱动原则。

bootstrap

bootstrap基本就是

Bootstrap是最流行的HTML，CSS和JavaScript框架，用于在网络上开发响应式、移动的Web项目。

掌握 LESS 有助于理解 Bootstrap。

1
2
3
4
5
6
7
8
9
10
11

<!-- Latest compiled and minified CSS
这是编译后的版本，119K，有点大。
有些人建议采用编译前的less，选择性引用。
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

• 自己整理css的话工作量太大。
• bootstrap主要是样式侵入性太强，个性化定制太麻烦
• bootstrap.min.css 100多k。

会加载整个css吗？还是只加载用到的？

如果引用bootstrap.min.css，肯定会加载所有样式。
所以很多人不建议直接引用bootstrap.min.css，而是下载bootstrap source的less，然后选择性引用。

grid system是什么鬼？

bootstrap.min.css 119k
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css