前端

《高性能网站建设指南》《高性能网站建设进阶指南》
SublimeText插件：SublimeCodeIntel、Emmet、SublimeLinter、Git +Gutter

VIM:
插件管理：vim-pathogen
必备插件：
    装逼插件：Airline
    编码风格：EditorConfig
    自动完成：vim内置
    编码加速：Emmet
    版本控制：Fugitive
    代码检查：Syntastic
    
                            HTTP协议
无状态、B/S模式、多基于TCP协议，2XX表示请求成功，3XX表示跳转，4XX表示客户端请求错误，5XX表示服务器错误。

Request Headers:
Accept:可以接受什么类型的内容
Accept-Encoding:可以接受什么编码
Cookie:http是无状态的，下一个请求不知道上一个请求，就通过cookie解决，
Referer:我是从哪个页面来的，Referer在浏览器安全里面是不润许改的，别人是控制不了这个Referer的，
User-Agent：标识当前浏览器
《HTTP权威指南》《TCP/IP详解》


                            浏览器工作原理：
用户输入一个url：www.baidu.com,
1.首先把url的域名拖出来，做DNS解析（多级缓存，缓存都是为了加速），先会去浏览器缓存找，然后在本机操作系统里面，然后在局域网路由器，然后在公司网的路由器，一级一级找到域名，解析完DNS就找到了主机。
2.请求资源（TCP建立链接，HTTP报文），先建立一个socket然后发http报文，等待响应，对响应做解析，根据响应头和状态码做不同的处理。做一些缓存处理，对压缩文件做解压，对引用的资源css/js/图片，
3.构建DOM树（节点）
4.构建CSSOM树
5.构建Render树
6.脚本：文档状态
7.渲染页面

                            Repaint + Reflow
Repaint:皮肤类外观改变会引发重新渲染，如background-color,不会重新计算元素的位置
Reflow:元素位置、大小、盒模型等发生变化需要重新布局
常见引发事件：
    1.页面滚动
    2.页面硕放
    3.添加样式
    4.操作DOM(属性、样式、增删节点)
    5.仅仅计算元素宽高位置
    

                                浏览器兼容
如何发现问题：QuirksMode、CanIUse
如何解决问题：BrowserHacks、ES5Shim、ES6Shim、json3、html5 shim
彻底解决问题：Modernizr、Feature.js

QuirksMode:列出兼容性列表
CanIUse：查村js特性、css属性、h5等的支持情况（推荐，更新）

BrowserHacks：不同浏览器及版本支持
Shim：对浏览器不支持的，以打补丁方式，修改老浏览器内容的原型，
ES5Shim、ES6Shim在github上面有。
Modernizr:浏览器特征检测库
Feature.js：类似于Modernizr，更轻量，不支持css


Modernizr:保证老版本兼容性，新版本根据支持情况让用户体验更好
1.全局安装
2.获取配置：自定义构建
3，生成构建：命令行用法
4.引入生成的脚本
5.使用js+css


                                性能优化
减少网络请求:
1.合并请求：包括js、css
2.使用css sprite
3.使用地图：HTML Map
4.内联小图片：Base64Encode

使用内容分发网络CDN:
1.DNS解析位置地图上离用户最近
2.专业的公司提供服务

适当使用缓存：
1.为静态资源添加Expires响应头
2.为静态资源添加Cache-Control响应头
3.配置Apache、Nginx、Express缓存

使用GZIP压缩（）
1.大幅度减少网络传输体积，压缩率达60%-90%，减少网络传输时间

减少DNS查找
1.单个站点不要使用太多域名
2.单次DNS查找约消耗20-120ms

避免重定向
1.重定向意味着浏览器重头再来
2.每次重定向要50ms

配置有效的过期规则
1.跟浏览器说明最后更新时间和过期规则，没有修改服务端直接返回304

让ajax异步请求可缓存

尽快输出第一个字节
1.尽快输出页面头部，浏览器可以尽快干活
2.并行下载外联css

使用无cookie域名加载静态资源
1.减少静态资源加载时的网络传输量
2，静态资源加载通常不需要cookie

把css放在head中加载
    能让页面更早的开始渲染，避免闪屏
js放在body末尾
    js会阻塞HTML解析和css渲染
不用css表达式
    兼容性问题，性能开销大，可能导致页面卡顿
用外联引用css和js
    减小html体积
    可合理利用浏览器缓存
压缩js和css
    删除不需要的注释空白
    js变量名压缩，混淆压缩
不重复加载js
    重复加载js会多个请求，不能发挥缓存优势
Get方式发送ajax
    get可以缓存，更加语义化
组件延迟加载
    保障页面关键资源优先加载
    例如：Lazyload按需加载
减少dom节点数
    更多节点数浏览器布局渲染计算量更大
避免使用iframe
    会阻塞父文档的onload
    即使空白iframe也比较耗时
减少cookie体积
    js/css/图片 每次请求都会带上，使用无cookie域名加载静态资源
减少js的dom访问
    对于查找到的元素，缓存在js变量中
    节点增加合理使用DocumentFragment
    不要用js频繁修改样式
图片优化
不要html缩放图片
    增加渲染开销
    不要清空图片的src清空
    任何资源尽量在25k以内

                            性能诊断工具
YSlow：23条规则，打分，提供浏览器插件
WebPageTest：真实浏览器检测，视频截图
GooglePageSpeed:
（国内）性能魔方：性能评测公司
阿里测：
17CE:偏于运维


    

 

转载于:https://www.cnblogs.com/yaowen/p/7027385.html